Create React App 快速脚手架

开发React应用时，很少有人直接引入react的源JS文件，然后再开发。大家都是用webpack + es6来结合react开发前端应用。而webpack的使用又比较繁琐，为此官方提供了用于快速构建开发环境的脚手架工具Create React App。该脚手架将Webpack、Babel工具的配置进行了封装。使用它创建的项目，开发者不需要对其进行任何的配置工作，从而使你可以专注于开发！

1、安装
eate-react-app安装起来简单的要命，只需要一条命令！打开你的命令控件台，输入以下命令：

cnpm install -g create-react-app
1通过-g可以将create-react-app安装到全局环境中，这样你就可以为所欲为的在任意路径下玩耍它了。

查看安装的版本号：
1、create-react-app -V
2、创建你的应用
输入以下命令：
create-react-app my-app

这个时候会在你当前的路径下创建一个名字为 my-app的文件夹， my-app也就是你新创建的React应用。

注意：你的应用名字不要使用大写，这样做只要是为了严谨性，因为在Linux下是严格区分大小写的。

运行你的应用

创建应用完毕后，接下来就可以运行它了，输入以下命令：

1、cd my-app
2、npm start
运行后，它会主动打开你的浏览器，端口号默认为3000。如图：

打开my-app目录，你会发现结构非常简单清晰。

node_modules：存放的是安装所需要的所有依赖模块。
public：index.html为你项目的入口 页面。
src：你项目的源代码，其中index.js是你的代码入口。
package.json：项目中的基本信息都在这里了，例如你的项目名称、版本号、执行的命令、依赖的模块项之类的。

所有的源码都放到src目录下了，其它杂七乱八的东西你都不用搭理它，你只管在该文件下静静开发即可。因为其它的create-react-app都给你处理好了。
接下来我们可以打开index.js，你会发现它使用入了App.js。再打开App.js，修改render方法。将“Welcome to React”修改为“欢迎来到React的世界做客！”。代码如下：

render() {
return (

欢迎来到React的世界做客！

To get started, edit src/App.js and save to reload.

);
}

当你保存文件后，你会发现你的浏览器也会实时进行更新，这是因为Create React App具有热更新的功能。如图：

编译你的应用
只需要一条命令即可将你的应用编译为开发环境中的代码！

cnpm run build

编译好的文件都会放到build目录中。另外它还提供一个服务器，让我们在本地也能看到线上生产环境类似的效果，是不是很方便，是不是有种马上就想尝试下的冲动？
若想编译你的生产环境首先安装pushstate-server用于将已经编译好的项目进行部署：

cnpm install -g pushstate-server

然后就可以在本地查看你的效果啦

pushstate-server build

然后浏览器访问http://127.0.0.1:9000/，就可以看到编译后的测试项目啦！