当前位置：首页 > article >正文

React 项目初始化与搭建指南

article 2025/6/6 8:50:59

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 来实现类似的功能。这些高级配置我们将在后续文章中详细探讨。

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

React 项目初始化与搭建指南

1. 脚手架方案

1.1. Vite

1.2. create-react-app

2. 自搭建方案

2.1. Webpack 方案

2.2. Vite 方案

3. 展望

4. 补充资料

相关文章：

React 项目初始化与搭建指南

将图形可视化工具的 Python 脚本打包为 Windows 应用程序

AWS DocumentDB vs MongoDB：数据库的技术抉择

无人机军用与民用技术对比分析

刷leetcode hot100--矩阵6/1

Qt 中实现文本截断（ellipsis）的功能。Qt 提供了此方法来处理过长的文本显示问题，例如在界面中限制文本长度并添加省略号（...）

Cisco IOS XE WLC 任意文件上传漏洞复现（CVE-2025-20188）

基于ResNet残差网络优化梯度下降算法实现图像分类

群晖NAS套件历史版本资源

Docker轻松搭建Neo4j+APOC环境

定制开发开源AI智能名片S2B2C商城小程序在无界零售中的应用与行业智能升级示范研究

CppCon 2015 学习:CLANG/C2 for Windows

Spring中@Primary注解的作用与使用

Spring Boot + Elasticsearch + HBase 构建海量数据搜索系统

[zynq] Zynq Linux 环境下 AXI BRAM 控制器驱动方法详解（代码示例）

【大模型:知识图谱】--5.neo4j数据库管理（cypher语法2）

六、数据库的安全性

贪心算法应用：装箱问题(BFD算法)详解

C#学习第27天：时间和日期的处理

编程技能：格式化打印05，格式控制符

MPLAB X IDE 软件安装与卸载

windows编程实现文件拷贝

[6-01-01].第12节：字节码文件内容 - 属性表集合

基于机器学习的水量智能调度研究

深度解码：我如何用“结构进化型交互学习方法”与AI共舞，从学习小白到构建复杂认知体系

深入浅出 Scrapy：打造高效、强大的 Python 网络爬虫

ES6 Promise 状态机

Axure 与 Cursor 集成实现方案

汽车加气站操作工证考试重点

贪心算法应用：带权任务间隔调度问题详解