学习 React | Hello World 示例 | LabEx 教程

介绍

🧑‍💻 刚接触 Linux 或 LabEx？我们建议从 Linux 快速入门 课程开始。

你好，欢迎来到 LabEx！在第一个实验中，你将学习经典的 React "Hello, World!" 程序。

点击下方的继续按钮开始实验。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个中级级别的实验，完成率为 67%。获得了学习者 99% 的好评率。

在开始之前，我们需要确保 LabEx VM 上已安装 Node.js 和 npm。

打开终端或命令提示符并运行以下命令：

cd ~/project
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

让我们尝试启动一个 React "Hello World" 示例。

打开终端或命令提示符并运行以下命令以创建一个新的 React 项目：

cd ~/project
npx create-react-app hello-world-demo

请等待安装完成。

接下来，让我们更新默认的 React 应用以显示 "Hello, World!" 消息。

在你喜欢的代码编辑器中打开文件 src/App.js，并将其内容替换为以下代码：

import React from "react";

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

export default App;

默认情况下，React 开发服务器使用端口 3000。要将其更改为端口 8080，请在代码编辑器中打开文件 package.json。

找到 scripts 部分，并更新 start 脚本以包含 PORT 环境变量：

"scripts": {
  "start": "BROWSER=none PORT=8080 react-scripts start",
  ...
}

最后，运行以下命令以启动 React 开发服务器：

cd hello-world-demo
npm start

就是这样！你已成功在本地服务器上使用端口 8080 启动了一个 React "Hello World" 示例。

现在，你可以切换到 Web 8080 标签页，并点击刷新按钮以查看网页。

恭喜！你已经完成了你的第一个 LabEx 实验。

如果你想了解更多关于 LabEx 以及如何使用它的信息，可以访问我们的支持中心。或者你可以观看视频以了解更多关于 LabEx 的内容。

编程是一段漫长的旅程，但 下一个实验 只需点击一下即可开始。让我们继续吧！