React 基础：开始使用 React | Next.js

要在新创建的项目中使用 React，请从名为 unpkg.com 的外部网站加载两个 React 脚本：

react 是 React 的核心库。
react-dom 提供了特定于 DOM 的方法，使您能够将 React 与 DOM 结合使用。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

与其直接使用原生 JavaScript 操作 DOM，不如移除之前添加的 DOM 方法，并添加 ReactDOM.createRoot() 方法以定位特定的 DOM 元素并创建一个根节点来显示您的 React 组件。然后，使用 root.render() 方法将您的 React 代码渲染到 DOM 中。

这将告诉 React 在 #app 元素内渲染我们的 <h1> 标题。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

如果您尝试在浏览器中运行此代码，将会收到一个语法错误：

Terminal

Uncaught SyntaxError: expected expression, got '<'

这是因为 <h1>...</h1> 不是有效的 JavaScript。这段代码是 JSX。

什么是 JSX？

JSX 是 JavaScript 的一种语法扩展，允许您以熟悉的 类 HTML 语法描述您的 UI。JSX 的好处在于，除了遵循三条 JSX 规则外，您无需学习 HTML 和 JavaScript 之外的任何新符号或语法。

但浏览器默认不支持 JSX，因此您需要一个 JavaScript 编译器（如 Babel）将您的 JSX 代码转换为常规 JavaScript。

将 Babel 添加到项目中

要将 Babel 添加到您的项目中，请在 index.html 文件中复制并粘贴以下脚本：

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

此外，您需要通过将脚本类型更改为 type=text/jsx 来告知 Babel 需要转换哪些代码。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

要确认其正常工作，请在浏览器中打开您的 HTML 文件。

比较您刚刚编写的 声明式 React 代码：

index.html

<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

与您在上一节中编写的 命令式 JavaScript 代码：

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

您可以开始看到使用 React 如何帮助您减少大量重复代码。

这正是 React 的作用，它是一个包含可重用代码片段的库，可以代表您执行任务——在本例中是更新 UI。

额外资源：

您不需要确切了解 React 如何更新 UI 即可开始使用它，但如果您想了解更多，以下是一些额外资源：

UI 树

使用 JSX 编写标记

react-dom/server 部分在 React 文档中。

React 必备的 JavaScript 知识

虽然您可以同时学习 JavaScript 和 React，但熟悉 JavaScript 可以使学习 React 的过程更加轻松。

在接下来的部分中，您将从 JavaScript 的角度了解 React 的一些核心概念。以下是将会提到的 JavaScript 主题摘要：

虽然本课程不会深入探讨 JavaScript，但保持对最新 JavaScript 版本的了解是一个好习惯。但如果您对 JavaScript 还不熟练，请不要让这阻碍您开始使用 React 进行构建！

React 入门指南

什么是 JSX？

将 Babel 添加到项目中

React 必备的 JavaScript 知识

On this page