1. 介绍

在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，然后在html编辑吧。@H_502_3@

大家都是用webpack + es6来结合react开发前端应用。@H_502_3@

这个时候，我们可以手动使用npm来安装各种插件，来从头到尾自己搭建环境。@H_502_3@

比如：@H_502_3@

虽然自己搭建的过程也是一个很好的学习过程，但是有时候难免遇到各种问题，特别是初学者，而且每次开发一个新应用，都要自己从头搭建，未免太繁琐。@H_502_3@

于是，有人根据自己的经验和最佳实践，开发了脚手架，避免开发过程中的重复造轮子和做无用功，从而节省开发时间。@H_502_3@

类似这样的脚手架，我扫了网络上比较多人用和关注的，一共发现了三个，它们分别是：@H_502_3@

1. react-boilerplate
2. react-redux-starter-kit
3. create-react-app

它们的关注量都非常大，截至写这篇文章为止，在github上的star量是这样的：@H_502_3@

@H_502_3@

@H_502_3@

@H_502_3@@H_502_3@

由此可见，使用这三个脚手架的人都相当多，最突出的是create-react-app。@H_502_3@

它是后来居上，他的开发时间都晚于前两个，但关注量却比他们还大，而且他还是facebook官方开发的。@H_502_3@

肯定是一个优秀的产品。@H_502_3@

下面来介绍一下它的特点。@H_502_3@

2. 特点

它有好多好多的优点，先从安装使用说起。@H_502_3@

2.1 简单的安装使用

create-react-app安装起来实在是太简单，只需要一条命令，不像别的脚手架，还需要去clone整个脚手架的源码，再在那基础上改。@H_502_3@

装完之后，生成一个新的项目，可以使用下面的命令：@H_502_3@

创建了my-app目录，这个时候，使用下面的命令就可以开始开发应用了。@H_502_3@

默认情况下，会在开发环境下启动一个服务器，监听在3000端口，它会主动给你打开浏览器的，可以立刻就看到这个app的效果。@H_502_3@

@H_502_3@@H_502_3@

是不是很简单？@H_502_3@

2.2 源码结构简单清晰

在项目my-app目录中，你会发现源码非常清晰，没有多余的文件。@H_502_3@

@H_502_3@@H_502_3@

真的很清爽，所有的源码你将放到src目录下，什么配置文件，各种乱七八糟都不用管，你只需要专注开发就好了，create-react-app都给你处理好了。@H_502_3@

整个源码简单，又小又清爽！管理起来也方便！@H_502_3@

如果你使用过webpack-dev-server或webpack搭建过开发环境，你就会发现，create-react-app的开发环境也有类似webpack-dev-server的--inline --hot自动刷新的功能。@H_502_3@

什么意思呢？@H_502_3@

就是一旦源码文件，一更新，再保存之后，浏览器会自动刷新，让你能实时查看效果。@H_502_3@

你总要探究一下是怎么回事，难道create-react-app也用上了webpack-dev-server?@H_502_3@

翻看了一下源码，没有找到webpack.config.js文件，如果有使用webpack就应该有这个文件，好奇怪。@H_502_3@

看了一下node_modules目录，也没找到webpack相关的东西。@H_502_3@

@H_502_3@@H_502_3@

先源头入手，我是用npm start命令来运行项目的。@H_502_3@

就从package.json文件入手，它的内容是这样的：@H_502_3@

@H_502_3@@H_502_3@

看到了这行：@H_502_3@

react-scripts又是什么？@H_502_3@

在node_modules目录中能找到它，它果然依赖了好多工具，其中就包括'webpack'。@H_502_3@

@H_502_3@@H_502_3@

里面果然也有webpack的配置文件，也有好多脚本文件。@H_502_3@

原来它是facebook开发的一个管理create-react-app服务的工具。@H_502_3@

原来也是它让整个源码变得很整洁的。@H_502_3@

因为它隐藏了没必要的文件，大多数人的配置都是差不多的。@H_502_3@

除此之外，它还加入了eslint的功能。让你在开发过程中，更关注于代码，很不错。@H_502_3@

@H_502_3@@H_502_3@

2.3线上编译命令@H_502_3@

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

只需一行命令：@H_502_3@

@H_502_3@@H_502_3@

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

编译好的文件都会放到build目录中。@H_502_3@

@H_502_3@@H_502_3@

2.4 api开发@H_502_3@

在开发react应用时，难免与服务器进行数据交互，就是要跟api打交道。@H_502_3@

这个时候，有一个问题。@H_502_3@

api存在的服务器可能是跟react应用完全分开的，而且，开发环境跟线上环境又不太一样。@H_502_3@

比如，开发环境中，你的react应用是跑在3000端口的，可是api服务可能跑在3001端口，这个时候，你跟api服务器交互的时候，可能会使用fetch或各种请求库，比如jquery的ajax。@H_502_3@

这个时候可能会遇到CORS问题，毕竟端口不同，而线上环境却没有这个问题，因为你都控制线上环境的react应用和api应用，跑在同一个端口上。@H_502_3@

按照以往思路，解决的方法可能是用环境变量，比如：@H_502_3@

• 上一篇：再谈Angular4 脏值检测(性能优化)下一篇：react配合antd组件实现的管理系统示