深入理解 react-create-app

如何创建一个 React 应用，答：脚手架。

1. 如何创建 React 应用

想要使用 React 的方法有两种：

• 1. 在你已有的项目中引入 React

  请看 React 官网文章在网站中添加 React

• 2. 创建一个新的基于 React 的项目

  请看 React 官网文章创建新的 React 应用

  总结一下就是：

  • 你可以手动从 0 到 1 打造一个自己的 React 应用

  • 如果你嫌麻烦的化，使用 React 应用构建工具可以让你轻松构建一个功能完善的 React 应用，如Gatsby、Next.js、以及我们今天的主角Create React App等。

2. 认识 react-create-app

react-create-app 是 Dan 开发的一个 NPM 包，可以让我们使用命令行的方式轻松构建 React 应用。

2.1 Create React App 是什么

Create React App包含两个包：

• create-react-app 是一个全局命令行实用程序，可用于创建新项目
• react-scripts 是生成的项目中的一个开发依赖项

2.2 Create React App 做了什么

• Create React App只是创建一个前端构建流水线（build pipeline），所以你可以使用它来配合任何你想使用的后端

• CLI 默认使用 Yarn 安装管理依赖

• 在生产模式下会打包 React 并优化构建以获得最佳性能

3. react-create-app 如何使用

3.1 创建 react 应用

官网文章写的够详细，传送门Getting Started.

首先，你无需安装它：

这要感谢 npx，它让我们无需安装 NPM 的一些 CLI 包，就能直接使用他们。看看 NPM CLI 团队成员的介绍：Introducing npx: an npm package runner.

新建一个 React 应用my-app：

npx create-react-app my-app

使用模板创建一个 React 应用my-app：

npx create-react-app my-app --template [template-name]

新建一个基于 TypeScript 的 React 应用my-app：

npx create-react-app my-app --template typescript

3.2 创建结果

默认情况创建的my-app目录：

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

说明：

• 项目构建（build）时，以下文件必须存在

  • public/index.html 应用主页模板
  • src/index.js JS 入口文件

• src 是我们的工作目录

• public目录下的文件（如某些插件）才能用在 public/index.html里

4. 自定义 development 配置

配置一个合适的开发环境可以大大提高开发效率，减少错误率。

4.1 语法高亮

配合我们常用的 IDE，使用ESLint可以提示我们开发者遇到的语法错误等。

我们可以通过拓展eslintConfig配置实现特定的检查规则，例如下面是关于typeScript的配置：

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

4.2 在 VS Code 中调试代码

在 VS Code 中调试代码需要做两件事：

1. 配置launch.json文件
2. VS Code 安装插件 Chrome Debugger

然后通过npm start命令启动项目，在 VS Code 中启动 Debug(快捷键 F5)。

4.3 自动格式化代码

为了在代码commit时进行代码的自动格式化，需要安装以下依赖：

npm install --save husky lint-staged prettier

• husky 可以像使用 npm 脚本一样使用 githooks
• lint-staged 允许我们在代码的暂存文件上运行脚本
• prettier 是我们在 commit 时执行的 JS 格式化程序

当然，别忘了在package.json中进行配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write"
  ]
},

这样，我们的代码会在每次 commit 时进行格式化。

你也可以随时手动格式化：

./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"

或者在 VS Code 中进行配置，每次保存时进行格式化。

5. 自定义 production 配置

4. 如何修改 react-create-app 默认配置

5. react-create-app 源码解析

6. react-create-app 哲学

参考

官方网站，写的很详细，推荐 👍 Create React App

源码地址，去 start 一下 🌟 github 源码