create-react-app文档 https://reactjs.org/docs/create-a-new-react-app.html
直接使用 npx创建项目，不需要全局安装create-react-app

image.png

create-react-app做了什么？

  1. 启动本地环境运行项目 npm run start
  2. 构建项目 npm run build，生成 build文件夹
  3. 单元测试，npm run test
  4. 尽量避免 npm run eject显示出 create-react-app的配置文件，用第三方工具覆盖默认的配置
    1. 要把项目所有的改变全部提交到 git，才能运行 npm run eject，否则报错
    2. This git repository has untracked files or uncommited changes
    3. 运行 npm run eject会多出，config文件夹和 scripts文件夹

create-react-app开发环境编译太慢的解决方案

  1. babel-plugin-dynamic-import-node
  2. https://blog.csdn.net/qq_39953537/article/details/93611371

修改端口号

Port 端口号,修改 package.json 中 start 一行
cross-env 跨平台修改

  1. Linux or MacOS
  2. "start": "PORT=4003 react-scripts start",
  3. "start": "export PORT=3006 react-scripts start"
  5. Windows
  6. "start": "set PORT=3006 && react-scripts start"

与 facebook/create-react-app 同步

  1. # 与上游 facebook CRA 仓库建立关联，别名取 upstream
  2. git remote add upstream https://github.com/facebook/create-react-app.git
  4. # 拉取更新
  5. git fetch upstream
  7. # 合并过来（官方已将主分支更换为 main）
  8. git merge upstream/main
  10. # 合并以后，多半会有代码冲突，这是正常现象，不要慌...
  11. # 逐个点开冲突文件，看看冲突位置的代码，选择留下自己的代码还是官方的代码，解决好冲突即可。

craco-fast-refresh

craco-fast-refresh，一个Craco插件，用于为React组件启用“快速刷新”，以前也称为热刷新
让应用程序在代码更改时轻而易举地重新加载，从而提供了出色的开发人员体验
React Fast Refresh是的替代品

自从create-react-app v4发行以来，正式支持Fast Refresh，
此插件仅在create-react-app v3上有效，并且存在一些错误，例如多个错误覆盖，请使用create-react-app v4

rewird

  1. npm install react-app-rewired --save-dev

https://github.com/timarney/react-app-rewired/blob/master/README_zh.md
https://blog.csdn.net/qq_37860930/article/details/85162024