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/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/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/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/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 npm@latest
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 以确保页面加载速度。

标签：无

你的评论