create-react-app的使用原理解析

react官方文档 http://www.css88.com/react/

• create-react-app 是一个全局的命令行工具用来创建一个新的项目
• react-scripts 是一个生成的项目所需要的开发依赖

    一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写
webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。

    现在如果你正在搭建react运行环境,使用create-react-app去自动构建你的app程序。你的项目所在的文件夹
下是没有配置文件。react-scripts 是唯一的 额外的 构建依赖在你的package.json中，你的运行环境将有每一个
你需要用来构建一个现代React app应用程序。你需要的依赖，和在配置文件中编写的配置代码，react-scripts
 都帮你写了，比如：react-scripts帮你自动下载需要的 webpack-dev-server 依赖，然后react-scripts
自己写了一个nodejs服务端的脚本代码 start.js来 实例化 WebpackDevServer ，并且运行启动了一个使用
express 的Http服务器，现在你只需要专心写src源代码就可以了。省去了很多精力，最适合快速上手一个demo
了。

react-scripts有以下支持，都帮你配置好了：

React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Import CSS and image files directly from JavaScript.
Autoprefixed CSS, so you don’t need -webkit or other prefixes.
A build script to bundle JS, CSS, and images for production, with sourcemaps.
A dev server that lints for common errors.

安装

npm install -g create-react-app  

创建一个应用程序

create-react-app my-app 
cd my-app
npm start(没有配置文件webpack.config.js)
npm run start（有webpack.config.js配置文件)

  文件夹下的public/index.html 和src/index.js的源码，我们可以在这里编写项目代码，但是注意 public/
index.html 是启动http服务器的首页，src/index.js是编译的入口文件，只能叫index这个名字，改别的名字
不行。

    在你的项目my-app你是看不到这个文件路径的，你也没有写配置文件webpack.config.js,http服务器配置
,自动代开浏览器窗口，react，es6语法编译，babel-core，webpack，等等这些 你都没下载，配置。这些活，
react-scripts 都帮你做了。

npm run start

我们 一开始这么启动服务 运行项目
打开你的my-app\package.json
"scripts": { 
    "start": "react-scripts start", 
      ... 
} 
所以执行的是 react-scripts start