1. 使用Next.js (App Router)#

Next.js 的 App Router 是一个 React 框架，充分利用了 React 的架构，支持全栈 React 应用。

1
npx create-next-app@latest

2. Expo(for native apps)#

Expo 是一个 React 框架，让你可以创建支持真正原生 UI 的通用 Android、iOS 和 Web 应用。它为 React Native 提供了一个 SDK，让原生部分更易于使用。要创建一个新的 Expo 项目，运行：

1
npx create-expo-app@latest

3. vite#

Vite 是一款速度极快的前端构建工具,为下一代 Web 应用程序提供支持

1
npm create vite@latest my-app -- --template react-ts

Vite 采用约定式设计，开箱即提供合理的默认配置。它拥有丰富的插件生态系统，能够支持快速热更新、JSX、Babel/SWC 等常见功能。

4.Rsbuild#

Rsbuild 是一个基于 Rspack 的构建工具

1
npx create-rsbuild --template react

Rsbuild 内置了对 React 特性的支持，如快速刷新、JSX、TypeScript 和样式。

面试可能会问到的一些问题:#

• public公共目录和assets静态资源有什么区别?

回答: public目录的资源编译之后会存放到根目录，而静态资源assets是会随着项目一起打包的，public则不会被编译。

• 为什么main.tsx的document.getElementById(‘root’)!要加一个!

回答:因为document.getElementById(‘root’)返回可能为空，这时候就会报错。!是非空断言，告诉编辑器这个表达式不会为空。