【笔记】Create React APP 文档略读

Getting Started

——创建一个React App的多种方式

Quick Start

三条指令快速创建一个项目并运行

npx create-react-app my-app
cd my-app
npm start

！注意： 非全局安装create-react-app可以保证npx总是最新的版本。

Get Started Immediately

内置的环境工具如webpack和Babel，无需额外安装。

Createing an App

新建项目时可供选择的一些细节。

Methods

npx

npx create-react-app my-app

npm

npm init react-app my-app

yarn

yarn create react-app my-app

Selecting a template

可以指定create-react-app以什么模板创建新项目，模板可选择可自定义。

Selecting a package manager

npm或者yarn，取决于新建项目时使用的命令脚本。

Output

项目创建后生成初始的项目结构，安装一些基础的依赖。项目结构如下所示：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Scripts

项目建好后，可以运行一些内置的命令：

npm start 或 yarn start

在开发模式下运行项目。修改代码自动重载，能在命令行窗口看到报错和警告。

npm test 或 yarn test

以交互的方式运行测试监测器。

npm run build 或 yarn build

以生产模式构建项目。用哈希重命名文件名，保证构建最小化，在此之后，项目就可以准备部署。

Folder Structure

——文件结构及文件的介绍说明
文件结构如下：

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 是js入口

其他文件则可以随意删除或命名。

一般情况下:
①、在src目录下创建子目录，只有在src目录下的文件会被webpack处理，因此所有的js和css文件都置于src目录下；
②、只有在public目录下的文件才能被public/index.html 引用；
③、可以创建其他与src和public平级的目录，此类目录在生产环境构建时不会被囊括进去；

Available Scripts

——在项目中可以运行的脚本命令

npm start

npm test

npm run build

npm run eject

Supported Browsers and Features

——支持的浏览器和语言特性

Supported Browsers

默认项目能在所有现代浏览器上运行，IE9，10，11 则需要一些垫片的支持。

Supported Language Features

项目能支持最新的js特性，但应用实验性的协议时需谨小慎微，项目默认是不包含任何垫片的。如果项目应用了ES6中的运行时特性，请确保手动添加了所需的垫片或者确保运行浏览器能支持这种特性。

Configuring Supported Browsers

项目默认会在package.json文件中包含 browserslist 配置项，该配置项控制output的js代码能够兼容具体的浏览器。其中production 属性在构建项目时生效，development 属性在开发环境中生效。可以根据项目将部署在具体哪种浏览器中配置browserslist 。

Updating to New Releases

——如何更新已有的就项目到最新的React版本

Setting Up Your Editor

——做好开发工具相关的前置工作

Syntax highlighting

各个开发工具都有一些代码语法高亮工具。

Displaying Lint Output in the Editor

ESLint插件能够展示warnings 和 error在开发工具中，你还可以定制自己的ESLint config。

Extending or replacing the default ESLint config

一堆高级的配置建议以及看不懂不遵守的后果。

Debugging in the Editor

VSCode 和 WebStorm支持开发者能够在开发工具中进行debug而不用离开当前界面，保证了一个连续的开发工作体验。这两个平台各自需要一些配置，稍微涉略一下VSCode如何配置。

Formatting Code Automatically

Prettier可以规范js，css，和json的格式。
，应用Prettier可以让你的代码自动地符合团队开发要求的规范。
接下来介绍了如何配置这些formatter以及它们在代码开发中的什么阶段发挥作用。

Developing Components in Isolation

——不把组件添加到app.js也能查看组件效果的方法：Storybook for React 和 React Styleguidist
以下是这两个工具的配置和使用。

Analyzing the Bundle Size

Using HTTPs in Development

Adding a Stylesheet

——添加css的新方式
使用 webpack setup的项目同时使用 webpack 管理所有的文件，webpack 提供了一种客制化的方式使得你可以使用import 在js文件中导入css文件。这样做免不了在其他不是用webpack构建的环境中项目无法顺畅地运行，但是更多的开发者觉得这种做法比较方便。

Adding a CSS Modules Stylesheet

项目支持CSS Module 和常规样式表同时使用的方式。CSS Module 通过在样式名后追加hash值得方式达到同文件中同类名样式也不会冲突。