React 之如何启动一个新的项目（六）

React本身是为构建SPA（单页面应用）而设计的。
想完全用 React 构建一个新的应用或网站，我们建议选择社区中流行的、由 React 驱动的框架。

生产级的 React 框架

1. Next.js

Next.js 的页面路由是一个全栈的 React 框架。它用途广泛，可让你创建任何规模的 React 应用程序------从大部分的静态博客到复杂的动态应用程序。
你可以将 Next.js 应用部署到 Node.js 或 serverless 上，也可以部署到你自己的服务器上。完全静态的 Next.js 应用可以部署在任何支持静态服务的地方。

javascript 复制代码

//要创建新的 Next.js 项目，请在终端中运行：
npx create-next-app@latest

2. Remix

Remix 是一个具有嵌套路由的全栈式 React 框架。它可以把你的应用分成嵌套部分，该嵌套部分可以并行加载数据并响应用户操作进行刷新。
当你创建一个 Remix 项目时，你需要选择你的部署目标。你可以通过使用或编写适配器将 Remix 应用部署到 Node.js 或 serverless 上进行托管。

javascript 复制代码

//要创建一个新的 Remix 项目，请运行：
npx create-remix

3. Gatsby

Gatsby 是一个快速的支持 CMS 网站的 React 框架。其丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务整合到一个网站的过程。
你可以部署一个完全静态的 Gatsby 网站到任何一个支持静态服务的地方。如果你选择使用服务器上的功能，请确保你的主机供应商支持 Gatsby 的功能。

javascript 复制代码

//要创建一个新的 Gatsby 项目，请运行：
npx create-gatsby

4.Expo（用于原生应用）

Expo 是一个 React 框架，可以让你创建具有真正原生 UI 的应用，包括 Android、iOS，以及 Web 应用。它为 React Native 提供了 SDK，使原生部分更容易使用。
当你创建一个 Remix 项目时，你需要选择你的部署目标。你可以通过使用或编写适配器将 Remix 应用部署到 Node.js 或 serverless 上进行托管。
用 Expo 构建应用是免费的，而且你可以不受限制地将它们提交到谷歌和苹果的应用商店。此外，Expo 还提供选择性的付费云服务。

javascript 复制代码

//要创建一个新的 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 代码添加类型定义的常用方法。

javascript 复制代码

//使用下面命令安装最新版本的 React 类型定义：
npm install @types/react @types/react-dom

然后在 tsconfig.json 中设置以下编译器选项：

javascript 复制代码

{
  "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"
  ]
}

React 之 如何启动一个新的项目（六）

生产级的 React 框架

在现有 React 项目中添加 TypeScript

React 之如何启动一个新的项目（六）