介绍：一个用于构建用户界面的Javascript库

将React 组件添加到现有的 HTML 页面（通过 HTML 的 script 标签引入 React）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
   
  </head>
  <body>
    <!-- 第一步：添加一个 DOM 容器到 HTML -->
    <div id="like_button_container"></div>
    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <!-- 第二步：添加 Script 标签（React CDN）-->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>     
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- 加载我们的 React 组件。-->
    <script src="like_button.js"></script>
  </body>
</html>

// like_button.js文件

'use strict';
const e = React.createElement;
// 第三步：创建一个 React 组件 (使用React.Component创建class组件)
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

// 获得DOM实例
const domContainer = document.querySelector('#like_button_container');
// const container = document.getElementById('like_button_container');
// 创建ReactDOM （ReactDOM.createRoot）
const root = ReactDOM.createRoot(domContainer);
// 渲染React组件
root.render(e(LikeButton));

重用一个组件查看完整的示例源码

组件组合

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" /> 
      <Welcome name="Cahal" />  
      <Welcome name="Edite" />    
    </div>
  );
}

为生产环境压缩 JavaScript 代码

在将你的网站部署到生产环境之前，要注意未经压缩的 JavaScript 可能会显著降低用户的访问速度。

如果你已经压缩了应用代码，如果你确保已部署的 HTML 加载了以 production.min.js 结尾的 React 版本，那么你的网站是生产就绪（production-ready）的：

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

在生产中，建议压缩应用程序中包含的所有 JavaScript 代码。压缩可以帮助您的网站加载速度提高几倍， 尤其是随着 JavaScript 源代码大小的增长。

这是设置它的一种方法：

安装 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 和 JSX （下面两段代码是等价的。）

// 依赖了浏览器原生支持的特性，使用了 JavaScript 函数调用来告诉 React 要显示什么

const e = React.createElement;
// 显示一个 "Like" <button>
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

// React 还提供了一种使用 JSX 编写界面的方式：

// 显示一个 "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

快速尝试 JSX

在项目中尝试 JSX 最快的方法是在页面中添加这个 <script> 标签：
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
现在，你可以在任何 <script> 标签内使用 JSX，方法是在为其添加 type="text/babel" 属性。

一个使用了 JSX 的 HTML 文件的例子这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且不适用于生产环境。

将 JSX 添加到项目

将 JSX 添加到项目中并不需要诸如打包工具或开发服务器那样复杂的工具。本质上，添加 JSX 就像添加 CSS 预处理器一样。唯一的要求是你在计算机上安装了 Node.js。在终端上跳转到你的项目文件夹，然后粘贴这两个命令：

步骤 1： 执行 npm init -y
步骤 2： 执行 npm install babel-cli@6 babel-preset-react-app@3

执行完上面的步骤，就为你的项目加入了一个生产就绪（production-ready）的 JSX 配置环境。

运行 JSX 预处理器

创建一个名为 src 的文件夹并执行这个终端命令：

npx babel --watch src --out-dir . --presets react-app/prod
这个命令启动了一个对 JSX 的自动监听器。

监听器会创建一个预处理过的 like_button.js 文件，它包含了适用于浏览器的普通 JavaScript 代码。当你编辑带有 JSX 的源文件时，转换过程将自动重新执行。这样，在旧浏览器上也能够使用现代 JavaScript 的语法特性，比如 class。我们刚才使用的工具叫 Babel，你可以从它的文档中了解更多。

React (在网站中添加 React)