当前位置：首页 > React

如何构建react项目

2026-02-11 23:55:07React

使用 Create React App 构建项目

Create React App (CRA) 是官方推荐的快速构建 React 项目的工具，无需配置构建工具。

安装 Node.js 和 npm（或 yarn）后，运行以下命令创建项目：

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

项目将自动启动开发服务器，默认地址为 http://localhost:3000。

手动配置 Webpack 和 Babel

对于需要自定义配置的项目，可以手动设置 Webpack 和 Babel。

初始化项目并安装基础依赖：

mkdir my-app
cd my-app
npm init -y
npm install react react-dom

安装 Webpack 和 Babel 相关依赖：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react

创建 webpack.config.js 文件：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
  },
};

创建 .babelrc 文件：

如何构建react项目

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

使用 Vite 构建项目

Vite 是一个更快的现代构建工具，适合开发体验要求高的项目。

安装 Vite 并创建项目：

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

Vite 会启动开发服务器，默认地址为 http://localhost:5173。

项目结构优化

合理的项目结构有助于长期维护。常见结构如下：

src/
  components/   # 可复用组件
  pages/        # 页面级组件
  assets/       # 静态资源
  styles/       # 全局样式
  utils/        # 工具函数
  App.js        # 根组件
  index.js      # 入口文件

添加路由功能

使用 React Router 实现页面导航：

如何构建react项目

npm install react-router-dom

在 App.js 中配置路由：

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

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

状态管理方案

对于复杂状态管理，可选择 Redux 或 Context API。

安装 Redux 基础包：

npm install @reduxjs/toolkit react-redux

创建 store 和 slice：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

在根组件中提供 store：

import { Provider } from 'react-redux';
import { store } from './app/store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);