章节4

React 入门

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

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

<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 将我们的 <h1> 标题渲染到 #app 元素内。

<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>

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

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 文件中

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

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

<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 代码

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

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

<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 文档中的 react-dom/server 部分。

React 的基本 JavaScript

虽然您可以同时学习 JavaScript 和 React，但熟悉 JavaScript 可以让学习 React 的过程更容易。

在接下来的章节中，您将从 JavaScript 的角度介绍 React 的一些核心概念。以下是将提及的 JavaScript 主题摘要：

虽然本课程不会深入探讨 JavaScript，但及时了解 JavaScript 的最新版本是一个好习惯。但如果您觉得自己的 JavaScript 还不熟练，请不要因此阻碍您开始使用 React 进行开发！

React 入门

什么是 JSX？

将 Babel 添加到您的项目

React 的基本 JavaScript

您已完成本章4