构建一个显示“Hello World！”的基本 React 应用程序

React 是一个广泛使用的 JavaScript 库，用于构建用户界面。本文将介绍如何使用 React 构建一个最简单的应用程序，该应用程序将显示“Hello World！”文本。

步骤

1. 安装 Node.js。运行以下命令：

   $ sudo apt-get update
   $ sudo apt-get install nodejs
   

2. 安装 NPM。运行以下命令：

   $ sudo apt-get install npm
   

3. 安装 create-react-app。运行以下命令：

   $ npm install -g create-react-app
   

4. 创建 React 应用程序。运行以下命令：

   $ create-react-app my-app
   

   my-app 可替换为您的应用程序名称。

5. 运行应用程序。运行以下命令：

   $ cd my-app
   $ npm start
   

6. 编辑您的应用程序。打开 src/App.js 文件，并将以下代码添加到文件顶部：

   import React from 'react';
   

7. 修改 render() 方法，以显示“Hello World！”文本。将以下代码添加到 render() 方法中：

   return (
     <div>
       <h1>Hello World!</h1>
     </div>
   );
   

8. 重新加载应用程序。在代码编辑器中保存文件后，浏览器应该会自动重新加载应用程序。

   如果没有自动重新加载，请停止 (CTRL + C) 并重新启动 (npm start) 应用程序。

9. 查看您的应用程序。在浏览器中打开 http://localhost:3000，应该会看到“Hello World！”文本。

完整代码

以下是完整的 src/App.js 文件代码：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

结论

恭喜！您已经成功构建了一个显示“Hello World！”的基本 React 应用程序。现在您可以继续学习 React，并在您的应用程序中构建更复杂的用户界面。