软件开发 --- react 输出 hello world

创建 React "Hello World" 应用的详细步骤

本指南将引导您完成创建一个基本的 React 应用程序，该程序会在浏览器中显示 "Hello World"。

前提条件:

在开始之前，请确保您的计算机上安装了以下软件：

Node.js: React 开发依赖于 Node.js。您可以从 Node.js 官方网站下载并安装适合您操作系统的版本。安装 Node.js 时，通常会自动安装 npm。
npm (Node Package Manager): npm 是 Node.js 的包管理器，用于安装和管理项目依赖项。

您可以通过在终端或命令提示符中运行以下命令来检查是否已成功安装 Node.js 和 npm：

node -v
npm -v

如果输出了版本号，则表示安装成功。

步骤 1: 使用 Create React App 创建新的 React 项目

Create React App 是一个官方支持的、用于创建单页面 React 应用的工具。它会为您配置好开发环境，让您可以专注于编写代码。

打开您的终端 (Terminal) 或命令提示符 (Command Prompt)。
运行以下命令来创建一个新的 React 项目。 我们将项目命名为 my-hello-world-app，您可以根据自己的喜好更改名称。
```
npx create-react-app my-hello-world-app
```
- npx 是 npm 5.2+ 版本附带的一个工具，它可以让您在不全局安装包的情况下运行 npm 包命令。
- 这个过程可能需要几分钟，因为它会下载所有必要的依赖项并设置项目结构。
替代方案 (使用 Vite): Vite 是一个新兴的构建工具，以其极快的冷启动和热更新速度而受到欢迎。如果您想尝试 Vite，可以使用以下命令：
```
# 使用 npm
npm create vite@latest my-hello-world-app -- --template react
# 或者使用 yarn
# yarn create vite my-hello-world-app --template react
```
然后按照提示操作，选择 react 作为框架。

步骤 2: 进入项目目录

项目创建完成后，您需要进入到项目的根目录：

cd my-hello-world-app

请确保将 my-hello-world-app 替换为您在步骤 1 中使用的项目名称。

步骤 3: 启动开发服务器

在项目目录中，您可以启动开发服务器来查看和测试您的应用程序。

对于使用 Create React App 创建的项目:
```
npm start
```
对于使用 Vite 创建的项目:
```
npm run dev
```
或者，如果您在创建项目时使用了 yarn：
```
yarn dev
```

执行此命令后，开发服务器将启动，并在您的默认浏览器中自动打开应用程序。通常，地址会是 http://localhost:3000 (对于 Create React App) 或 http://localhost:5173 (对于 Vite)。您应该会看到一个默认的 React 欢迎页面。

步骤 4: 修改代码以显示 "Hello World"

现在，我们将修改默认代码，使其显示 "Hello World"。

使用您喜欢的代码编辑器 (例如 Visual Studio Code, Sublime Text, WebStorm 等) 打开项目文件夹 my-hello-world-app。
导航到 src 文件夹。 这是存放应用程序主要源代码的地方。
打开 App.js 文件。 (如果您使用的是 Vite 并且选择了 JavaScript，文件名可能是 App.jsx；如果选择了 TypeScript，则可能是 App.tsx。核心逻辑是相同的。)

App.js 是应用程序的主要组件。默认情况下，它包含了一些示例内容。

修改 App.js 文件的内容如下：

// 引入 React 库，这是编写 React 组件所必需的
import React from 'react';

// 引入 App.css 文件，用于定义组件的样式 (可选)
// 如果您不打算使用默认样式，可以删除这一行和 App.css 文件
import './App.css';

// 定义名为 App 的函数组件
function App() {
  // 组件的返回值描述了它在屏幕上应该渲染的内容
  // JSX 语法允许我们在 JavaScript 中编写类似 HTML 的结构
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello World</h1>
      </header>
    </div>
  );
}

// 导出 App 组件，以便在其他文件中使用 (通常是在 index.js 中)
export default App;

代码解释:

import React from 'react';: 导入 React 库。
import './App.css';: 导入 CSS 文件为该组件提供样式。您可以修改 App.css 或完全删除它。
function App() { ... }: 这是一个函数组件，是现代 React 中推荐的组件编写方式。
return (...): 这部分包含了 JSX (JavaScript XML) 代码。JSX 允许您在 JavaScript 中编写类似 HTML 的标记。
<div className="App"> ... </div>: 这是组件渲染的最外层容器。在 JSX 中，class 属性需要写成 className。
<h1>Hello World</h1>: 这是一个标准的 HTML <h1> 标签，它将显示文本 "Hello World"。

步骤 5: 查看更改

保存您对 App.js 文件所做的更改。
返回到您的浏览器。 如果开发服务器仍在运行，页面应该会自动刷新以显示更改 (这被称为热模块替换或热重载)。
您现在应该会在页面上看到大字显示的 "Hello World"。

posted on 2025-05-09 07:45 GKLBB 阅读(23) 评论(0) 收藏举报

刷新页面返回顶部

GKLBB

导航

软件开发 --- react 输出 hello world

创建 React "Hello World" 应用的详细步骤