章节4

React 入门

要在您新创建的项目中使用 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>

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

终端

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

您已完成章节4