react项目如何

创建React项目

使用create-react-app工具快速初始化项目。确保已安装Node.js（建议版本≥12.0.0），运行以下命令生成新项目：

npx create-react-app my-app
cd my-app
npm start

项目结构说明

• src/：核心代码目录，包含入口文件index.js和组件文件。
• public/：静态资源目录，存放HTML模板和全局资源。
• package.json：定义项目依赖和脚本命令。

添加必要依赖

根据需求安装常用库，例如路由管理：

npm install react-router-dom

开发环境配置

• 调试工具：安装React Developer Tools浏览器插件。
• 环境变量：在项目根目录创建.env文件，使用REACT_APP_前缀定义变量：

  REACT_APP_API_URL=https://api.example.com

组件开发示例

创建一个函数组件并导出：

import React from 'react';

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

export default MyComponent;

样式管理

• CSS Modules：创建MyComponent.module.css文件，通过import styles from './MyComponent.module.css'引用。
• Sass支持：安装sass后直接使用.scss文件：

  npm install sass

状态管理

使用Context API或Redux：

// Context示例
const MyContext = React.createContext();
export default MyContext;

构建与部署

生成生产环境代码：

npm run build

将build/目录内容部署到Web服务器（如Nginx、Netlify等）。