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主页