Hello, world!

5 分钟

启动任何编程课程的最常见方式是显示文本“Hello，world！”，按照此传统，接下来我们将使用 React 显示这句著名的文本。

我们将创建两个项目，作为项目的基础：

index.html 文件用于托管 React 应用程序。
index.jsx 文件载入应用程序。

创建应用程序主机

在 Visual Studio Code 中，从 public 文件夹新建一个文件。将其命名为 index.html。

添加以下 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Recipes</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/dist/index.js"></script>
</body>
</html>

浏览代码

请注意 HTML 中非常重要的两行：

<div id="app"></div>
- 此行用于创建用于托管 React 应用程序的 HTML 元素。
- 我们通过该元素的 ID 调用它，来呈现应用程序。
<script type="module" src="/dist/index.js"></script>
- 此行用于加载 JavaScript。

注意

要导入的文件的名称是 index.js。我们不使用 index.jsx，因为浏览器无法呈现 JSX 文件。我们始终需要使用捆绑程序（如 Snowpack）来生成 JavaScript。我们要引用 JavaScript，而非 JSX。

通过 type="module" 属性，我们可以在 JavaScript（或 JSX）中使用 import 语句。对于浏览器而言，此功能相对较新。它可帮助我们导入必要的包和组件。

创建 React 应用程序的入口点

我们需要使用代码，以便在 HTML 内呈现 React 应用程序。通常，我们使用 index.jsx 文件呈现此应用程序。

在 src 文件夹中创建一个新文件。将其命名 index.jsx。

添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

浏览代码

index.jsx 文件启动时会导入两个重要的库。第一个库是 React，它可允许我们使用 JSX。我们创建的每个组件或 JSX 文件都会导入它。第二个库是 ReactDOM，它将在 HTML 中呈现应用程序。

render 采用两个参数：

要显示的 HTML。在本示例中，HTML 为 h1 标题。
要用于显示 HTML 的 HTML 元素。我们将使用 ID 为 app 的元素。在此之前，我们已创建此元素。

能够在 JavaScript 编码中使用 HTML，这是 JSX 的功能之一。

查看页面

我们已生成代码，现在我们来看看网站的实际运行状况！

选择“视图”>“终端”，或选择 Ctrl+`，从 Visual Studio Code 中打开集成终端。在 Mac 上，改为选择 Cmd+`。
使用以下命令启动 Snowpack 的开发服务器：
```
npm start
```

默认浏览器应自动打开并显示你的页面。如果此页面未自动显示，请打开浏览器并转到 http://localhost:8080. 现在你应该看到了你的页面！

Screenshot showing a

浏览生成的代码

我们的 JSX 代码将转换为相应的 HTML 和 JavaScript，以便显示在浏览器中。打开 Snowpack 生成的 JavaScript 文件：http://localhost:8080/dist/index.js. 你将看到以下代码：

import React from "../web_modules/react.js";
import ReactDOM from "../web_modules/react-dom.js";
ReactDOM.render(/* @__PURE__ */ React.createElement("h1", null, "Hello, world!"), document.getElementById("app"));

将焦点置于生成 h1 元素的代码行，并在其中放置文本：

React.createElement("h1", null, "Hello, world!")

使用此代码类似于通过 Vanilla JavaScript 使用 document.createElement。借助 Snowpack 和其他捆绑程序提供的工具，我们能够使用 JSX 自动生成适当的对浏览器友好的代码。

Hello, world!

创建应用程序主机

浏览代码

创建 React 应用程序的入口点

浏览代码

查看页面

浏览生成的代码

反馈