当前位置：首页 > React

如何做一个react 项目

2026-01-26 06:08:20React

创建 React 项目

使用 create-react-app 工具快速初始化项目，确保已安装 Node.js（版本 ≥ 14.0.0）。在终端运行以下命令：

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

项目将自动启动开发服务器并打开浏览器预览。

项目结构说明

核心文件及目录：

src/App.js：主组件入口
src/index.js：ReactDOM 渲染入口
public/index.html：HTML 模板
package.json：依赖和脚本配置

添加必要依赖

根据需求安装常用库：

npm install react-router-dom axios @mui/material @emotion/react

react-router-dom：处理路由
axios：HTTP 请求
@mui/material：Material UI 组件库

配置基础路由

在 src/App.js 中设置路由：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

状态管理方案

小型项目可使用 React Context：

import { createContext, useContext } from 'react';

const AppContext = createContext();

export function AppProvider({ children }) {
  const value = { /* 共享状态 */ };
  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

export function useApp() {
  return useContext(AppContext);
}

大型项目建议使用 Redux 或 Zustand：

npm install @reduxjs/toolkit react-redux

样式解决方案

CSS Modules（推荐）：

/* Button.module.css */
.primary {
  background: #007bff;
}

组件内引入：

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

构建与部署

生产环境构建：

npm run build

部署可选择：

Vercel：支持零配置部署
Netlify：自动化 CI/CD
GitHub Pages：静态托管

调试工具

安装 React Developer Tools 浏览器扩展：

Chrome 扩展商店搜索 "React Developer Tools"
Firefox 附加组件商店同样提供

测试配置

集成 Jest 和 Testing Library：

npm install --save-dev @testing-library/react @testing-library/jest-dom

测试示例：

如何做一个react 项目

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

test('renders title', () => {
  render(<App />);
  expect(screen.getByText(/learn react/i)).toBeInTheDocument();
});