create-react-app 使用详解

1. 快速开始

   npm install -g create-react-app create-react-app my-app cd my-app/ npm start 经过http://localhost:3000/查看你的app 使用 npm run build 编译打包程序 npm test 文件修改后测试，这部份内容后面讲

2. 更新到最新版本

   建立react app的主要分为两个包，一个包是create-react-app命令行，一个包是react-scripts，这个是用来生成具体项目的第三方依赖，若是要更新的话，基本上不须要更新create-react-app包，它就是使用最新版本的react-scripts包建立项目的，因此你建立的项目可以获取最新的特性和改进而不须要更新create-react-app包，而只用更新react-scripts包，而要更新这个包，能够打开https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md找到你当前的react-scripts版本，而后经过给定的命令一步步更新，这样可能会很麻烦，可是你也能够直接修改package.json中的版本号，而后直接npm install安装，可是这样可能致使潜在的破坏变化，咱们尽可能保证这个破话最小化

3. 文件结构

   注意以下几点：
   1.项目目录下面的public和src目录下的index文件必须存在不能更名，其余的文件能够删除和更名，你可能在src目录下面建立子目录，react为了达到最快速的代码重建，只有在src根目录下的文件会被webpack编译，因此必须把文件放在src根目录下面，不然webpack不会识别 2.只用public目录下的文件才会被public/index.html引用，请阅读下面的说明，从而使用js和html静态资源 3.你可以建立更多的和public同级的顶级目录，他们不会包含在项目构建中，你可使用他们做为项目文档

4. 可用的脚本命令

   1.npm start 在http://localhost:3000下监视文件，文件修改将自动更新，你能够在控制台中看到检测错误 2.npm test 在交互监视模式下启动测试运行程序。后面细讲 3.npm run build 在生产环境中编译代码，并放在build目录中 可以正确的打包代码，而且优化，压缩，使用hash重命名文件 4.npm run eject 注意：这是一个单向操做，一旦你使用eject，那么就不能恢复了 使用说明：若是你对create-react-app这个构建工具和配置项不满意，你能够在任什么时候候eject，从而导出可配置的模板，这个命令能够移除到项目的单一构建依赖，取而代之的是将配置文件和项目依赖到导入到你的项目中，你能够随意支配他们，以后除了eject命令之外其他的命令都是可用的，这些命令也是可配置的，因此这时候你就能够操做他们了，不得不说这个逼装的能够，不就是变成vue-cli相似了吗，关于react的配置文件，容我往后再总结出来 你不是非要使用这个功能，原来的模板指定的功能在中小项目中有很好的表现，你没有必须使用npm run eject的义务，可是做为牛逼的咱们意识到若是这个构建工具不能自定义那么鸟用都没有

5. 支持最新的js语法和垫层

   这个项目除了支持es6的特性外还支持其余的语法如es7,es8,jsx等 注意：这个react项目只支持Object.assign()（使用object-assign插件） Promise（使用promise插件） fetch（使用whatwg-fetch插件） 的垫层，若是要使用其余的es6特性须要手动添加合适的垫层，本身到npm中找吧，说实话这点和vue-cli比起来就逊色了

6. 编辑器中的语法高亮

   若是你使用vsCode自动支持es6语法高亮

7. 在编辑器中展现检测输出

   就是在编辑器中使用eslint，下载编辑器的ESlint插件，而后在项目中添加.eslintrc文件，这个东西用起来很不爽有种约束感，不推荐使用，感受react的这套脚手架作的通常

8. 在vsCode中调试代码

   这个功能可谓是vsCode的神做，对于调试前端框架中的代码很是给力，强烈推荐使用
   点击你的vsCode上面的调试按钮中的添加配置，把里面的配置项删除，而后添加以下代码
   { "version": "0.2.0", "configurations": [{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/src", "userDataDir": "${workspaceRoot}/.vscode/chrome", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }] } 重启你的编辑器，而后按F5就能够在编辑器中调试了 

9. 自动格式化代码（略）
10. 根据页面的内容动态的更改html页面的title
    • 能够直接使用document.title便可，官网还介绍了其余几种作法，能够自行查阅

11. 安装第三方依赖

    例如react-router npm install --save react-router

12. 导入组件

    使用import导入和export导出，推荐在组件中使用export default导出组件，只能出现一次该语法

13. 代码分割

    此即按需加载，要实现这个功能就是使用import函数，注意这和导入组件的import是有差异的，下面直接上demo 假设模块A中写以下代码 const moduleA = 'hello'; export { moduleA }; 在app.js中按需导入模块A import('./moduleA').then( ({moduleA}) => { // 在这里面可使用模块A } ).catch( err => { // ... } )

    模块A的代码就单独放到一个代码块中，实现按需加载

14. 导入css文件

    也是借助webpack的导入css文件的功能，在js文件中导入css文件代表依赖关系
    可是请注意，react在这里装了一个逼，咱们不须要这个功能，尽管咱们支持这个，可是做为react开发工程师，我强烈建议你看完下面的内容
    如下是webpack导入css的缺点：
    1.若是你使用webpack在js中导入代码了，那么你的项目很难移植到其余构建工具和开发环境中 2.在开发环境中，若是你修改了你的组件，那么会致使你的css文件不必的重载 3.在生产环境中，全部的css文件都会被打包到一个单独的压缩后的css文件中，这样看来有几把用？ 因此react建议你把css文件都放到src目录下的index.js文件中，这样一来若是要更换构建工具直接把index.js中的import拿掉就能够了

15. css文件后处理

    这部份内容是来对css文件压缩和自动添加css兼容性前缀的，其实使用的就是webpack的postcss-loader，这个loader，react的脚手架已经配置好了，vue-cli也用了这个

16. css文件的预处理

    react配置的sass预处理器，若是你必需要用sass，关于这部分配置能够去查看官网，我我的以为没有必要使用sass，使用框架开发，有不少配套的ui框架，而你只须要简单的调整一下布局就能够了，在这一节你要知道，react脚手架并无对sass作配置，须要你手动配置

17. 添加图片，字体和文件

    添加这类的静态资源和添加css文件相似
    你使用import导入一个图片或者一个文件好比PDF，返回的是会是一个路径，这和css的import是不一样的，返回的这个路径值能够当作src或者href的属性值，为了减小http请求，react脚手架对不超过10000字节的图片作了data URI处理，SVG格式的图片不支持这项设置，下面是demo import logo from './logo.png'; logo就是绝对路径，因此当你的项目中须要使用图片等相似静态资源的时候，必须这样显示的import否则打包编译后的路径就不是你想要的。 注意点：在css文件中导入图片等静态资源，使用相对路径，webpack在编译的时候会自动的替换成绝对路径。 你要知道react在这里又装了一个逼，用他本身的方式处理静态资源，请看下一节

18. 使用public目录

    1.修改html 这个html是能够修改的，编译完成的js文件是自动插入到这个文件中的，其实就是用的webpack的html插件，切。。。 2.添加其余的静态资源 你能够把不须要webpack编译的文件放在public文件夹里面，这里面的文件都不会被编译，可是react又说，最好不要这样放静态资源，怎么样怎么样很差，可是若是你执意要本身导入文件，不须要webpack编译，能够看下面的介绍 放在public目录下面的文件只是简单的复制到build目录中，那么想要正确的引入这个文件须要使用PUBLIC_URL这个变量，以下代码 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 也就是说你写路径的时候 "%PUBLIC_URL%" + "/img/logo.png" 这种格式就ok了 注意点：这个变量只能在上述的状况下使用，若是你想导入src目录或者node_modules目录中的文件，你要把他复制过来，在编译的时候上面的变量会替换成绝对路径，若是你在js中导入能够如 return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />  反正注意一点这样作是很是不合理的，这里只是应急方案 3.何时应该使用public文件夹？  如下几种状况：  1.你须要一些文件有特殊的文件名  2.当你有不少图片，而且这些图片的路径是动态添加的，懂不？？就好比你在页面上展现一个图片，这个图片要一直变，使用webpack编译后的文件不能作到这点，思考一下  3.若是你使用其余的很小的js库，而且这个库已经压缩和优化了，你能够直接用  4.还有一些js库和webpack是有冲突的，你必需经过script标签的形式导入  注意：若是你经过script导入的js是有全局变量的，你还要参考下一节的介绍

19. 使用全局变量

    若是你在你的src目录中的js文件中使用上面所述的js文件中的全局变量，那么会报错，由于eslint并不知道这个变量是什么，为了不这个错误的发生能够经过window来访问，即const $ = window.$;这样相似的结构就能够访问到全局变量，若是你不想经过window访问能够在使用变量的那一行代码的后面添加 // eslint-disable-line 此注释便可

20. 添加bootstrap

    随着前端框架的盛行，原始的bootstrap已经快死了，react抄袭bootstrap作了一个react-bootstrap，用来充当本身的ui组件库，真的太low了，好好跟人家vue学学啊 https://react-bootstrap.github.io/，这时react-bootstrap的官网 安装 npm install --save react-bootstrap bootstrap@3 css还要单独的引入，在src/index.js中导入 import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap-theme.css'; 在src/App.js中导入你本身要的组件 import { Navbar,Jumbotron,Button } from 'react-bootstrap' 注意点：这里react官网上，叫咱们本身发布基于bootstrap的样式包，而后本身安装，本身体会吧，不得不吐槽

21. 添加Flow

    Flow是一个静态数据类型检测工具，像java,c++这样的语言都是静态类型的，js和python都是动态类型的，也就是说js的数据类型能够随便修改，可是这个随便修改可能出现不少错误，打个很简单的比方，这个问题也是我日常遇到的，就是给一个值赋值数字，而后通过后台传递的数据修改为了字符串版的数字，就致使程序运行失败，可是谷歌也不报错，这尼玛就尴尬了，我找这个问题找了很长时间，因此若是此时js可以有静态版的数据类型这样的错误就能够避免了，TypeScript就是干这个的，可是react和Flow搭配的比较好，因此想成为一名彻彻底底的超级前端工程师仍是看看flow吧，https://flowtype.org/，下面是将flow引到react中来 npm install --save flow-bin 在package.json文件中添加命令 "flow": "flow" 运行 npm run flow init 会生成 .flowconfig配置文件，不用动他 而后在你须要检测的文件的顶部添加 // @flow 注释，看没看到，在咱们用注释注释代码的时候人家已经用注释编程了，当你把代码写好后运行npm run flow，就能够检测是否有数据类型错误了

22. 添加环境变量

    1.在项目中可使用声明在环境中的变量，就好像这个变量是定义在项目的js文件中同样，默认状况下，可使用的环境变量有NODE_ENV(这个环境变量已经定义好了)，和其余以REACT_APP_开头的环境变量 2.这些环境变量在构建的过程当中会自动替换成想要的值，若是在运行的过程当中，在静态文件中修改或者使用环境变量，项目不会作出响应，因此你能够从新编译项目 3.普通的环境变量的建立必需要添加REACT_APP_开头，而且其余的环境变量除了NODE_ENV之外，都会被忽略，这是为了不和系统本机的公钥冲突，若是修改了环境变量，必须重启你的项目 4.这些环境变量会被定义在process.env上面，好比你有一个环境变量叫作REACT_APP_SECRET_CODE当你在js中使用必须经过process.env.REACT_APP_SECRET_CODE才能访问到 5.有一种内置的环境变量叫作NODE_ENV，你能够经过process.env.NODE_ENV访问到这个变量，react不容许本身设置这个变量的值，默认已经设置好了，有development,test,production这几种状况 6.这些环境变量能够很方便的获得运行环境的相关信息和项目自己以外的敏感数据信息 7.使用环境变量以前须要本身定义变量，定义变量的方式有两种，第一种是在你的命令行工具中定义，第二种是新建一个.env文件，在public中的index.html中也可使用环境变量%REACT_APP_WEBSITE_NAME%必须以REACT_APP开头，全部的环境变量都是编译的时候插入 第一种方式：经过命令行的方式临时的添加环境变量，只介绍windows set REACT_APP_SECRET_CODE=abcdef&&npm start 第二种方式：将环境变量定义在.env文件中 在项目根目录中建立.env文件，在里面定义变量 REACT_APP_SECRET_CODE=abcdef，还有其余类型的文件，自行了解

23. 能不能使用Decorators

    这个语法是将一个函数定义的功能，干到另一个函数里面，目前不稳定，react不支持这个

24. 整合后端API

    主要用来解决后端api接口和前台跨域的问题，通常状况下，咱们的后台服务器和开发前台代码的服务器是不同的，由于没有几个公司使用node开发服务器，域名端口不同因此存在跨域问题，解决这个问题能够直接在package.json文件中添加 "proxy": "http://..." 这样你在你的localhost下面访问后台api如/api/todos直接代理到上面指定的域名中，因此跨域问题就解决了，要注意这种方式只能在开发环境中使用 特殊：若是你开发代码的环境不是在locallhost下面，那么上述方法也会是没用的，关于解决办法自行查看官网

25. 自定义设置proxy

    几种代理路径的方式
    { // ... "proxy": { // 以/api的请求都匹配 "/api": { "target": "<url_1>" }, // 匹配/bar/abc.html "/bar/*.html": { "target": "<url_3>" }, // 匹配 /baz/abc.html and /baz/sub/def.html "/baz/**/*.html": { "target": "<url_4>" } } // ... } 设置的配置项的具体细节，请查看https://github.com/chimurai/http-proxy-middleware#options

26. 在开发环境中使用HTTPS

    可能你后台使用https的，因此你能够在cmd运行的时候输入set HTTPS=true&&npm start便可

27. 运行测试功能

    react脚手架使用jest做为测试工具，jest工具用来作单元测试的，端到端的测试react不支持
    jest找本身的测试文件，放在src目录下，有以下三条规则
        1.__tests__目录下的.js文件 2.后缀.test.js文件 3.后缀.spec.js文件 建议最好将测试文件和源文件放一块儿，减小搜索路径 命令行接口 当你运行npm run test，jest会开启watch模式，一旦以保存文件，就会从新更新