Setting development for React app

React Environment.md

• 新建webpack.json.js

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'bundle.js'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel-loader']
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader' 
      }
    ]
  }

};

entry: the start point of react app output: webpack needs to know where it should output and save transformed code, we can also use path to locate the location modules: we define which transformation to make on our code

we want our react app to transpile JSX to JavaScript and ES2015 to ES5. We specify babel-loader to make webpack know to checkout the .babelrc file

• Webpack Dev Server Runs npm install --save-dev webpack-dev-server to install the webpack dev server

--inline: it makes the dev server update the changes in real time --history-api-fallback: If you want to use browserHistory instead of hashHistory when dealing with the URLs, remember to add this option

• CSS loader We can bundle our stylesheets into a single bundled JavaScript file via CSS loader. Simply run npm install --save-dev style-loader css-loader

the style-loader is going to embed the CSS in the bundle.js and the css-loader parses the css and applies it to the DOM.

• react-hot-loader npm install --save-dev react-hot-loader

A plugging that makes webpack refresh the changes in real time without losing the component state

React Router

runs npm install --save react-router to install react-router