React 配置方法

创建 src/App.jsx：

function App() {
  return (
    <div>
      <h1>Hello, 手动 React 配置!</h1>
    </div>
  );
}

export default App;

创建 src/index.js 入口：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

添加一个简单的样式文件 src/index.css：

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f0f0f0;
}

5. 添加 npm 脚本

修改 package.json 的 scripts 部分：

"scripts": {
  "start": "webpack serve --config webpack.config.js",
  "build": "webpack --mode production"
}

6. 启动开发服务器

npm start

浏览器将会打开 http://localhost:3000，显示你的第一个手动配置的 React 应用。构建生产版本时运行 npm run build。

环境变量配置

在不同方法中，环境变量的配置方式略有区别。

Create React App

• 在项目根目录创建 .env 文件，所有自定义环境变量必须以 REACT_APP_ 开头。
• 示例：REACT_APP_API_URL=https://api.example.com
• 在代码中通过 process.env.REACT_APP_API_URL 访问。

Vite

• Vite 使用 .env 文件，变量需要以 VITE_ 为前缀。
• 示例：VITE_API_URL=https://api.example.com
• 在代码中使用 import.meta.env.VITE_API_URL 访问。

手动 Webpack 项目

• 需要安装 dotenv-webpack 插件。
• 在 webpack.config.js 中添加：

const Dotenv = require('dotenv-webpack');

plugins: [
  new Dotenv()
]