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