React.js:创建新的 React 应用, 深入浅出 Create React App, Create React App 中文文档, Create React App 快速入门

 

 

初始化 React App 的多种方式

常见的初始化 React App 的方式有:

  • 不使用构建工具构建 React App;
  • 使用 Webpack 手动构建 React App;
  • 使用 Create React App 一站式构建 React App;
  • 在在线沙箱平台直接构建 React App

 

入门

Create React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。

 

快速开始

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

(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)

然后打开 http://localhost:3000/ 查看你的应用。

 

当你准备部署到生产环境时,使用 npm run build 创建一个压缩后的 bundle(包)。

npm start

立即开始

你 无需 安装或配置 Webpack 或 Babel 等工具。 它们是预先配置好并且隐藏的,因此你可以专注于代码。

只需创建一个项目,就可以了。

 

创建应用程序

你需要在本地开发计算机上使用 Node >= 6(但在服务器上不需要)。 你可以使用 nvm (macOS/Linux) 或 nvm-windows 轻松地在不同项目之间切换 Node 版本。

要创建新应用,你可以选择以下方法之一:

npx

npx create-react-app my-app
# or
npx create-react-app {your-any-name}

(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)

 

npm

npm init react-app my-app

npm init <initializer> 在 npm 6+ 中可用

 

Yarn

yarn create react-app my-app

yarn create 在 Yarn 0.25+ 中可用

 

输出

运行任何这些命令都会在当前目录中创建一个名为 my-app 的目录。在该目录中,它将生成初始项目结构并安装依赖项

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

 

没有配置或复杂的文件夹结构,只是构建应用程序所需的文件。安装完成后,你可以打开项目目录:

cd my-app

 

Scripts

在新创建的项目中,你可以运行一些内置命令:

npm start 
#或
yarn start

在开发模式下运行应用程序。 打开 http://localhost:3000 在浏览器中查看它。

如果你更改代码,页面将自动重新加载。 你将在控制台中看到构建错误和 lint 警告。

Build errors

npm test 或 yarn test

以交互模式运行测试观察程序。 默认情况下,运行与上次提交后更改的文件相关的测试。

详细了解测试

 

npm run build 或 yarn build

将生产环境的应用程序构建到 build 目录。 它能将 React 正确地打包为生产模式中并优化构建以获得最佳性能。

构建将被压缩,文件名中将包含哈希。

这样你的应用已准备好部署了。

 

文件夹结构

创建后,你的项目应如下所示:

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 是 JavaScript 入口点。

你可以删除或重命名其他文件。

你可以在 src 中创建子目录。 为了加快重新构建的速度,Webpack 只处理 src 中的文件。 你需要将任何 JS 和 CSS 文件放在 src 中,否则 Webpack 将发现不了它们。

只能在 public/index.html 中使用 public 中的文件。 阅读以下有关使用 JavaScript 和 HTML 资源的说明。

但是,你可以创建其他你想要的顶级目录。 它们不会包含在生产版本中,因此你可以将它们用于文档等内容。

如果你安装了 Git 并且你的项目不是更大的存储库的一部分,那么将初始化一个新的存储库,从而产生一个额外的顶级 .git 目录。

 

可用的 Scripts

在项目目录中,你可以运行:

 

npm start

在开发模式下运行应用程序。打开 http://localhost:3000 以在浏览器中查看它。

如果你进行编辑,页面将重新加载。你还将在控制台中看到任何 lint 错误。

 

npm test

以交互式监视模式启动测试运行器。有关更多信息,请参阅有关 运行测试 的部分。

 

npm run build

将生产应用程序构建到 build 文件夹。它能将 React 正确地打包为生产模式中并优化构建以获得最佳性能。

构建将被压缩,文件名中将包含哈希。有关更多信息,请参阅 生产构建 部分。

这样你的应用已准备好部署了。有关将应用程序部署到服务器的详细信息,请参阅有关 部署 的部分。

 

npm run eject

注意:这是单向操作。一旦你 eject ,你就不能回去了!

如果你对构建工具和配置选项不满意,可以随时 eject 。此命令将从项目中删除单个构建依赖项。

相反,它会将所有配置文件和传递依赖项(Webpack,Babel,ESLint等)复制到项目中,以便你可以完全控制它们。除 eject 之外的所有命令仍然有效,但它们将指向复制的脚本,以便你可以调整它们。接下来你只能靠自己了。

你不必使用 eject 。精选功能集适用于中小型部署,你不应觉得必须使用此功能。但是我们知道,如果你不能在准备就绪时对它进行定制,那么这个工具就没什么用了。

 

支持的浏览器和特性

 

支持的浏览器

默认情况下,生成的项目支持所有现代浏览器。 如果你的项目想支持 Internet Explorer 9 , 10 和 11 ,那么需要 polyfills

 

支持的语言特性

该项目支持最新 JavaScript 标准的超集。 除了 ES6 语法功能外,它还支持:

详细了解 不同的提案阶段 。

虽然我们建议谨慎使用实验性建议,但 Facebook 在产品代码中大量使用这些功能,因此如果这些提案中的任何一个在将来发生变化,我们打算提供 codemods 。

请注意,**此项目默认不包含 polyfills **。

如果你使用任何其他需要 运行时(runtime)支持 的 ES6+ 特性(例如 Array.from() 或 Symbol ),请确保 手动包含相应的 polyfill ,或者你所定位的浏览器已经支持它们。

 

实战 1:使用 CRA 构建 React App

到这里,我们终于需要通过命令行来安装和使用 CRA,来构建我们的第三个“Hello World”App。

 

全局安装 CRA

为保证每一个新项目都能使用到 CRA 最新最全的功能,请确保 CRA 为最新版本。

# 在已安装 CRA 的情况下,可以先卸载 CRA
$ npm uninstall -g create-react-app
# 正式安装 CRA
$ npm install -g create-react-app

 

初始化 CRA 项目

根据我们的 npm 版本,选择相应命令来安装最新版的 CRA 并初始化第一个项目。同时检查自己的 node 版本,需要在本地开发计算机上安装 Node 8.16.0 或 Node 10.16.0 或更高版本(但服务器上不需要)。 我们可以使用nvm(macOS / Linux)或 nvm-windows 在不同项目之间切换Node版本。

# 查看自己的 npm 版本
$ npm --version

# 第一种新建项目方式——npm 5.2+ 时,以下命令会安装最新版 CRA
$ npx create-react-app my-app
# 第一种新建项目方式——npm 版本小于等于 5.1 时
$ create-react-app my-app

# 第二种新建项目方式
# npm 6+ 开始支持 npm init <initializer> 
$ npm init react-app my-app

# 第三种新建项目方式
$ yarn create react-app my-app

 

项目的文件结构

通过命令行的构建,我们初始化了第一个 CRA 项目,其中帮我们生成的项目目录结构如下(只有 src 下的文件才会被 Webpack 处理,只有 public 下的文件才能被 public/index.html 使用):

my-app
├── .git # 隐藏文件夹,会初始化第一个 Commit 记录
├── README.md
├── node_modules
├── package.json # 依赖配置文件
├── .gitignore
├── [floder_name] # 根目录下可以建立其他文件夹,但不会被用在生产环境中
├── public # 只有 public 下的文件才能被 public/index.html 使用
│   ├── favicon.ico
│   ├── index.html # public/index.html 页面模板
│   └── manifest.json
└── src # 只有 src 下的文件才会被 Webpack 处理
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── [floder_name] # 可以建立其他文件夹,以被 Webpack 成功导入
    ├── index.css
    ├── index.js # JavaScript 打包入口文件
    ├── logo.svg
    └── serviceWorker.js

 

关于 package.json、index.js 和 public/index.html 文件夹,我们通过“实战 2”已经有所了解。前者是 JavaScript 打包入口文件,通常链接整个业务代码;后者是页面模板,是打包后整个静态页面的总入口。

这里对以下两个文件的出现进行简要的意义概括。 _

  • src/serviceWorker.js:提供渐进式 Web 应用的核心功能,不论网络状况如何都能立即加载,并且在不需要网络请求(离线时)的情况下也能展示 UI ;
  • public/manifest.json:是渐进式 Web 应用将自身添加至桌面的功能依赖文件,也可以对图标、名称等信息进行配置。

 

运行 CRA 项目

CRA 默认提供了运行、测试、打包、部署以及弹出项目的命令。其中的一些贴士:

  • npm start 内置热更新机制,代码改动时页面自动刷新;
  • npm test 以交互方式运行测试观察程序,默认情况下运行与自上次提交以来更改的文件相关的测试;
  • npm run build 将要生产的应用程序生成到生成文件夹。它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。生成文件被压缩,并且文件名包含哈希;
  • npm run eject 将内置的各种 Webpack 配置弹出到项目中,让我们可以进行自定义。同时此操作不可逆,意味着我们承担了弹出配置后的风险。通常不推荐弹出,可以通过 React App Rewired 库进行配置注入。
    # ---- 运行 ----
    $ npm start
    $ open http://localhost:3000
    # ---- 测试 ----
    $ npm test
    # ---- 打包 ----
    $ npm run builds
    # ---- 弹出配置 ----
    $ npm run eject

     

搭建 CRA 生态

根据官方文档的思路,我们还能从更多角度拓展 CRA 的使用边界,下面进行概要介绍。

  • 为开发环境添加额外功能:包括“配置编辑器风格”、“开发隔离组件”、“分析打包文件”和“添加 HTTPS 支持”;
  • 添加样式与静态资源支持:包括“添加样式表文件”、“添加 CSS Modules 支持”、“添加 Sass 支持”、“添加 PostCSS 支持”、“添加图片文字和字体支持”、“添加 GraphQL 支持”、“使用 public 文件夹”、“进行代码拆分”;
  • 添加业务驱动支持:包括安装各种依赖项如“BootStrap”、“Flow”、“TypeScript”、“Delay”、“Router”,以及“导出组件”、“使用全局变量”、“配置环境变量”、“制作渐进式 Web 应用”和“创建生产环境”;
  • 添加测试支持:包括“运行测试”和“调试测试”;
  • 添加后端集成支持:包括“在开发环境中代理 API 请求”、“使用 AJAX 请求获取数据”、“集成后端 API”和“使用 Title & Meta 标签”;
  • 部署进阶:包括“静态服务器”、“Azure”、“Firebase”、“Github Pages”等平台的部署等。

 

这里无法深入展开,每一个点都可以是一个新的实战,当我们需要某个功能时便可以查阅相关文档来主动探索。

 

实战 2:使用 Source Map Explorer 分析打包文件

# 安装文件分析工具 source-map-explorer
$ sudo npm install --save source-map-explorer
# 打包项目
$ npm run build
# 将如下命令放入 package.json 中并生成快捷方式 npm run analyze
# $ source-map-explorer 'build/static/js/*.js'
# 注意此命令直接在命令行输入会提示找不到相关命令
$ npm run analyze

 

对于一个刚被 CRA 生成的 React App 来说,分析的结果如下,包大小总计 129.38k。

React.js:创建新的 React 应用, 深入浅出 Create React App, Create React App 中文文档, Create React App 快速入门
React.js:创建新的 React 应用, 深入浅出 Create React App, Create React App 中文文档, Create React App 快速入门

实战3:在已有的 React 项目中引入/升级 CRA

回到刚才“实战 2”建立的 react-webpack-steper 项目中,当我们已经编写了一部分业务时,能否直接在当前项目中无痛引入 CRA?

解决思路便是:在大多数情况下,更改 package.json 中的 react-scripts 版本并删除不必要依赖配置,接着在此文件夹中运行 npm install 就足够了,但最好参考更改日志以了解潜在的重大更改。CRA 致力于将重大更改保持在最低限度,以便可以轻松升级 React 脚本。

# 卸载 CRA 本身已经提供的依赖
$ sudo npm uninstall --save webpack webpack-cli webpack-dev-server
$ sudo npm uninstall --save-dev @babel/cli @babel-core @babel/preset-env @babel/preset-react
$ sudo npm uninstall --save-dev babel-loader babel-plugin-module-resolver html-webpack-plugin
# 删除 CRA 不需要使用的文件
$ rm webpack.config.js .babelrc
# 删除 node_modules
$ rm -rf node_modules
# 手动安装 React Script
$ sudo npm install --save react-scripts@latest
# 由于 CRA 默认规则,将 src/index.html 移至 public/index.html
$ mkdir public
$ mv src/index.html public
# 在 package.json 中添加 React Script 启动命令
$ vim package.json

 

package.json 中添加/覆盖如下指令。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",

 

再次执行即可。由于每个人的具体配置不一定一致,可根据自身所遇问题进行搜索。升级原理类似。

# 当没有 BrowsersList 时,CRA 会进行询问并帮助我们生成
$ npm start

 

更多:

 

https://deno-tutorial.js.org/articles/node/create-react-app-intro.html#%E5%AE%9E%E6%88%98-1%EF%BC%9A%E4%BD%BF%E7%94%A8%E5%8D%95%E4%B8%AA-html-%E6%96%87%E4%BB%B6%E6%9E%84%E5%BB%BA-react-app

 

https://www.html.cn/create-react-app/docs/developing-components-in-isolation/

 

本文:React.js:创建新的 React 应用, 深入浅出 Create React App, Create React App 中文文档, Create React App 快速入门

Leave a Reply