如何创建一个react工程

安装 Node.js 和 npm

确保系统中已安装 Node.js（包含 npm）。可通过官网下载并安装最新版本。安装完成后，运行以下命令验证版本：

node -v
npm -v

使用 Create React App 初始化项目

Create React App 是官方推荐的脚手架工具，可快速生成 React 项目结构。运行以下命令创建项目：

npx create-react-app my-app

其中 my-app 为项目名称，可根据需求修改。

进入项目目录

项目创建完成后，切换到项目目录：

cd my-app

启动开发服务器

运行以下命令启动开发服务器，默认在 http://localhost:3000 打开项目：

npm start

浏览器会自动打开页面，显示默认的 React 欢迎界面。

项目结构说明

生成的项目主要包含以下关键文件和目录：

• src/：存放源代码，包括主入口文件 index.js 和组件文件 App.js。
• public/：存放静态资源，如 index.html。
• package.json：定义项目依赖和脚本命令。

添加自定义组件

在 src/ 目录下创建新组件文件（如 MyComponent.js），示例代码如下：

import React from 'react';

function MyComponent() {
  return <div>Hello, React!</div>;
}

export default MyComponent;

在 App.js 中引入并使用该组件：

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

安装额外依赖

如需扩展功能（如路由、状态管理），可通过 npm 安装相关库。例如安装 React Router：

npm install react-router-dom

构建生产版本

完成开发后，运行以下命令生成优化后的生产代码：

npm run build

构建结果会保存在 build/ 目录中，可直接部署到服务器。