React 项目初始化与搭建指南

React 项目初始化有多种方式，可以选择已有的脚手架工具快速创建项目，也可以自定义项目结构并使用构建工具实现项目的构建打包流程。

1. 脚手架方案

1.1. Vite

通过 Vite 创建 React 项目非常简单，只需一行命令即可完成。Vite 的工程初始化脚手架会自动处理所有创建工作。

javascript 复制代码

pnpm create vite my-app --template react-ts

1.2. create-react-app

create-react-app 是 React 官方提供的基于 webpack 的脚手架工具，其核心逻辑封装在 react-scripts 包中。它简化了 React 项目的初始化过程，开发者只需执行一行命令：

javascript 复制代码

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

2. 自搭建方案

除了使用脚手架外，我们还可以根据业务需求自定义搭建 React 工程。下面分别介绍基于 Webpack 和 Vite 的搭建流程。

2.1. Webpack 方案

javascript 复制代码

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

安装依赖

javascript 复制代码

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server 
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react 
npm install html-webpack-plugin css-loader style-loader

创建项目结构

javascript 复制代码

my-react-app/
├── src/
│   ├── index.js
│   └── App.js
├── public/
│   └── index.html
├── webpack.config.js
├── .babelrc
└── package.json

配置 Babel

创建 .babelrc 文件：

javascript 复制代码

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

配置 Webpack

创建 webpack.config.js 文件：

javascript 复制代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

创建 React 组件

src/index.js：

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

src/App.js：

javascript 复制代码

import React from 'react';

const App = () => {
  return <h1>Hello, Webpack and React!</h1>;
};

export default App;

创建 HTML 模板

public/index.html：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

更新 package.json 脚本

javascript 复制代码

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

启动开发服务器

javascript 复制代码

npm start

2.2. Vite 方案

javascript 复制代码

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

安装 Vite 和相关依赖

javascript 复制代码

npm install react react-dom
npm install --save-dev vite @vitejs/plugin-react

创建项目结构

javascript 复制代码

my-react-app/
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   └── index.css
├── public/
│   └── index.html
├── vite.config.js
├── package.json
└── .gitignore

创建 Vite 配置文件

vite.config.js：

javascript 复制代码

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    open: true,
  },
});

创建 React 组件

src/main.jsx：

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

src/App.jsx：

javascript 复制代码

import React from 'react';

const App = () => {
  return <h1>Hello, Vite and React!</h1>;
};

export default App;

src/index.css：

css 复制代码

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f6f6f0;
}

创建 HTML 模板

public/index.html：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>

更新 package.json 脚本

javascript 复制代码

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

启动开发服务器

javascript 复制代码

npm run dev

3. 展望

本文介绍了基于 Vite 和 Webpack 搭建 React 基础项目结构的完整流程。对于更复杂的构建配置，可以在此基础上通过添加相应的配置实现。Webpack 通过 loader 和 plugin 来增强构建能力，而 Vite 则通过 plugin 来实现类似的功能。这些高级配置我们将在后续文章中详细探讨。

4. 补充资料

Vite 初始化 React: https://vitejs.dev/guide/#scaffolding-your-first-vite-project

Webpack 初始化 React: https://github.com/facebookcreate-react-app

React 基础架构社区方案: https://github.com/kriasoft/react-starter-kit

React 中文官网: https://github.com/kriasoft/react-starter-kit

React Hooks 套件: https://github.com/streamich/react-use