当前位置：首页 > React

如何写react项目

2026-01-24 15:54:52React

创建React项目

使用Create React App（CRA）快速初始化项目，这是官方推荐的脚手架工具。运行以下命令生成项目结构：

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

项目结构组织

典型React项目目录建议如下：

src/
├── components/   # 可复用UI组件
├── pages/        # 页面级组件
├── hooks/        # 自定义Hook
├── utils/        # 工具函数
├── styles/       # 全局样式
├── assets/       # 静态资源
└── App.js        # 根组件

组件开发

函数组件示例：

import React from 'react';

const Button = ({ onClick, children }) => {
  return (
    <button 
      className="primary-btn"
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

状态管理

使用React Hooks管理组件状态：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

路由配置

使用React Router实现页面导航：

npm install react-router-dom

基本路由设置：

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

样式处理

CSS模块化方案（文件名需包含.module.css后缀）：

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

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

API调用

使用fetch或axios进行数据请求：

import { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('/api/users')
      .then(response => setUsers(response.data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

构建与部署

生成生产环境构建包：

npm run build

部署到静态服务器如Netlify或Vercel，或通过nginx配置：

server {
  listen 80;
  location / {
    root /path/to/build;
    try_files $uri /index.html;
  }
}

性能优化

代码分割实现懒加载：

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

测试策略

使用Jest和React Testing Library编写测试：

如何写react项目

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

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