React는 오류없이 컴파일되지만 브라우저에는 구성 요소가 표시되지 않습니다.

Question

React를 처음 사용했습니다.

나는 npm install create-react-app을 사용하여 React를 설치했습니다. server.js 파일을 만들었으며 파일 구조는 여기에 있습니다.

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

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는 npm run start을 실행에

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'] 
    } 
} 

파일. 그것은 충분한 포트를 수신하고 오류없이 모든 것을 컴파일합니다. 그러나 브라우저에는 React의 구성 요소가 표시되지 않습니다. 그냥 실행하고 아무것도하지 않습니다. /하는 index.js 파일

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(); 

SRC는 어떻게 코드를 지울 수 있습니다. 나는 실수를 어디에서했는지 몰랐다. 도와주세요 !! 미리 감사드립니다. :-)

Answer 1

나는 당신이 create-react-app이 무엇을하는지, 어떻게 작동하는지 혼란 스럽다고 생각합니다. create-react-app docs :

Webpack 또는 Babel과 같은 도구를 설치하거나 구성 할 필요가 없습니다. 코드에 집중할 수 있도록 미리 구성되어 숨겨져 있습니다.

프로젝트를 만들면 잘 갈 수 있습니다.

후드에서는 webpack으로 프로젝트를 빌드합니다. webpack을 수정/추가하려면 npm run eject 명령을보아야합니다.

npm run eject를 실행하면 모든 구성 파일과 전이 의존성 (Webpack, Babel, ESLint 등)이 프로젝트로 복사되므로 프로젝트를 완벽하게 제어 할 수 있습니다. npm start 및 npm run build와 같은 명령은 여전히 ​​작동하지만 복사 된 스크립트를 가리켜 스크립트를 조정할 수 있습니다. 이 시점에서, 당신은 당신 자신의 것입니다.

고객님의 webpack.config.js 파일이 필요 없습니다. 또한 webpack 개발 서버 프록시에서 API 요청을 API 서버로 보내려는 경우 을 package.json 파일에 추가하면 webpack-dev-server이 서버로 요청을 리디렉션 할 수 있습니다.

는 콘솔에 sence