React 项目初始化与搭建指南

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

1. 脚手架方案

1.1. Vite

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

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

1.2. create-react-app

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

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

2. 自搭建方案

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

2.1. Webpack 方案

1. 创建项目目录并初始化

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

2. 安装依赖

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

3. 创建项目结构

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

4. 配置 Babel

创建 .babelrc 文件：

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

5. 配置 Webpack

创建 webpack.config.js 文件：

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,},
};

6. 创建 React 组件

src/index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />, document.getElementById('root'));

src/App.js：

import React from 'react';const App = () => {return <h1>Hello, Webpack and React!</h1>;
};export default App;

7. 创建 HTML 模板

public/index.html：

<!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>

8. 更新 package.json 脚本

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

9. 启动开发服务器

npm start

2.2. Vite 方案

1. 创建项目目录并初始化

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

2. 安装 Vite 和相关依赖

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

3. 创建项目结构

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

4. 创建 Vite 配置文件

vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],server: {open: true,},
});

5. 创建 React 组件

src/main.jsx：

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：

import React from 'react';const App = () => {return <h1>Hello, Vite and React!</h1>;
};export default App;

src/index.css：

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

6. 创建 HTML 模板

public/index.html：

<!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>

7. 更新 package.json 脚本

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

8. 启动开发服务器

npm run dev

3. 展望

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