当前位置：首页 > React

如何写react项目

2026-03-11 00:30:09React

创建React项目

使用官方工具Create React App快速初始化项目。确保已安装Node.js（建议版本14+），运行以下命令生成新项目：

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

项目结构规划

src目录建议按功能模块划分：

components/ 存放可复用UI组件
pages/ 存放页面级组件
hooks/ 自定义Hook
utils/ 工具函数
assets/ 静态资源
styles/ 全局样式

组件开发

函数组件示例：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

状态管理

简单状态使用useState，复杂状态考虑useReducer或Context API：

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

路由配置

使用react-router-dom实现页面导航：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

样式方案

CSS Modules示例：

/* Button.module.css */
.primary {
  background: blue;
  color: white;
}

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click</button>;
}

数据获取

使用fetch或axios进行API调用：

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('api/data');
    const data = await response.json();
    setState(data);
  };
  fetchData();
}, []);

构建优化

生产环境构建命令：

npm run build

配置自定义webpack可通过：

npm run eject

测试方案

使用Jest和React Testing Library：

import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renders button', () => {
  render(<Button />);
  expect(screen.getByText('Click')).toBeInTheDocument();
});