create-react-app使用笔记

[MikeMiller3]

create-react-app使用笔记

注：部分内容已忽略，需要请查看原文档

更新到最新版本

create-react-app包括两部分

1. react-scripts是生成项目的开发依赖
2. create-react-app是一个命令行工具用来创建项目，会根据react-scripts的最新版本创建，通常不需要更新

目录结构

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

• public/index.html 与 src/index.js不能修改目录和名称
• src中可以创建目录，只有src中的内容可以被webpack处理
• 只有public目录中的内容可以被public/indexl.html使用

可执行的脚本

• npm start：启动服务
• npm test：执行jest测试
• npm run build：打包构建到bulid目录
• npm run eject：如果你对构建工具和配置不满意，可以执行这个不可逆命令，它去掉react-scripts依赖，加入webpack、babel、jest、eslint配置和依赖。一般情况下你不必执行它。

支持的语言特性和polyfills

大量使用了实验性的语言特性，如下：

• es7指数运算符
• es8的Async和Await
• 对象展开运算符stage3
• es6动态导入stage3
• jsx和flow语法

polyfills：

• Object.assign() via object-assign.
• Promise via promise.
• fetch() via whatwg-fetch.

在编辑器中提示eslint错误

某些编辑器如Sublime Text, Atom, and Visual Studio Code提供了eslint插件，安装插件后你可以增加一个.eslintrc文件使得编辑器会提示eslint错误，当然控制台和浏览器也会提示你错误。create-react-app中eslint规则只限制了常见的一部分。

{
  "extends": "react-app"
}

在编辑器中debug

只适用于Visual Studio Code 和 WebStorm

代码自动格式化

使用Prettier，此处略，详见原文

改变title

默认title为React App，想要修改可以使用document.title或React Helmet或直接改打包后的index.html
还有其他办法，见原文

安装依赖

正常npm install即可

引入组件

支持commonjs或es6modules

代码分割

支持dynamic import

加入样式

css创建在src目录下并在组件中引入css即可
css是预处理的，会自动加上前缀兼容各浏览器，有css-loader和postcss-loader

加入图片、字体、文件

引入图片和字体类似于css
要减少对服务器的请求数量，导入小于10k?的图像将返回数据URI而不是路径。这适用于以下文件扩展名：bmp，gif，jpg，jpeg和png

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

在css中引入图片（如背景图片）也是如此。webpack寻找所有依赖的模块（使用相对路径）将它替换为打包编译后的绝对路径，名称是用 根据内容生成的hash值 生成的。
以上静态资源的处理在react中不是必须的，但是大家都乐于使用它。下面是另一种处理静态资源的方式

使用public目录

通常推荐上述import的方式引入静态资源，因为webpack大法好：

• js和css绑定在一起减少了http请求
• 缺少文件将报编译错误而不是用户看到的404
• 文件名将被hash处理所以你不必操心浏览器缓存的问题

但如果你想在模块外或这项目外引入，这有一个方法：
看到public文件了吗，放入该目录的资源不会被webpack处理，将会被原样复制到编译的文件夹bulid中，引用它可以使用PUBLIC_URL变量（其实这也是webpack配置的），例如：
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
在js中你也可以使用process.env.PUBLIC_URL取得相同效果：

render() {
  //这种方法应该被保守地使用，不推荐
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

它的缺点对应上述优点：

• 文件不会被预处理或压缩
• 找不到报404
• 浏览器有缓存

public推荐的使用场景：

• 打包后你需要一个特定文件的名称
• 你有成千上万张图片要动态引入
• 你有个js不想被打包
• 某些库不兼容webpack

引入全局变量

当你通过script标签引入jQuery时，linter会报错，因为它看不到定义，你可以在前面加window：
const $ = window.$;
（其实eslint global配置下也可以，不eject确实有些麻烦）

加入flow

flow是一个静态类型检查器

• learn flow then come back

定义和使用全局环境变量

功能来自依赖dotenv

定义

在项目根目录添加文件.env，在文件中定义
REACT_APP_SECRET_CODE=abcdef
优先级：
npm start: .env.development.local >.env.development, .env.local, .env
npm run build: .env.production.local > .env.production > .env.local > .env
npm test: .env.test.local > .env.test > .env (注意，没有 .env.local)

使用

js中：
使用process.env.NODE_ENV访问默认服务器环境
你也可以自定义环境变量但必须以REACT_APP_开头，访问方式也是process.env.NODE_ENV
环境变量在构建时嵌入，所以修改环境变量必须重新build或重启。
这些环境变量可用于提供部署位置或者不需要版本控制的敏感信息。

• 在index.html中引用：
  <title>%REACT_APP_WEBSITE_NAME%</title>

集成后端API

官方推荐使用fetch，可在package.json中添加代理
"proxy": "http://localhost:4000"
开启cookie：
第二个参数：{credentials: "include"}
当然axios也可以，你也可以手动配置代理，使用https、websocket等，详见文档

测试

create-react-app使用facebook/jest进行单元测试，它是一个基于node的runner
jest早期有些问题，现在经过重大改造已经ok
它在node中运行测试而非浏览器，便于快速迭代
如果你需要当然可以使用其他e2e测试

• Jest使用

github pages

支持github pages