React +Express + Node JS

출처 : The node API for `babel` has been moved to `babel-core`

You need to specify 'babel-loader' instead of 'babel'

babel -> babel-loader로 react-hot -> react-hot-loader

You must have node js & npm  installed.

>sudo npm install -g babel

>sudo npm install -g babel-cli

>mkdir reactApp

>cd reactApp

>npm init

>npm install --save react react-dom

>npm install --save-dev webpack webpack-dev-server

>npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

>touch index.html

>touch App.jsx

>touch main.js

>touch webpack.config.js

Open webpack-config.js file and add the following code. 

JS Bin on jsbin.com

Open the package.json and add the start command instead.

"start": "webpack-dev-server --hot"

index.html : This is just regular HTML . We are setting div id = "app" as a root element for our app and adding index.js script, which is our bundled app file.

React App on jsbin.com

App.jsx : This is the first React component. We will explain React components in depth in a subsequent chapter. This component will render Hello World!!!.

JS Bin on jsbin.com

main.js : We need to import this component and render it to our root App element, so we can see it in the browser.

JS Bin on jsbin.com

The setup is complete and we can start the server by running the following command.

>npm start

http://localhost:8080/. After we open it, we will see the following output.

Errors

reactjs - Invalid Host header

At your webpack config, you could add disableHostCheck: true at devServer configuration. For example,

devServer: {

  disableHostCheck: true

}