React基础——快速搭建开发环境

近年来各大前端框架流行，基本上已经变成了React，Vue和Angular“三足鼎立”的状况。其中React依赖于完整的生态环境，Facebook巨大影响力以及国内BAT等各大公司的纷纷推崇，不得不承认React已经成为最火的前端框架了（当然现在Vue作为后起之秀也是很厉害的，这里大家就不要纠结了，仅仅代表个人观点）。

开发React你的几种选择：

1. 使用一些在线编辑的网站，在线快速学习，如CodePen，jsfiddle等

优点：快速便捷不需要过多配置

缺点：这种方式也就是让你尝个鲜，写一写demo用的code snippet

2. 使用webpack从零开始编写webpack配置文件，根据项目需要配置各种loader，plugin以及对于生产环境的一些优化

优点：好吧其实除了学习webpack到底做了什么，好像都是缺点。。。

缺点：配置复杂（Webpack的配置开一节课来讲应该都没有问题），官网文档写的不接地气

3. 使用React官方提供的的脚手架Create-React-App(后面简称CRA)

优点：傻瓜式，典型的out-of-the-box，你不用太关心到底做了什么（不过有些定制化还是要自己搞得，后面的文章再说）

缺点：满足不了你的好奇心，eject之后来查看好像代码有点多

综上所述，如果你是React新手，那么直接推荐你用第三种方式，这也是这篇文章接下来要讲的。

如何使用Create-React-App

首先我们需要保证电脑上面拥有NodeJS环境，安装过npm包管理，如果不清楚怎么弄，Google或者Baidu一下有很多教程这里就不多说了

1. 全局安装create-react-app 命令行工具

npm install -g create-react-app
复制代码

2. 创建项目

create-react-app my-app
复制代码

耐心等待之后(国内可能网速不好，可以FQ或者使用淘宝镜像源，推荐使用nrm命令快速切换各种镜像源)，就会看到我们新创建的目录，展开目录大概结构如下：

├── README.md---------------------------介绍文档
├── node_modules------------------------第三方安装包
├── package.json------------------------npm项目配置
├── .gitignore--------------------------git配置
├── public------------------------------公共资源
│   └── favicon.ico
│   └── index.html----------------------首页html
│   └── manifest.json
└── src---------------------------------源码目录
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js------------------------入口js文件
    └── logo.svg
    └── registerServiceWorker.js
复制代码

3. 启动项目

cd my-app
npm start 或者 yarn start (个人比较推荐后者比较快)
复制代码

Here we go! 打开浏览器，输入 http://localhost:3000就能看到我们的第一个React应用了，这里CRA帮我们在后台启动了一个测试服务器来实现页面的预览以及热更新，修改对应的文件就会更新到浏览器上。对于开发真正的项目这还远远不够，后面文章会讲如何加入Hot-Module-Replacement更加高效的来完成开发工作。

CRA帮我们做了什么呢？

就像官方定义的那样Create React apps with no build configuration.。create-react-app帮我们省去了很多环境的配置，提供了一个开箱即用的工具，假设我们自己要配置React开发环境大概需要做以下几步：

1. 安装webpack(用于打包应用)，webpack-dev-server(一个开发服务器来预览应用)
2. 创建webpack配置文件,一般分为开发配置和生产配置两个文件
3. webpack配置文件指定了应用的入口文件，各种文件的处理loader(babel, css-loader，style-loader，less-loader，sass-loader, url-loader, file-loader等等)和各种插件（htmlwebpackplugin， uglifyjsplugin等等）的配置，这些配置根据个人用到的东西因人而异。
4. 等等（只能用等等呢个来描述了，有很多种需求）...

更多学习链接： Create-React-App Github主页