react项目如何

React 项目创建与开发指南

初始化 React 项目

使用 create-react-app 快速搭建项目：

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

my-app 为项目名称，npm start 启动开发服务器，默认访问 http://localhost:3000。

项目结构说明

• src/：核心代码目录
  • App.js：根组件
  • index.js：入口文件
• public/：静态资源（如 HTML 模板）
• package.json：依赖和脚本配置

核心开发步骤

组件开发
创建函数组件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

状态管理
使用 useState Hook：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

路由配置
安装 react-router-dom：

npm install react-router-dom

基本路由示例：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Link to="/">Home</Link>
      <Route exact path="/" component={Home} />
    </Router>
  );
}

构建与部署

生产环境构建：

npm run build

生成 build/ 目录，可通过静态服务器（如 serve）部署：

npm install -g serve
serve -s build

进阶工具推荐

• 状态管理：Redux、MobX
• 样式方案：CSS Modules、Styled-components
• 测试工具：Jest + React Testing Library

通过以上步骤可快速启动并开发 React 项目。