当前位置：首页 > React

如何搭建react工程

2026-01-23 21:18:32React

使用 Create React App 搭建工程

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

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

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

项目默认包含开发服务器、Babel 转译和 Webpack 打包配置。src/index.js 是入口文件，public/index.html 是模板文件。

手动配置 Webpack + Babel

如需自定义构建流程，可手动配置：

安装基础依赖：

npm init -y
npm install react react-dom
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: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  devServer: {
    static: './dist'
  }
};

添加 TypeScript 支持

使用 Create React App 的 TypeScript 模板：

npx create-react-app my-app --template typescript

或手动配置需额外安装：

npm install --save-dev typescript @types/react @types/react-dom

创建 tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

集成 CSS 预处理

安装 Sass 支持：

npm install sass

文件可直接命名为 .scss，Webpack 会自动处理。

如需 CSS Modules，在 Webpack 配置中添加：

{
  test: /\.module\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    },
    'sass-loader'
  ]
}

配置路由

安装 React Router：

npm install 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>
  );
}

状态管理方案

Redux 安装与配置：

npm install @reduxjs/toolkit react-redux

创建 store：

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
    // 添加reducer
  }
});

通过 Provider 注入组件树：

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

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

如何搭建react工程