react如何搭建环境
React 环境搭建方法
使用官方工具 Create React App (CRA)
安装 Node.js（版本需 ≥ 14.0.0），通过以下命令创建项目：
npx create-react-app my-app
cd my-app
npm start项目将自动启动开发服务器，默认访问 http://localhost:3000。
手动配置 Webpack
安装基础依赖：
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: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
},
devServer: {
static: path.join(__dirname, 'dist'),
port: 3000,
hot: true
}
};使用 Vite 构建
快速初始化 React 项目：
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run devVite 提供更快的启动速度和热更新。
TypeScript 支持
在 CRA 中直接使用 TypeScript 模板：
npx create-react-app my-app --template typescript或手动安装类型定义：
npm install --save-dev @types/react @types/react-dom环境变量配置
创建 .env 文件：
REACT_APP_API_URL=https://api.example.com通过 process.env.REACT_APP_API_URL 访问变量。
生产环境构建
使用以下命令生成优化后的代码：
npm run build输出文件位于 build 目录，可直接部署到服务器。
