React系列一：准备入门
在上一章我们学习了基础的react语法，现在我们了解一下企业级开发
构建工具
安装一个构建工具，如 Vite、Parcel 或 rsbuild。这些构建工具提供了打包和运行源代码的功能，提供本地开发的开发服务器，以及部署应用到生产服务器的构建命令。
使用命令npm create vite@latest，选择React模板，即可创建React应用。
路由
路由决定了当用户访问特定 URL 时显示的内容或页面。你需要设置一个路由来将 URL 映射到应用程序的不同部分。你还需要处理嵌套路由、路由参数和查询参数。路由可以在代码中配置，也可以根据组件文件夹和文件结构定义。
路由是现代应用程序的核心部分，通常与数据获取（包括为整个页面预取数据以加快加载速度）、代码拆分（以最小化客户端包的大小）和页面渲染方法（决定每个页面的生成方式）集成在一起。
建议使用:
React Router
Tanstack Router
数据获取
从服务器或其他数据源获取数据是大多数应用程序的关键部分。要正确地执行此操作，需要处理加载状态、错误状态以及缓存获取的数据，这可能会很复杂。
专门构建的数据获取库为你完成数据获取和缓存的繁重工作，让你专注于应用程序需要哪些数据以及如何显示这些数据。这些库通常直接在组件中使用，但也可以集成到路由加载器中，以实现更快的预取和更好的性能，并且也可以用于服务器渲染。
请注意，直接在组件中获取数据可能会导致加载时间变慢，因为会出现网络请求瀑布效应，因此我们建议尽可能在路由加载器或服务器上预取数据！这样可以在页面显示时一次性获取页面的数据。
如果你从大多数后端或 REST 风格的 API 获取数据，我们建议使用：
React Query
SWR
RTK Query
如果你从 GraphQL API 获取数据，我们建议使用：
Apollo
Relay
代码拆分
代码拆分是将应用程序分解为可以按需加载的小型包的过程。随着每个新功能和额外依赖的增加，应用程序的代码体积会增大。应用程序可能会因为需要在使用前发送整个应用程序的所有代码而变得加载缓慢。缓存、减少功能/依赖项以及将部分代码移至服务器运行可以帮助缓解加载缓慢的问题，但如果过度使用，这些都是不完整的解决方案，可能会牺牲功能。
同样，如果你依赖使用框架的应用程序来拆分代码，可能会遇到加载速度比不进行代码拆分时更慢的情况。例如，懒加载 图表会延迟发送渲染图表所需的代码，将图表代码与应用程序的其余部分分开。Parcel 支持使用 React.lazy 进行代码拆分。然而，如果图表在初始渲染后才加载其数据，你就需要等待两次。这就是所谓的瀑布效应：与其同时获取图表的数据和发送渲染代码，你必须等待每个步骤依次完成。
通过路由拆分代码，并与打包和数据获取集成，可以减少应用程序的初始加载时间以及渲染应用程序最大可见内容所需的时间 (最大内容绘制)。
有关代码拆分的说明，请参阅你的构建工具文档:
Vite 构建优化
Parcel 代码拆分
Rsbuild 代码拆分
其他工具
代码检查
ESLint 是一款流行且开源的 JavaScript 代码检查工具。
格式化
Prettier 会根据预设配置的规则重新格式化代码，以保证代码整洁
Typescript
TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。TypeScript 天然支持 JSX——只需在项目中添加 @types/react 和 @types/react-dom 即可获得完整的 React Web 支持。
调试工具
React Developer Tools （Chrome浏览器插件）
组件库
推荐tdesign
全栈式框架
使用vite + react也是一个写react应用的方法，但是官方更推荐Next.js
Next.js 是一个功能全面的全栈 React 框架，适合构建 SEO 友好、高级功能的网站，而 Vite + React 是一个快速、灵活的前端开发工具组合，适合轻量级的前端项目。
虽然 Vite 支持 React ，但和 Next.js 的集成度、功能完整度仍有差距。
如果你特别希望用 Vite 那套体验构建网站，你可以用 Vite + react-router + SSR 插件替代 Next.js，但需要自己搭架子。Next.js 则是一体化封装好了的大框架。
Next.js 构建机制
Next.js 从一开始就使用 Webpack 作为打包工具。
Turbopack 是 Vercel 推出的下一代打包器，号称是 Webpack 的继任者。
它是用 Rust 编写的，目标是更快的性能，特别是在开发环境下
当前（截至 2025 年）Turbopack 已经逐步稳定，但 正式构建（**next build**）仍使用 Webpack，Turbopack 主要用于开发环境。
评论