在这个激动人心的React入门系列的第二部分中，让我们踏上激动人心的旅程，编写我们的第一个React程序——经典的“Hello World”。准备好体验React的魔力吧！

掌握React的第一步：创建-react-app项目

要开始我们的React之旅，我们将使用Facebook推出的create-react-app项目，它是一种开箱即用的工具，消除了繁琐的配置，让您专注于编码。

借助npm的npx命令，我们可以轻松初始化一个新的React项目：

npx create-react-app hello-world

片刻之后，您将拥有一个完整的React项目，包含所有必需的文件和依赖项。

编写您的第一个React组件

打开src文件夹，您将找到App.js文件。这是您编写React组件的地方。组件就像应用程序中的小建筑块，每个组件都负责一个特定任务。

对于我们的“Hello World”程序，我们将创建一个名为Hello的组件，它将显示我们的欢迎消息。在App.js中添加以下代码：

import React from 'react';

const Hello = () => {
  return <h1>Hello World!</h1>;
};

export default Hello;

在这里，我们创建了一个箭头函数组件，它返回一个标题元素（

），其中包含我们的“Hello World！”消息。我们还导出组件，以便稍后在应用程序中使用它。

渲染组件

接下来，我们需要在App.js中渲染我们的Hello组件。在render()方法中，将以下代码添加到返回语句中：

<Hello />

这将告诉React在应用程序中渲染Hello组件。

运行您的应用程序

现在，让我们启动我们的应用程序并见证“Hello World”的魅力。在终端中运行以下命令：

npm start

片刻之后，您的浏览器将打开，显示带有“Hello World！”消息的React应用程序。

恭喜！

您已经成功编写了您的第一个React程序。虽然它可能是一个简单的开始，但它开启了您在React开发之旅的大门。

拓展您的知识

如需更深入地了解React，请查看以下资源：

• React官方文档
• React教程
• React社区

不断探索，构建令人惊叹的React应用程序，让我们一起踏上React之旅的精彩旅程吧！