使用 Visual Studio Code 编写 React 项目,并创建一个简单的 "Hello World" 程序

536 阅读1分钟

要使用 Visual Studio Code 编写 React 项目,并创建一个简单的 "Hello World" 程序,你可以按照以下步骤操作:

步骤 1: 安装 Node.js 和 npm

确保你的计算机上安装了 Node.js,它会自动安装 npm (Node 包管理器)。你可以通过运行以下命令检查它们是否已安装:

bashCopy code
node -v
npm -v

步骤 2: 安装 Create React App

Create React App 是一个用于快速创建 React 应用程序的工具。在终端中运行以下命令来全局安装 Create React App:

bashCopy code
npm install -g create-react-app

步骤 3: 创建 React 项目

在你选择的目录中,运行以下命令创建一个新的 React 项目:

bashCopy code
npx create-react-app my-react-app

这将创建一个名为 my-react-app 的新目录,其中包含 React 项目的初始文件。

步骤 4: 进入项目目录

bashCopy code
cd my-react-app

步骤 5: 打开项目

使用 VSCode 打开 React 项目:

bashCopy code
code .

这将在 VSCode 中打开项目。

步骤 6: 编写 "Hello World" 程序

在 VSCode 中,打开 src/App.js 文件,将其内容更改为以下内容:

jsxCopy code
import React from 'react';

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

export default App;

步骤 7: 运行应用程序

返回终端,在项目目录中运行以下命令:

bashCopy code
npm start

这将启动 React 开发服务器,并在默认浏览器中打开应用程序。你应该在浏览器中看到 "Hello World!"。

现在,你已经成功创建并运行了一个简单的 React 应用程序。你可以在 src/App.js 中继续编辑代码,构建更复杂的 React 应用。