当前位置：首页 > React

如何新建react项目

2026-01-23 19:25:32React

使用 Create React App 创建项目

安装 Node.js（包含 npm 或 yarn）后，通过以下命令创建新项目：

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

使用 Vite 创建项目

Vite 是更快的现代构建工具，创建 React 项目命令如下：

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

手动配置 Webpack 项目

适合需要自定义配置的高级用户：

如何新建react项目

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

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-react html-webpack-plugin

创建 webpack.config.js 配置文件

如何新建react项目


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', options: { presets: ['@babel/preset-react'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ] };


### TypeScript 模板创建

创建支持 TypeScript 的 React 项目：

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

或使用 Vite：

npm create vite@latest my-ts-app --template react-ts



### 项目结构说明

典型 React 项目包含：
- public/ 静态文件目录
- src/ 主代码目录
  - App.js 主组件
  - index.js 入口文件
- package.json 依赖管理
- node_modules/ 依赖目录

注意：使用 Create React App 或 Vite 会自动生成合理项目结构，手动配置需要自行创建这些目录和文件。