React wird kompiliert ohne Fehler aber keine Komponente wird im Browser angezeigt

Question

Ich bin neu in React.

Ich habe installiert reagieren mit npm install create-react-app. Ich habe eine server.js Datei erstellt, und meine Dateistruktur ist hier.

package.json

{ 
     "name": "my-app", 
     "version": "0.1.0", 
     "private": true, 
     "dependencies": { 
     "axios": "^0.17.1", 
     "babel-loader": "^7.1.2", 
     "body-parser": "^1.18.2", 
     "classnames": "^2.2.5", 
     "express": "latest", 
     "lodash": "latest", 
     "morgan": "^1.9.0", 
     "prop-types": "latest", 
     "react": "^16.2.0", 
     "react-dom": "^16.2.0", 
     "react-router": "^4.2.0", 
     "react-router-dom": "^4.2.2", 
     "react-scripts": "1.0.17", 
     "validator": "^9.2.0", 
     "webpack-hot-middleware": "^2.21.0", 
     "html-webpack-plugin": "latest" 
     }, 
     "scripts": { 
     "start": "nodemon --watch server --exec babel-node -- server.js", 
     "start-dev": "node server.js", 
     "build": "react-scripts build", 
     "test": "react-scripts test --env=jsdom", 
     "eject": "react-scripts eject" 
     }, 
     "devDependencies": { 
     "babel-cli": "^6.26.0", 
     "babel-preset-env": "^1.6.1", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "babel-preset-react-hmre": "^1.1.1", 
     "nstall": "^0.2.0", 
     "react-hot-loader": "^3.1.3", 
     "react-redux": "^5.0.6", 
     "redux": "^3.7.2", 
     "redux-thunk": "^2.2.0", 
     "webpack": "^3.10.0", 
     "webpack-dev-middleware": "^2.0.3" 
     } 
    } 

server.js Datei

import path from "path"; 

import express from 'express'; 
import webpack from 'webpack'; 
import webpackMiddleware from 'webpack-dev-middleware'; 
import webpackHotMiddleware from 'webpack-hot-middleware'; 
import webpackConfig from './webpack.config.dev'; 
import bodyParser from 'body-parser'; 

import users from './src/Actions/users'; 

const app = express(); 

app.use(bodyParser.json()); 

app.use('/api/users',users); 

const compiler = webpack(webpackConfig); 

app.use(webpackMiddleware(compiler, { 
    hot:true, 
    publicPath: webpackConfig.output.publicPath, 
    noInfo: true 
})); 
app.use(webpackHotMiddleware(compiler)); 

app.use(express.static('public')); 

app.get('*',(req,res)=>{ 
    res.sendFile(path.join(__dirname,'./public/index.html')); 
}); 
app.listen(5001,() => console.log('Example app listening on port 5001!')); 

Webpack.config.js

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    devtool:'eval-source-map', 

    entry: [ 
     'webpack-hot-middleware/', 
     path.resolve(__dirname, './src/index.js') 
    ], 

    output:{ 
     path: path.join(__dirname, 'public'), 
     filename: "[name].bundle.js", 
     publicPath: '/' 
    }, 
    plugins: [ 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.NamedModulesPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin() 
    ], 
    devServer: { 
     hot: true, 
     inline: false, 
     contentBase: "./" 
    }, 
    module:{ 
     rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loaders: [ 
       'react-hot-loader/webpack', 
       'babel-loader?' + 
       'babelrc=false,' + 
       'presets[]=es2015,' + 
       'presets[]=react' 
      ] 
     }] 
    }, 
    resolve:{ 
     extensions:['.js'] 
    } 
} 

npm run start Auf laufenden Datei. Es hört auf den ausreichenden Port und kompiliert alles ohne Fehler. Im Browser werden jedoch keine Komponenten von React angezeigt. Es läuft einfach und macht nichts.

src/index.js Datei

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import registerServiceWorker from './registerServiceWorker'; 
import { BrowserRouter, Link, Route } from 'react-router-dom' 
import {Provider} from 'react-redux'; 
import thunk from 'redux-thunk'; 
import { createStore, applyMiddleware } from 'redux'; 

import App from './App'; 
import Greet from './Greetings'; 
import SignupPage from './signup/signup'; 

const stores = createStore(
    (state = {}) => state, 
    applyMiddleware(thunk) 
); 

ReactDOM.render((
    <Provider store={stores}> 
    <BrowserRouter > 
     <div> 
      <Route component={App}> 
      </Route> 
      <div id={'jumbo'} className='container css'> 
       <Route exact path='/' component={Greet}/> 
       <Route path='/signup' component={SignupPage}/> 
      </div> 
     </div> 
    </BrowserRouter> 
    </Provider> 
), document.getElementById('app')); 
registerServiceWorker(); 

Wie kann ich meinen Code löschen. Ich wusste nicht, wo ich Fehler gemacht habe. Hilf mir !! Vielen Dank im Voraus. :-)

Answer 1

Ich denke, du bist verwirrt mit dem, was create-react-app tut und wie es funktioniert. Von create-react-app Dokumentation:

Sie müssen keine Tools wie Webpack oder Babel installieren oder konfigurieren. Sie sind vorkonfiguriert und ausgeblendet, sodass Sie sich auf den Code konzentrieren können.

Erstellen Sie einfach ein Projekt, und Sie sind gut zu gehen.

Unter der Haube baut es Ihr Projekt mit Webpack. Also, wenn Sie Webpack ändern/hinzufügen möchten, sollten Sie sich npm run eject Befehl ansehen.

Durch das Ausführen von npm run eject werden alle Konfigurationsdateien und die transitiven Abhängigkeiten (Webpack, Babel, ESLint usw.) direkt in Ihr Projekt kopiert, sodass Sie die volle Kontrolle darüber haben. Befehle wie npm start und npm run build funktionieren weiterhin, aber sie zeigen auf die kopierten Skripte, damit Sie sie optimieren können. An diesem Punkt bist du alleine.

So scheint, als ob Sie nicht Ihre eigene webpack.config.js Datei benötigen. Wenn Sie möchten, dass der Webpack-Entwicklungsserver-Proxy Ihre API-Anfragen an Ihren API-Server weiterleitet, können Sie den folgenden Eintrag hinzufügen: "proxy": "http://localhost:3001/" in Ihre package.json-Datei, damit webpack-dev-server Ihre Anfragen an Ihren Server weiterleiten kann.

Hope it make sence