create-react-app manual

install 

npm install -g create-react-app

生成一个新的项目

create-react-app my-app

cd my-app/

npm start

默认情况下，会在开发环境下启动一个服务器，监听在3000端口

所有的源码你将放到src目录下

create-react-app的开发环境也有类似webpack-dev-server的--inline --hot自动刷新的功能。

线上编译命令

这个是create-react-app的一个大亮点，它能让你的应用骗译出在线上生产环境运行的代码，编译出来的文件很小，且文件名还带hash值，方便我们做cache，而且它还提供一个服务器，让我们在本地也能看到线上生产环境类似的效果，真的超级方便。只需一行命令：

npm run build

运行下面两条命令，可以查看线上生产环境的运行效果。

npm install -g pushstate-server

pushstate-server build

api开发

在开发react应用时，难免与服务器进行数据交互，就是要跟api打交道。这个时候，有一个问题。api存在的服务器可能是跟react应用完全分开的，而且，开发环境跟线上环境又不太一样。比如，开发环境中，你的react应用是跑在3000端口的，可是api服务可能跑在3001端口，这个时候，你跟api服务器交互的时候，可能会使用fetch或各种请求库，比如jquery的ajax。

这个时候可能会遇到CORS问题，毕竟端口不同，而线上环境却没有这个问题，因为你都控制线上环境的react应用和api应用，跑在同一个端口上。按照以往思路，解决的方法可能是用环境变量，比如：

const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'

但是这样搞起来，还是有些复杂，然而，create-react-app提供了一个超级简单的方法，只需要在package.json文件中，加一个配置项就可以了。比如：

"proxy": "http://localhost:3001/",

至于你用的是http的何种请求库，都是一样的，不用改任何代码。这个选项，只对开发环境有效，线上环境还是保持react应用和api应用同一个端口。