React 入门教程之一 -- 简介

这篇文章上次修改于 757 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

React 是一个用来创建用户界面的 JavaScript 库。

它从一开始就被设计为 gradual adoption 渐进式融入的模式，你可以根据需求使用 React 到你的项目中，无论是使用 React 对你的 html 页面做简单交互，或者完全使用 React 搭建程序。

对现有网页加入 React 支持

当你需要对现有的网页做一些简单的交互动作时，React 也可以方便的加入进来。下面的示例中我们介绍如何通过 React 给页面添加一个 component 元素。

首先给 html 页面添加一个 DOM 元素：

<!-- ... existing HTML ... -->
<div id="like_button_container"></div>
<!-- ... existing HTML ... -->

然后在 body 块结尾添加 React 模块的 script 脚本标签：

  <!-- ... other HTML ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>

</body>

前两个 script 加载 React，最后一个是我们加载自定义 component 的代码。

如果 script 部署在 CDN 上，推荐加上 crossorigin 属性可以提高加载速度。

然后我们使用 React 编写 like_button.js，详细的实现代码我们在后续介绍，最后我们通过下面指令将 React component 加入 html 容器：

// ... the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

以上就是将 React component 加入现有网页的过程。

缩小 JavaScript 文件尺寸

在部署我们的网站前，要注意没有经过缩小化处理的 JavaScript 脚本会导致页面加载缓慢。

首先我们将加载 React 的脚本使用缩小化的版本链接：

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin></script>

对于我们自己编写的 React 脚本可以通过工具得到缩小后的版本，这里介绍通过 node.js 的 terser 库来实现：

首先安装 node.js
在项目目录下运行 npm init -y
运行 npm install terser

例如需要缩小 like_button.js，在终端运行：

npx terser -c -m -o like_button.min.js -- like_button.js

就会在当前目录下得到缩小后的脚本文件 like_button.min.js。

创建一个新的 React 程序

以上介绍了如何将 React 添加到现有的 html 中，但是通过一套整合的工具链可以得到更好的用户和开发体验。

React 团队推荐下面几种解决方案：

如果你要学习 React 或者要创建一个单页面 app，推荐使用 Create React App
如果你要使用 node.js 创建一个 server-rendered 服务器端渲染的网站，推荐使用 Next.js
如果你要建立一个静态内容的网站，推荐使用 Gatsby

Create React App

Create React App 是学习 React 很好的环境，也是建立单页面 React 应用程序最好的方式。

官方网站：https://create-react-app.dev/

它会自动设置开发环境是我们可以使用最新的 JavaScript 功能，提供很好的开发体验以及对发布时对程序进行优化。

使用下面指令创建并运行一个新项目：

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

注意如果你之前使用 npm install -g create-react-app全局安装过 create-react-app，推荐先卸载它 npm uninstall -g create-react-app 从而确保 npx 能够安装最新的版本。

node.js 会自动安装 react, react-dom, 和 react-scripts with cra-template。

通过 --template 选项可以自定义使用什么模板创建新程序，默认为：cra-template，模板可以在官网搜索：cra-template-*

如果安装中报错，可以尝试更新 npm 以及清除缓存，然后再次尝试安装：

npm i -g [email protected]
npm cache clean -f

如果在本地开发推荐替换 npm 国内源可以提高下载速度，参考：https://blog.niekun.net/archives/2085.html

创建 React App 不会处理后端的数据和逻辑，它只建立前端通道。所以你可以使用任何后端服务。

通过 npm start 运行程序后，打开 http://localhost:3000/ 可以查看程序运行效果。

当程序需要进行部署时，运行 npm run build 会在 build 目录下创建一个经过最小化代码优化处理的项目包，可以将其部署到服务器。

Next.js

Next.js 是一个流行的 React framework 来创建 static 和 server‑rendered 程序。

官网：https://nextjs.org/

Gatsby

Gatsby 是通过 React 创建静态网站的最好的工具。它使我们可以使用 React components 但输出预渲染的 html 和 css 以确保页面加载速度。

Marco Nie