要使用 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 应用。