当前位置：首页 > React

如何用react做项目

2026-01-24 16:25:13React

创建React项目

使用官方工具create-react-app快速初始化项目。确保已安装Node.js（版本≥14.0.0）和npm/yarn。
运行以下命令生成项目结构：

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

项目结构规划

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

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

组件开发

使用函数组件搭配Hooks编写可复用模块。例如创建按钮组件：

// src/components/Button.js
import React from 'react';
import PropTypes from 'prop-types';

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

Button.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func
};

状态管理

简单项目使用useState/useReducer，复杂场景可引入Redux或Context API：

// 使用Context管理全局状态
const UserContext = React.createContext();

function App() {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ChildComponent />
    </UserContext.Provider>
  );
}

路由配置

通过react-router-dom实现页面导航：

// src/App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

样式方案

支持CSS Modules、Styled-components或TailwindCSS等多种方案。CSS Modules示例：

/* src/components/Button.module.css */
.primaryBtn {
  background: #1890ff;
  color: white;
}

import styles from './Button.module.css';
<button className={styles.primaryBtn}>Click</button>

数据获取

使用fetch或axios进行API请求，建议封装成自定义Hook：

// src/hooks/useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData);
  }, [url]);
  return { data };
}