如何搭建react工程
使用 Create React App 搭建工程
Create React App (CRA) 是官方推荐的快速搭建 React 项目的工具，无需配置构建工具链。
安装 Node.js 和 npm（或 yarn）后，运行以下命令创建新项目：
npx create-react-app my-app
cd my-app
npm start项目默认包含开发服务器、Babel 转译和 Webpack 打包配置。src/index.js 是入口文件，public/index.html 是模板文件。
手动配置 Webpack + Babel
如需自定义构建流程，可手动配置：
安装基础依赖：
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react创建 webpack.config.js：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
},
devServer: {
static: './dist'
}
};添加 TypeScript 支持
使用 Create React App 的 TypeScript 模板：
npx create-react-app my-app --template typescript或手动配置需额外安装：
npm install --save-dev typescript @types/react @types/react-dom创建 tsconfig.json：
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}集成 CSS 预处理
安装 Sass 支持：
npm install sass文件可直接命名为 .scss，Webpack 会自动处理。
如需 CSS Modules，在 Webpack 配置中添加：
{
test: /\.module\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
},
'sass-loader'
]
}配置路由
安装 React Router：
npm install react-router-dom基础路由配置示例：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}状态管理方案
Redux 安装与配置：
npm install @reduxjs/toolkit react-redux创建 store：
import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
reducer: {
// 添加reducer
}
});通过 Provider 注入组件树：
import { Provider } from 'react-redux';
import { store } from './app/store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
