当海风翻页时

官方现在怎么推荐#

官方给的顺序是框架优先：先看有没有合适的全栈框架，没有再自己拼构建工具（Creating a React App）。

框架有三个：Next.js 的 App Router、React Router v7、Expo（做原生 App）。官方说它们都支持客户端渲染、单页应用与静态生成，所以不一定要用它的服务端能力。

要自己搭，官方推荐 Vite、Parcel 或 Rsbuild。Metro 只给 React Native 用。

Create React App 已经弃用#

2025-02-14 官方宣布弃用 CRA（公告）。它进入维护模式，老项目还能继续跑，新项目不该再从它开始。

所以还在用 npx create-react-app 开头的教程已经过期。看到这类文章，把命令换成下面 Vite 那条即可。

四条命令#

1
# 全栈框架
2
npx create-next-app@latest        # Next.js，App Router
3
npx create-expo-app@latest        # Expo，原生 App
4

5
# 从零构建
6
npm create vite@latest my-app -- --template react-ts
7
npx create-rsbuild --template react

本文剩下的部分都以 Vite 那条命令生成的 react-ts 模板为例。

生成的项目里先认清四样#

index.html 是入口 HTML，里面只有一个空的 <div id="root">。

src/main.tsx 把根组件挂到这个 div 上，用的是 createRoot。React 18 之前的写法是 ReactDOM.render，已经移除，遇到旧代码要换掉。

src/App.tsx 是根组件，页面从它开始渲染。

vite.config.ts 管构建，tsconfig.json 管类型检查。

模板版本不同，细枝末节会变，比如 ESLint 配置在新模板里是 eslint.config.js、在旧模板里是 .eslintrc.cjs。别背文件清单，看脚手架实际生成了什么。

public 与 src/assets 的分工#

Vite 官方把两者的边界写得很清楚（Static Asset Handling）：

• public/ 里的文件按原样复制到产物根目录，文件名不变，不参与打包。引用时用根路径，例如 public/icon.png 在代码里写 /icon.png。
• src/assets/ 里的文件是导入使用的，会进构建的资源图，拿到带哈希的文件名，也可能被优化；小于 assetsInlineLimit 的还会内联成 base64。

一句话记法：public 不参与打包，assets 参与。Vite 的建议是优先用导入，除非确实需要文件名不变、不被哈希那几条保证。

main.tsx 里那个感叹号#

1
createRoot(document.getElementById('root')!).render(<App />)

! 是 TypeScript 的非空断言。getElementById 的返回类型里含 null，断言告诉编译器这里一定有值。去掉它类型检查就报错。

package.json 里的命令#

1
{
2
  "scripts": {
3
    "dev": "vite",
4
    "build": "tsc && vite build",
5
    "preview": "vite preview"
6
  }
7
}

dev 起开发服务器，build 先做类型检查再打包，preview 在本地预览构建产物。模板里通常还有一条 lint，具体命令随模板版本变化。