React的官方文档中，为了新的学习者能够更加容易接受React，在最初的介绍中，告诉我们可以通过在js中引入React库，并且在js中直接如下使用。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
但是我个人并不认同这样的入门方式，因为在实践中，我们几乎不会这样使用。
与Vue一样，React同样具有非常优秀的构建工具，但是由于推广方式的原因，知道Vue的同学，即使刚入门不久，都或多或少知道vue-cli，但是我想有很多知道React的新人，却并不知道create-react-app。
作为最易上手的react脚手架，create-react-app并不需要花费太多时间就能够掌握，大家只需要按照我接下来的步骤安装需要的环境即可。当然，想要配置一个功能更强大，更适合实践的脚手架，则还需要在此基础上做更多的扩展与配置。这个我们在开发中慢慢完善。
1. 安装node
从nodejs官方网站下载你的操作系统对应的node版本。和普通应用一样安装即可。
该页面会自动推荐更合适你电脑的node版本。点击左侧大按钮，将会下载最新的稳定版本。右侧的大按钮可能会有一些更新的，但还处于测试阶段的新特性。因此我们通常选择左侧的下载。
node安装的同时，npm也会一起被安装。npm是一个js包管理工具，我们可以利用该工具下载我们需要的js库。例如我们需要在项目中引入jQuery。那么可以直接这么干。
// 仅在当前项目安装
> npm install jquery
// 全局安装
> npm install jquery -g
安装完成之后，通过查看node版本的方式确保node已经正常安装。
由于网络原因，当我们想要通过npm下载项目依赖包时，可能会很慢甚至直接无法下载，因此在使用时我们通常会使用淘宝NPM镜像。
首先使用如下指令安装cnpm，用以替换默认的npm
> npm install -g cnpm --registry=https://registry.npm.taobao.org
然后就可以使用cnpm来安装想要的模块了。
> cnpm install jquery
当然，现在更多的人更偏向于使用另外一个新的包管理工具yarn。在后续的教程中，我们可能也会使用到yarn而不使用npm。大家可以访问yarn官方网站按照教程安装yarn。
通常能够使用npm安装的模块，都能够使用yarn来安装，他们的常用指令如下：
// 安装模块
> npm install lodash
> yarn add lodash
// 启动项目
> npm start
> yarn start
// 构建项目
> npm run build
> yarn build
入门时只需要记住几个简单的即可，在这里不建议深究更多的指令，在学习过程中慢慢掌握即可。
2. 安装一个好用的命令行工具
对于windows系统来说，我们可以直接使用系统自带的cmd。但是cmd比较难用。因此我个人比较推荐大家安装git，并通过git中的git.bash工具进行指令操作。
也是与安装其他应用一样，在电脑上安装好git，找到git的安装目录，我们会发现有一个bash工具。双击它即可使用。
对于mac系统来说，使用起来则相对简单，我们可以直接使用系统自带的terminal工具即可。当然，也可以安装更加好用的iTerm。
通常我们在安装好iTerm之后，会下载一个非常好用的集成补丁oh my zsh。它为我们使用指令提供了非常多的快捷操作与舒适的补全提示。
// 安装oh my zsh
> curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
对美观有自己要求的同学可以选择对应的主题。
3. 安装 create-react-app
如果刚才我们的包管理工具(npm/yarn)已经安装好，那么安装create-react-app就比较简单。
> yarn add create-react-app -g
接下来我们就可以使用create-react-app来创建项目啦。
4. 创建第一个react项目
找到一个你专门用来存放项目的目录，例如我的目录名字叫做develop。在命令行工具中进入到这个目录，然后使用如下指令创建项目。
// 进入目录
> cd develop
// 创建项目
> create-react-app first-react-app
创建完成之后，我们可以看到类似如下图所示的界面。
// 进入项目
> cd firstapp
// 启动项目
> yarn start
// 打包项目
> yarn build
// 暴露出项目的具体配置，以便于在此基础上扩展/修改更多的配置
> yarn eject
进入并启动项目，在浏览器中输入http://localhost:3000，我们可以看到如下界面。
在命令行工具中，注意关注这里的提示。我们可以直接在电脑中输入http://localhost:3000访问项目。同时，我们也可以输入http://192.168.0.101:3000访问项目。如果你的手机与电脑处于同一局域网，我们也可以通过该地址在手机上访问项目，这对于移动端开发的调试非常有用。
5. 认识项目
打开项目，我们可以看到如下目录。
- node_modules
node_modules文件夹是项目所有依赖包的存放地址，除了在项目初始化时安装的所必须的依赖包之外，我们后续通过yarn/npm安装的包都存放在该目录下。
- package.json 与 yarn.lock
项目的配置文件与依赖包的描述文件。目前我们暂时还不需要对他们有过多的了解。在未来如果你要学习webpack等构建工具时才会深入的了解他们。
- public
项目的入口文件。通常我们会将index.html存放在该目录里。
- src
模块与组件的存放目录。在create-react-app创建的项目中，每一个单独的文件都可以被看成一个模块，例如单独的image，单独的css，单独js等，而所有的组件都存放于src目录中，其中index.js则是js的入口文件。
通常我们创建一个web页面，则需要分别通过link与script标签引入对应的css与js文件。但是在create-react-app的开发环境中，构建工具帮助我们自动完成了这些操作，我们只需要按照当前开发环境的简单规则来组织自己的代码即可。当我们通过yarn build打包项目之后，我们会看到html页面则变成了我们熟知的样子。
