Create-react-app Building the React Application (i) (react-scripts)

Stepped on a pit and a hole, used to be their own manually created react development environment, to install Webpack, Babel, React, react-dom components, but also need to modify, add a variety of configuration files.
When the new worry about the environment, suddenly found react-scripts. To build a project try:
First step: Global installation under Create-react-app.

NPM install-g Create-react-app

Step Two: Create a project from Create-react-app

Create-react-app Demo-app

The third step: use Webstorm to open the project, in order to debug the related functions of router4, so add a dependency on react-router-dom.

CNPM Install--save-dev React-router-dom

Part fourth: implementation

This time the browser will naturally open the default index.html. Naturally you can see the corresponding interface effect

View the project file structure as follows:

The miraculous discovery, unexpectedly did not have the Webpack.config.js file. Open the Package.json file to see the script for start:

"Start": "React-scripts start",

Point open Package.json, found that the dependence is very little.

{
  "name": "Demo-app",
  "version": "0.1.0",
  "private": True,
  "dependencies": {
    "react": "^15.6.1" ,
    "React-dom": "^15.6.1",
    "React-router-dom": "^4.1.1",
    "react-scripts": "1.0.10"
  },
  "scripts ": {
    " start ":" React-scripts start ",
    " Build ":" React-scripts Build ",
    " test ":" React-scripts test--env= Jsdom ",
    " eject ":" React-scripts Eject "
  }
}

A face, do not use react-scripts have to rely on Babel, Webpack, Css-loader and so on, and went to find a circle react-scripts the role and principle, only to understand all this and long insight, The following section describes the principle of react-scripts implementation.