React Environment Set Up for "How I fell in love with React" -- Chapter 3

Set Up React v2.md

React Environment Set Up 2.0

Wrote for How I fell in love with React -- Chapter 3, we will improve it on next chapters

Pre-Steps (if you haven't done it yet)

npm install babel webpack webpack-dev-server -g 

Steps

0) Create project directory

1) npm init

2) npm install react react-dom --save

3) npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

4) npm install style-loader css-loader --save-dev

5) Create files index.html | App.js | main.js | webpack.config.js

6) webpack.config.js

module.exports = {
  entry: ‘./main.js’,
  output: {
    path: './',
    filename: 'index.js'
  },
  devServer: {
    inline: true,
    port: 8000
    host: 'IP FROM IPCONFIG'
  },
  module: {
    loaders: [
      // JS definitions
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      },
      // Style definitions
      {
      	test: /\.css$/,
        loader: "style-loader!css-loader" 
      } 
    ]
  }
}

7) Basic HTML structure + div id="app" + script src="bundlefile.js"

8) App.js - Import React, Component and export

9) main.js - Import all, require('./PATH/style.css') and ReactDOM.render to id="app"

10) packgaje.json

“start”: “start http://YOUR-IP:YOUR-PORT/ & webpack-dev-server”

11) npm start