工具与框架
了解一些流行的工具和框架，它们可以帮助你提升在 React 生态系统中的开发体验。
由于 React 已经存在一段时间，围绕它已发展出一个丰富的生态系统，包含众多工具。从静态网站生成器（用于基于 React 构建简单到中等规模乃至复杂的静态网站），到原型设计工具，再到能够以某种形式的样式指南展示组件的工具，React 生态系统提供了大量选择。本课将简要介绍最常用的一些工具和框架。
Storybook
Storybook 是一个 UI 组件的开发环境。它允许我们浏览组件库，查看每个组件的不同状态，并进行交互式开发和测试。
Storybook 是一个支持 React、Vue.js 和 Angular 的工具，用于创建隔离的 UI 组件。Storybook 将我们的组件打包到某种沙箱环境中，使组件可以在独立的 stories（故事） 中进行开发。这些 stories 可以通过一个整洁且易于使用的界面进行展示和查看。通过将组件隔离，我们实现了高度的抽象化，也能更方便地测试并展示边界情况。
许可证： MIT（开源）
React Styleguidist
React Styleguidist 是一个带有热重载开发服务器的组件开发环境，同时提供可与团队共享的动态样式指南。
Styleguidist 与 Storybook 类似，它也允许我们基于当前应用中使用的 React 组件生成样式指南。但相比 Storybook，Styleguidist 更加隐式，可以通过 PropTypes 和 JSDoc 注释进行扩展。此外，还可以在组件目录中使用 Markdown 文件来补充组件的相关信息。
许可证： MIT（开源）
Docz
文档从未如此简单！
顾名思义，Docz 是一个以文档为核心的工具。它也可被视为一种样式指南，但完全基于 MDX。MDX 是 Markdown 格式的扩展版本，支持嵌入 React 组件。因此，我们可以用 mdx 格式描述组件，并像普通 JavaScript 文件一样导入和使用它们。
许可证： MIT（开源）
React Cosmos
用于创建可复用 React 组件的开发工具。
React Cosmos 更进一步，通过 fixtures（固定数据） 和 proxies（代理） 的概念，允许我们在组件概览中引入外部依赖，例如 React Router 或 Redux。这使得展示和测试这类组件变得更加简单。React Cosmos 打破了此前提到的三种工具所强调的组件封装性，使我们能够超越单纯的 UI 组件开发。
许可证： MIT（开源）
Gatsby
Gatsby 是一个基于 React 的免费开源框架，帮助开发者构建极速的网站和应用。
Gatsby 是一个静态网站生成器，允许我们使用 React 和 GraphQL 创建组件，并将其转换为静态 HTML 文件。Gatsby 还会生成一个 JavaScript 包，在页面加载时立即加载。加载完成后，Gatsby 使用客户端渲染，从而显著减少 HTTP 开销，使页面能更快地呈现给用户。Gatsby 起源于一个开源项目，至今仍保持开源状态。2018 年 5 月，该项目获得了 380 万美元的投资。
许可证： MIT（开源）
React-Static
React-Static 是一个快速、轻量且功能强大的渐进式静态网站生成器，基于 React 及其生态系统构建。
React-Static 同样是一个静态网站生成器，也是 Gatsby 的替代方案之一。尽管 Gatsby 可能更为知名，尤其是获得最近一轮投资之后，但 React-Static 也是一个强有力的竞争者，拥有庞大且活跃的社区支持。
许可证： MIT（开源）
Next.js
Next.js 自称为适用于多种场景的“React 框架”，涵盖从静态到动态网站、从小型公司到大型企业、从移动端到传统网页的各种需求。
Next.js 名副其实，在开发者社区中极为流行。对许多人而言，Next.js 是 Create React App 的有力替代方案。与 CRA 不同，Next.js 原生支持服务端渲染（SSR），这对于注重 SEO 优化的开发者尤为重要。
许可证： MIT（开源）