快速构建React应用开发环境
前戏
如今前端技术更新实在是太快了，坚持不断学习的精神更是难能可贵。毕业之后步入码农行列，记得某次观看别人博客时无意中看到其签名：“工作，但别忘了学习！”让我感到有点点不好意思，我在问我自己，我是多久没有学习了呀！整天工作，工作，何时是个头，好像没有什么进步了。于是，我在心里默默技术这句话，并把它当作我的座右铭，激励我不断的学习，不断的进步，不要因为工作的繁忙而忘记学习。
说这个，主要是想与同道中人一起共勉，相互学习，共同进步。好了，废话少说，直奔主题吧！
相信看到这篇文章的你已经对React有了一定的了解，并且有点迫不及待了。对于一个小白来说，要想顺利用React搭建一个项目并非易事，以为涉及的东西太多了，如Webpack，Gulp等这些工具的配置也挺烦的。本文带你使用官方的构建工具Create-react-app快速React应用的开发环境，不用你去安装配置像Webpack或者Babel这些工具，你只需要关注你的代码编写就可以了。当然了，工具给你带来便利和降低难度的同时，你也受到了一定的限制。这个暂时不管，等你混熟了React生态系统，再自己定制吧！
安装Create React App
首先，必须得安装好nodejs，Create React App只是一个可以在macOS、Windows和Linux上运行的无配置文件的构建项目工具。运行以下命令全局安装它。
npm install -g create-react-app
创建项目
安装好Create React App后就可以用它来创建React应用啦！运行一下命令创建项目并安装一些开发依赖包，下载一些模板文件。
create-react-app learn-react && cd learn-react
启动React应用
运行上面命令项目创建好了之后，可以进入创建好的项目根目录中执行以下命令启动刚创建的React应用。
npm start
至此，你可以开始你的React代码编写啦，每次保存，都会自动执行脚本重载应用，实时看到你的成果哟！当然了，也可能会是一大堆错误，耐心点细心点编写并排查吧，这是一个痛并快乐的过程，请慢慢享用。
运行测试脚本
良好的代码应该是经受得起测试的，为保证应用的稳定性，建议大家不要忽视测试重要性，坚持做到每个模块每个函数都应该有相应的测试用例，尽量做到百分百的测试覆盖率。运行以下命令，执行测试。
npm test
打包应用
项目编写好之后，需要打包发布，这样才能够体现的你工作成果，让Boss更青睐你。
好吧，我们来打包。
npm run build
打包好后的应用文件是被压缩过的并且引用的文件名也会加上哈希值。
高阶话题
升级版本
Create React App 分一下两个包：
- create-react-app 用于创建项目的全局命令行工具
- create-scripts 生成项目的开发依赖脚本工具
一般不用更新create-reate-app, 当你运行create-reat-app创建项目时总会自动以最新的create-scripts脚本创建项目以便你快速获取create-reat-app的所有新功能和改进。
更新已有项目的react-scripts可以更改项目中package.json并执行npm install即可。具体的更新可以参看changlog
官方承诺保持最小的变化，可以放心地无痛升级。
文件结构
使用Create React App创建的目录包含有如下文件
Create React App 生成的项目文件
对于项目的构建，一下两个文件是必须的存在的：
- public/index.html 页面模板
- src/index.js 应用入口文件
其他文件可以删除或重命名。你可以在src目录下创建任何子目录，任何需要Webpack处理的文件都应该放在src目录下，比如js、css等。
在public目录下可以放一下额公有的打包需要放入的静态资源，如字体文件，icon等。
当然你可以创建其他顶级目录和文件，不过不会被打包进去。
自定义工具
如果你对Create React App构建工具或其配置项不满意，你可以随时eject移除项目的单个构建依赖关系。它会将所有这个依赖的配置文件和依赖项直接复制到你的项目中，以便你可以完全控制并调整。
npm run eject
一般不用这项功能，除非你想自定义配置或研究项目配置。
注意：这是一个不可逆的操作哦！
支持的语言特性和Polyfills
项目支持的是最新JavaScript标准的超集。它添加了ES6的语法特性，同时还增加如下支持：
- 指数运算符(ES2016)
- async/await操作(ES2017)
- Object Rest/Spread Properties
- Class Fields and Static Properties
-
JSX和Flow语法
项目只默认加了如下少量的ES6 Ployfills - Object.assign() via object-assign.
- Promise via promise.
-
fetch() via whatwg-fetch.
你也更据需要添加其他的ES6+特性的并获得目标版本浏览器支持的polyfills。
编辑器中的语法高亮(Webstorm)
-
在WebStorm中的Preferences (Languages & Frameworks | JavaScript)设置JavsScript版本为 ECMAScript 6 。
设置JavaScript版本为ECMAScript 6
- 设置Babel文件监测
首先得执行以下命令安装Babel CLI
npm install --save-dev babel-cli
然后配置Babel CLI的监测脚本node_modules/.bin/babel。
配置Babel CLI File Watcher
另外还需要配置Babel-preset-react,执行一下命令先安装它
npm install babel-preset-env --save-dev
然后再项目根目录中添加.babelrc配置文件
{
"presets": [
["env", {
"targets": {
"chrome": 52,
"node": "current",
"browsers": ["last 2 versions", "safari >= 7"]
},
"include": ["transform-es2015-arrow-functions", "es6.map"],
"exclude": ["transform-regenerator", "es6.set"],
"modules": false,
"useBuildIns": true,
"loose": true,
"uglify": false,
"debug": true
}]
]
}
具体参数配置参照Env preset根据项目需要配置。
也可以在File Watcher可视化配置
Babel配置
3 . 设置任务执行器
跟Babel配置类似需要安装Grunt或Gulp,并添加相应的配置文件，具体配置参阅Grunt或Gulp。具体配置稍后我会做专题介绍。
更改页标题
你可以在public文件夹中找到源HTML文件直接修改，若要动态更改页标题可以使用document.title API，如果你还需要再React组件中针对复杂情景更改页标题，可以使用第三方库React Helmet。
安装依赖
生成项目中已经包含了React和ReactDOM依赖，若还需要其他依赖可以执行以下命令安装
npm install --save <libray-name>
引入和导出模块
生成的项目通过Babel实现了对ES模块的支持。你依然可以使用require()和module.exports引入和导出模块，但最好使用import和export代替，值得注意的是一个模块最多只能有一个export default。更多关于ES6模块的知识可以查看：
Post-Processing CSS
生成项目的样式最小化和浏览器前缀添加的工作已经通过内置Autoprefixer自动帮你完成，你可以不必为此操心了。
添加样式预处理器(Sass,Less等)
首先安装Sass命令行工具
npm install node-sass --save-dev
再在package.json中的scripts添加如执行命令语句
"scripts": {
+ "build-css": "node-sass src/ -o src/",
+ "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
为了能够并行地执行命令，可以安装
npm install --save-dev npm-run-all
并对start和build执行语句做如下修改
"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
添加图片、字体文件等文件
静态资源的引入跟css文件的引入类似。为了减少对服务器的请求数量，小文件引入返回资源数据的URL而不是路径。
1 . 以js的方式引入
import React from 'react';
import logo from './logo.png';
console.log(logo);
function Header() {
return <img src={logo} alt="Logo" />;
}
export default Header;
2 . 以CSS方式引入
.Logo {
background-image: url(./logo.png);
}
