当前位置：首页 > React

react如何配置

2026-02-26 01:34:00React

配置 React 项目的步骤

安装 Node.js 和 npm
确保系统已安装 Node.js（建议版本 16+），npm 会随 Node.js 自动安装。可通过以下命令检查版本：

node -v
npm -v

使用 Create React App 初始化项目
Create React App (CRA) 是官方推荐的脚手架工具，快速生成 React 项目结构：

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

运行后默认在 http://localhost:3000 启动开发服务器。

手动配置 Webpack 和 Babel（可选）
如需自定义构建流程，可手动配置：

安装必要依赖：

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev

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

react如何配置


配置环境变量  
在项目根目录创建 `.env` 文件定义环境变量：
```env
REACT_APP_API_URL=https://api.example.com

通过 process.env.REACT_APP_API_URL 在代码中访问。

集成 TypeScript（可选）
使用 CRA 创建 TypeScript 项目：

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

或手动添加 TypeScript 到现有项目：

react如何配置

npm install typescript @types/react @types/react-dom --save-dev

配置 ESLint 和 Prettier
安装代码规范工具：

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react --save-dev

创建 .eslintrc.json 文件：

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

生产环境构建
运行以下命令生成优化后的代码：