React中文网课程笔记3—创建

概述

React 从诞生之初就是可被渐进式使用的。

如果开发者想开始一个新的 React 应用，可以用框架创建一个 React 应用；
如果开发者倾向于自己配置框架，或者只是单纯想学习配置 React 应用的基础知识，可以参照从零构建一个 React 应用；
开发者也可以添加 React 到一个已有的项目。

除 React 中文网外，还存在许多支持 React 的在线代码编辑器： CodeSandbox，StackBlitz，或者 CodePen。

创建一个 React 应用

如果开发者想用 React 构建一个新的应用或网站，推荐从框架开始。本章节列出的所有框架都支持客户端渲染（CSR）、单页应用（SPA）和静态站点生成（SSG）。这些应用可以部署到 CDN 或静态托管服务（无需服务器）。此外，这些框架允许你根据实际需求，针对特定路由单独启用服务端渲染。

这些推荐的框架支持你在生产环境中部署和扩展应用所需的所有功能。它们集成了 React 的最新特性，并充分利用了 React 的架构。

全栈框架

Next.js (App Router)

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

Terminal命令：

复制代码

npx create-next-app@latest

Next.js 由 Vercel 维护。你可以将 Next.js 应用部署到任何支持 Node.js 或 Docker 容器的托管平台，或者部署到你自己的服务器。 Next.js 也支持静态导出无需服务器。

React Router (v7)

React Router 是 React 最流行的路由库，可以与 Vite 结合创建一个全栈 React 框架 。它强调标准的 Web API 并提供了多个可部署的模板适用于各种 JavaScript 运行时和平台。

要创建一个新的 React Router 框架项目，请运行:

Terminal命令：

复制代码

npx create-react-router@latest

React Router 由 Shopify 维护。

Expo (for native apps)

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

Terminal命令：

复制代码

npx create-expo-app@latest

如果你是 Expo 新手，请查看 Expo 教程.

Expo 由 Expo 公司维护。使用 Expo 构建应用是免费的，你可以将应用提交到 Google 和 Apple 应用商店，没有任何限制。Expo 还提供可选的付费云服务。

其他框架

还有一些新兴的框架正在努力实现我们的全栈 React 愿景：

TanStack Start (Beta): TanStack Start 是一个由 TanStack Router 驱动的全栈 React 框架。它使用 Nitro 和 Vite 等工具提供完整的文档服务端渲染、流式传输、服务器函数、打包等功能。
RedwoodSDK: Redwood 是一个全栈 React 框架，带有许多预装的包和配置，方便构建全栈 Web 应用。

react中常见概念解释

客户端渲染（CSR - Client-Side Rendering）

含义：在浏览器中运行JavaScript来动态生成页面内容

服务器只发送一个几乎空的HTML文件
浏览器下载JavaScript后，由React在客户端渲染整个应用
优点：首次加载后，页面切换非常快，用户体验好
缺点：首次加载时间长，SEO不友好

html 复制代码

<!-- 服务器返回的HTML -->
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div> <!-- 空容器 -->
    <script src="app.js"></script> <!-- React在这里渲染 -->
  </body>
</html>

单页应用（SPA - Single Page Application）

含义：整个应用只有一个HTML页面，通过JavaScript动态更新内容

通常使用CSR技术实现
页面切换时不重新加载整个页面
路由在客户端处理
例子：Gmail、Google Docs、React Router构建的应用

静态站点生成（SSG - Static Site Generation）

含义：在构建时预先生成静态HTML文件

开发阶段就生成所有页面的完整HTML
用户访问时直接返回静态文件
优点：加载速度快，SEO优秀，安全性高
缺点：不适合频繁更新的内容

TypeScript 复制代码

// Next.js中的SSG示例
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data }, // 构建时生成页面
  };
}

CDN（内容分发网络）

含义：分布式服务器网络，缓存静态资源到全球各地

用户从最近的服务器获取资源
减少延迟，提高加载速度
通常托管：CSS、JS、图片、字体等静态文件

复制代码

用户 → 最近的CDN节点（缓存了文件）
      ↓
如果未缓存 → 源服务器

静态托管服务

含义：专门托管静态文件的云服务

自动配置CDN
支持自定义域名、SSL证书
例子：Vercel、Netlify、GitHub Pages、AWS S3 + CloudFront

它们如何协同工作

传统CSR/SPA流程

复制代码

用户请求 → 静态托管服务 → 返回空HTML + JS
          ↓
    浏览器执行JS → 渲染页面

SSG + CDN流程

复制代码

构建时：React应用 → 生成静态HTML/CSS/JS
部署时：上传到静态托管服务
访问时：用户 → CDN → 直接返回预渲染的HTML

现代混合方案（如Next.js）

复制代码

// 可以混合使用多种渲染策略
- 首页：SSG（预生成）
- 博客文章：SSG（构建时生成）
- 用户仪表盘：CSR（客户端渲染）
- 产品列表：SSR（服务器端渲染）

选择建议

场景	推荐方案	原因
公司官网、博客	SSG + CDN	SEO友好，加载快
后台管理系统	CSR/SPA	交互复杂，SEO不重要
电商网站	混合方案	首页SSG，产品页SSR，购物车CSR
文档网站	SSG + CDN	内容静态，需要快速访问

实际部署示例

复制代码

开发阶段：
React代码 → 构建（npm run build）→ 生成静态文件

部署阶段：
静态文件 → 上传到Vercel/Netlify → 自动配置CDN

用户访问：
https://your-site.com → CDN边缘节点 → 立即返回HTML

这些技术通常组合使用，现代框架如Next.js、Gatsby让这些模式可以轻松混合应用。