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 來實現類似的功能。這些高級配置我們將在后續文章中詳細探討。

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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/908033.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/908033.shtml
英文地址，請注明出處：http://en.pswp.cn/news/908033.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！