React本身是为构建SPA（单页面应用）而设计的。
想完全用 React 构建一个新的应用或网站，我们建议选择社区中流行的、由 React 驱动的框架。
生产级的 React 框架
1. Next.js
Next.js 的页面路由 是一个全栈的 React 框架。它用途广泛，可让你创建任何规模的 React 应用程序——从大部分的静态博客到复杂的动态应用程序。
你可以 将 Next.js 应用 部署到 Node.js 或 serverless 上，也可以部署到你自己的服务器上。完全静态的 Next.js 应用 可以部署在任何支持静态服务的地方。
//要创建新的 Next.js 项目，请在终端中运行：
npx create-next-app@latest
2. Remix
Remix 是一个具有嵌套路由的全栈式 React 框架。它可以把你的应用分成嵌套部分，该嵌套部分可以并行加载数据并响应用户操作进行刷新。
当你创建一个 Remix 项目时，你需要 选择你的部署目标。你可以通过使用或编写 适配器 将 Remix 应用部署到 Node.js 或 serverless 上进行托管。
//要创建一个新的 Remix 项目，请运行：
npx create-remix
3. Gatsby
Gatsby 是一个快速的支持 CMS 网站的 React 框架。其丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务整合到一个网站的过程。
你可以 部署一个完全静态的 Gatsby 网站 到任何一个支持静态服务的地方。如果你选择使用服务器上的功能，请确保你的主机供应商支持 Gatsby 的功能。
//要创建一个新的 Gatsby 项目，请运行：
npx create-gatsby
4.Expo（用于原生应用）
Expo 是一个 React 框架，可以让你创建具有真正原生 UI 的应用，包括 Android、iOS，以及 Web 应用。它为 React Native 提供了 SDK，使原生部分更容易使用。
当你创建一个 Remix 项目时，你需要 选择你的部署目标。你可以通过使用或编写 适配器 将 Remix 应用部署到 Node.js 或 serverless 上进行托管。
用 Expo 构建应用是免费的，而且你可以不受限制地将它们提交到谷歌和苹果的应用商店。此外，Expo 还提供选择性的付费云服务。
//要创建一个新的 Expo 项目，请运行：
npx create-expo-app
5.Next.js (App Router)
Next.js 的 App Router 是对 Next.js API 的重新设计，旨在实现 React 团队的全栈架构愿景。它让你在异步组件中获取数据，这些组件甚至能在服务端构建过程中运行。
你可以将 Next.js 应用 部署到 Node.js 或 serverless 主机上，或部署到你自己的服务器上。Next.js 还支持 静态导出，不需要服务器。
在现有 React 项目中添加 TypeScript
TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。
//使用下面命令安装最新版本的 React 类型定义：
npm install @types/react @types/react-dom
然后在 tsconfig.json 中设置以下编译器选项：
{
"compilerOptions": {
"target": "es5", //表示将TypeScript代码编译为ES5语法的JavaScript代码
"lib": [ //lib字段指定了编译过程中需要包含的库文件。
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, //允许在项目中包含JavaScript文件。
"skipLibCheck": true, //表示跳过所有声明文件的类型检查，这可以提高编译速度。
"esModuleInterop": true, //允许使用import foo from 'bar'语法来导入默认导出。
"allowSyntheticDefaultImports": true, //允许在导入时使用默认导入语法，即使模块没有默认导出。
"strict": true, //启用所有严格的类型检查选项。
"forceConsistentCasingInFileNames": true, //确保引用的文件大小写与实际文件大小写一致。
"module": "esnext", //使用最新的ECMAScript模块语法。
"moduleResolution": "node", //使用Node.js风格的模块解析。
"resolveJsonModule": true, //允许从.json文件中导入数据。
"isolatedModules": true, //表示每个文件应该单独编译，这有助于在编辑时提供更好的错误提示。
"noEmit": true, //表示不输出文件，通常用于与编辑器集成以提供更好的错误和类型提示。
"jsx": "react-jsx" //这是React 17及以上版本推荐的JSX转换方式。
},
"include": [ //指定了需要编译的源文件所在的目录。在这个例子中，src目录包含了所有的源文件。
"src"
]
}
