1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# ✅ 正确：必须以 REACT_APP_ 开头
REACT_APP_API_URL=https://api.example.com
REACT_APP_TITLE=我的博客
REACT_APP_VERSION=1.0.0
REACT_APP_ENABLE_DEBUG=true

# ❌ 错误：没有前缀，读取不到
API_URL=https://api.example.com
SECRET_KEY=abc123

# ✅ 正确：数字可以（除了开头）
REACT_APP_PORTFOLIO_2024=true

# ✅ 正确：下划线可以
REACT_APP_DB_HOST_NAME=localhost

1
2
3
4
5
6
7
8

// 在 React 组件中读取环境变量
const apiUrl = process.env.REACT_APP_API_URL;
const appTitle = process.env.REACT_APP_TITLE;
const version = process.env.REACT_APP_VERSION;

console.log(apiUrl);   // 输出：https://api.example.com
console.log(appTitle); // 输出：我的博客
console.log(version);  // 输出：1.0.0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# .env.development
REACT_APP_API_URL=http://localhost:8080
REACT_APP_ENV=development
REACT_APP_DEBUG=true
REACT_APP_TITLE=我的博客（开发版）

# .env.production
REACT_APP_API_URL=https://api.example.com
REACT_APP_ENV=production
REACT_APP_DEBUG=false
REACT_APP_TITLE=我的博客

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// src/config.js
// 创建一个配置对象，方便在项目各处使用
const config = {
  apiUrl: process.env.REACT_APP_API_URL,
  env: process.env.REACT_APP_ENV,
  isDebug: process.env.REACT_APP_DEBUG === 'true',
  title: process.env.REACT_APP_TITLE,
};

export default config;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// src/App.js
import React from 'react';
import config from './config';
import './App.css';

function App() {
  return (
    <div className="App">
      {/* 根据环境变量渲染不同内容 */}
      <h1>{config.title}</h1>
      <p>当前环境：{config.env}</p>
      <p>API 地址：{config.apiUrl}</p>
      {config.isDebug && (
        <div style={{ color: 'red' }}>
          ⚠️ 当前是调试模式
        </div>
      )}
    </div>
  );
}

export default App;

1
2
3
4
5
6
7
8
9

{
  "browserslist": {
    "production": [
      ">0.2%",        // 市场占有率大于 0.2% 的浏览器
      "not dead",     // 排除官方已停止支持的浏览器（不再更新的浏览器）
      "not op_mini all"  // 排除 Opera Mini（一种无法使用 CSS 高级特性的移动浏览器）
    ]
  }
}

1
2
3
4
5
6
7
8

"production": [
  ">0.2%",           // 市场占有率 > 0.2%
  ">= 1%",           // 市场占有率 >= 1%
  "last 2 versions",  // 每个浏览器的最近两个版本
  "last 3 Chrome versions",  // Chrome 最近三个版本
  "not IE 11",        // 排除 IE 11
  "not dead"          // 排除已停止维护的浏览器
]

1
2
3
4
5
6
7
8
9

{
  "browserslist": {
    "development": [
      "last 1 chrome version",      // 开发只用最新版 Chrome
      "last 1 firefox version",    // Firefox 最新版
      "last 1 safari version"      // Safari 最新版
    ]
  }
}

1
2
3
4
5
6
7

{
  "browserslist": [
    "> 1%",           // 市场 > 1%
    "last 2 versions", // 最近两个版本
    "not dead"         // 排除已停止维护的
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "name": "my-app",
  "version": "1.0.0",
  "homepage": "https://example.com/my-app/",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

1
2
3
4
5
6
7
8

/* 部署到 GitHub Pages（用户名.github.io 仓库下的项目） */
"homepage": "https://username.github.io/my-app/"

/* 部署到子目录 */
"homepage": "https://example.com/dashboard/"

/* 部署到根路径 */
"homepage": "https://example.com/"

1
2
3
4
5
6

{
  "name": "my-app",
  "version": "1.0.0",
  "proxy": "http://localhost:8080",
  "dependencies": {}
}

1
2
3
4

// 组件中
const response = await fetch('/api/users');
// 实际发送的请求是：http://localhost:8080/api/users
// ✅ 不存在跨域问题

1

npm install http-proxy-middleware

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// src/setupProxy.js
// 注意：这个文件名必须是 setupProxy.js，不能改！
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  // 将 /api 前缀的请求代理到 localhost:8080
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',  // 目标服务器
      changeOrigin: true,               // 修改请求头中的 Origin 为目标服务器
      pathRewrite: {                    // 重写路径（可选）
        '^/api': '',                   // 把 /api 替换为空字符串
      },
    })
  );

  // 将 /auth 前缀的请求代理到另一个服务
  app.use(
    '/auth',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// src/api.js
// 请求 /api/users → http://localhost:8080/users
// 请求 /auth/login → http://localhost:3001/login

export const fetchUsers = () => fetch('/api/users').then(r => r.json());
export const login = (data) => fetch('/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
}).then(r => r.json());

1
2
3
4
5
6
7
8

/* package.json 中的 proxy 字段的局限性 */
{
  "proxy": "http://localhost:8080"
  /* ❌ 只支持将所有请求代理到同一个目标 */
  /* ❌ 不支持根据路径代理到不同服务器 */
  /* ❌ 不支持 HTTPS */
  /* 如果需要这些功能 → 使用 http-proxy-middleware */
}

1
2
3
4
5
6

# 方式1：临时设置环境变量
HTTPS=true npm start

# 方式2：永久设置（在 .env.development 文件中）
echo "HTTPS=true" >> .env.development
npm start

1
2
3
4
5

# 方式1：命令行设置
$env:HTTPS="true"; npm start

# 方式2：一行命令（PowerShell 7+ 支持 && 链式调用）
$env:HTTPS="true" && npm start

1

set HTTPS=true && npm start

1
2

// 普通导入（同步，加载 App 的时候就一起加载了）
import UserDashboard from './UserDashboard';

1
2

// 懒加载（异步，只有渲染时才加载）
const UserDashboard = React.lazy(() => import('./UserDashboard'));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// src/App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

// 懒加载各个页面组件
// 只有访问 /dashboard 时，才会加载这个 JS 文件
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Profile = lazy(() => import('./pages/Profile'));
const NotFound = lazy(() => import('./pages/NotFound'));

function App() {
  return (
    <BrowserRouter>
      {/* 导航 */}
      <nav>
        <Link to="/">首页</Link> | <Link to="/dashboard">后台</Link>
      </nav>

      {/* Suspense 组件：加载中时显示 fallback */}
      <Suspense fallback={<div>加载中，请稍候...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

1
2

// 懒加载的控制台输出
console.log(Dashboard);  // 输出：{$$typeof: Symbol(react.lazy), _ctor: {...}, _status: 1, _result: undefined}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// 路由配置
const routes = [
  {
    path: '/',
    component: lazy(() => import('./pages/Home')),
  },
  {
    path: '/about',
    component: lazy(() => import('./pages/About')),
  },
  {
    path: '/users',
    component: lazy(() => import('./pages/Users')),
  },
  {
    path: '/settings',
    component: lazy(() => import('./pages/Settings')),
  },
];

1
2
3
4
5

// 所有页面的加载优先级
// Home → About → Users → Settings
// 用户访问 / 时，只加载 Home 的代码
// 用户访问 /about 时，才加载 About 的代码
// 访问其他页面，不影响当前已加载的页面

1
2
3
4
5

// src/setupTests.js
// 这个文件在每次运行测试之前自动执行
import '@testing-library/jest-dom';
// 上面这行引入了额外的 jest-dom 匹配器
// 比如 toBeInTheDocument() 这个匹配器就来自这里

1

npm install react-app-rewired customize-cra

1
2
3
4
5
6

// config-overrides.js（放在项目根目录）
const { override, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy()  // 启用装饰器支持
);

1
2
3
4
5
6
7
8
9

// package.json
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
}

1
2

# 一条命令创建带 TypeScript 的 CRA 项目
npx create-react-app my-app --template typescript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
  /* 继承 CRA 的默认 TypeScript 配置 */
  "extends": "./tsconfig.paths.json",
  
  "compilerOptions": {
    "target": "ES2015",              /* 编译到 ES2015（会被 Browserslist 进一步处理） */
    "lib": ["dom", "dom.iterable", "esnext"],  /* 全局类型声明 */
    "allowJs": true,                 /* 允许混合使用 .js 和 .tsx 文件 */
    "skipLibCheck": true,            /* 跳过第三方库的类型检查（加速编译） */
    "esModuleInterop": true,         /* 允许使用 import 导入 CommonJS 模块 */
    "allowSyntheticDefaultImports": true,  /* 允许 default import from non-default exports */
    "strict": true,                  /* 开启严格模式（类型检查更严格） */
    "forceConsistentCasingInFileNames": true,  /* 文件名大小写必须一致 */
    "noFallthroughCasesInSwitch": true,  /* switch 必须处理所有 case */
    "module": "esnext",              /* 模块系统 */
    "moduleResolution": "node",     /* 模块解析策略 */
    "resolveJsonModule": true,       /* 允许 import .json 文件 */
    "isolatedModules": true,        /* 每个文件必须可以独立编译 */
    "noEmit": true,                  /* 不生成编译输出文件（由 CRA 的 Webpack 处理） */
    "jsx": "react-jsx"               /* JSX 处理方式 */
  },
  
  "include": ["src"],               /* 需要编译的目录 */
  "exclude": ["node_modules", "build"]  /* 排除的目录 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// src/components/Button.tsx
import React from 'react';

// 定义 Props 的类型
interface ButtonProps {
  label: string;              // 必填，字符串
  onClick?: () => void;      // 可选，一个函数，返回 void
  variant?: 'primary' | 'secondary' | 'danger';  // 联合类型
  disabled?: boolean;
}

// TypeScript 让组件的接口清晰可见
function Button({ label, onClick, variant = 'primary', disabled = false }: ButtonProps) {
  const className = `btn btn-${variant}`;
  
  return (
    <button className={className} onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

export default Button;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// src/App.tsx
import React from 'react';
import Button from './components/Button';

function App() {
  // TypeScript 会自动检查参数类型
  return (
    <div>
      <Button
        label="提交"
        variant="primary"
        onClick={() => console.log('点击了提交')}
      />
      <Button
        label="删除"
        variant="danger"
        disabled={false}
      />
      <Button
        label="不支持的参数"
        variant="unknown"  // ❌ TypeScript 报错：'unknown' is not assignable to type 'primary' | 'secondary' | 'danger'
      />
    </div>
  );
}

export default App;

1
2
3

# 安装 sass 包
npm install sass
# 安装完成后，CRA 自动识别 .scss / .sass 文件，不需要任何额外配置！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// src/styles/variables.scss

// 颜色变量
$primary-color: #61dafb;
$secondary-color: #282c34;
$text-color: #333;

// 字体
$font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

// 响应式断点
$mobile: 768px;
$tablet: 1024px;

// 混合器（Mixin）：可复用的样式块
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin mobile {
  @media (max-width: $mobile) {
    @content;  // @content 让 @mixin 可以接收 CSS 块
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// src/styles/card.scss

@import './variables.scss';

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  // 嵌套选择器
  &__title {
    font-size: 18px;
    font-weight: bold;
    color: $text-color;
    margin-bottom: 12px;
    
    // 伪类嵌套
    &:hover {
      color: $primary-color;
    }
  }
  
  &__content {
    font-size: 14px;
    line-height: 1.6;
    color: lighten($text-color, 20%);  // Sass 内置函数，把颜色变亮 20%
  }
  
  // 响应式
  @include mobile {
    padding: 12px;
    
    &__title {
      font-size: 16px;
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// src/components/Card.tsx
import React from 'react';
import '../styles/card.scss';

interface CardProps {
  title: string;
  content: string;
}

function Card({ title, content }: CardProps) {
  return (
    <div className="card">
      <h3 className="card__title">{title}</h3>
      <p className="card__content">{content}</p>
    </div>
  );
}

export default Card;