React 正式推出全新官方文档!

简介: React 正式推出全新官方文档!

3 月 17 日,在 React 新文档的 Beta 版上线一年之后,React 终于正式发布了全新的 React 官方文档!新文档已启用新的域名:react.dev/。 不过,目前新文档只发布了英文版,中文版并未上线。

321.webp.jpg

目前,访问 Beta 版文档(beta.reactjs.org/)和英文文档(reactjs.org/)时,都会重定向到新域名(react.dev/)。322.webp.jpg新的文档目前并未提供其他语言的文档入口。

新文档主要包含以下部分:

  • 教程和指南:提供了大量的教程和指南,帮助开发者从零开始学习React或深入研究特定主题。
  • 代码示例和演示:提供了一系列的代码示例和演示,展示了React的强大和灵活性。
  • 最佳实践和技巧:了解最新的React最佳实践和技巧,学习如何优化代码以实现更好的性能。
  • 社区论坛:与其他 React 开发人员联系,在项目中获得帮助或在社区分享专业知识。
  • 新闻和更新:第一时间了解 React 开发团队的最新版本、更新和新闻。

下面就来看看全新的 React 文档都有哪些特色!

全面拥抱 Hooks

当 2018 年发布 Hooks 时,Hooks 文档假设读者已经熟悉类组件。这有助于社区迅速采用 Hooks,但过了一段时间,旧文档就无法满足新读者的需求。新读者必须要学习两次React:先学习类组件,再学习 Hooks。

而新文档全面拥抱 Hooks,从开始就教授如何使用 Hooks 来学习 React。文档分为两个主要部分:

  • Learn React:一个自学课程,从零开始教授React。
  • API Reference:提供了每个 React API 的详细信息和使用示例。

注意:目前仍有一些类组件用例没有基于 Hook 的实现。类组件仍然得到支持,并在新站点的 Legacy API 部分进行了记录。

Learn

Learn 包含两部分:Quick Start 和 Learn React。

Quick Start

React 学习教程的入门部分,介绍了 React 的基本概念和语法,例如组件、属性和状态等。

如果希望通过实践学习,文档还提供了一个井字棋教程。该教程使用 React 构建了一个井字棋小游戏,并教授了一些开发技能。这是一个在线交互式教程,可以自己尝试修改:除了井字棋教程之外,这一部分还包含了一个 [Thinking in React](Thinking in React) 教程,帮助用户更深刻的理解 React。

上面的井字棋沙箱只是新文档众多示例的其中之一,整个网站添加了超过 600 个沙箱!可以编辑任何沙箱,或在右上角按“Fork”将其在一个单独的选项卡中打开。

Learn React

Quick Start 部分并没有详细介绍如何使用 React。可以在 Learn React 部分一步步学习 如何使用 React。这一部分包含四个模块:

  • Describing the UI:如何用组件显示信息
  • Adding Interactivity:如何响应用户输入更新屏幕
  • Managing State:如何在应用变得越来越复杂时组织逻辑
  • Escape Hatches:如何“走出”React,以及什么时候这样做最有意义

Learn 部分的大多数页面都以一些挑战结尾,以检查理解程度。 例如,以下是有关条件渲染页面的挑战:

333.webp.jpg

在每个挑战的左下角都有一个 Show solution 按钮,可以点击查看挑战的解决方案。

在教程中,通过了很多更直观的图表,以帮助快速快速理解。 例如,这是 Preserving and Resetting State 中的一张图表:

34.webp.jpg

我们还可以在新文档中看到一些插图,下面是绘制屏幕的浏览器:

35.webp.jpg

API Reference

在 API Reference 中,每个 React API 现在都有一个专用的页面。这包括各种 API:

  • 内置 Hooks,如 useState
  • 内置组件,如 <Suspense>
  • 内置浏览器组件,如 <input>
  • 面向框架的 API,例如 renderToPipeableStream
  • 其他 React API,例如 memo

每个 API 页面都至少分为两个部分:

  • Reference:通过列出其参数和返回值来描述 API 的签名。
  • Usage:显示了为什么以及如何在实践中使用此 API。它显示了 React 团队如何使用每个 API 的典型场景。

43.webp.jpg

除此之外,一些 API 页面还包括故障排除(针对常见问题)和备选方案(针对已弃用的 API)。希望这种方法将使 API Reference 不仅作为一种查找参数的方式,而且作为一种方式来查看可以使用任何给定的 API 执行的所有不同的事情——以及它如何连接到其他 API。

Community

React 拥有一个由数百万开发人员组成的社区,Community 部分包含了一些可以加入的 React 相关社区。除此之外,还包含了React 会议、React 视频、React 聚会、React 团队、React 文档贡献者、致谢以及版本控制策略。

123.webp.jpg

未来

React 团队花了很长时间才发布新文档。 希望保持 React 社区应得的高质量标准。在编写这些文档和创建所有示例时,React 团队发现了自己的一些解释中的错误、React 中的错误,甚至现在正在努力解决的 React 设计中的漏洞。希望新文档能帮助 React 团队在未来将 React 提升到一个更高的标准。

社区中还有许多对扩展网站内容和功能的要求,例如:

  • 为所有示例提供 TypeScript 版本;
  • 创建更新的性能、测试和可访问性指南;
  • 独立于支持它们的框架记录 React 服务器组件;
  • 与国际社区合作翻译新文档;
  • 向新网站添加缺少的功能(例如,此博客的 RSS)。

现在新文档已经发布了,未来 React 团队的重点就是添加新信息和进一步改进新网站。

最后,期待新文档中文版能尽快上线!

相关文章
|
7月前
|
前端开发 JavaScript API
【第54期】一文读懂React文档
【第54期】一文读懂React文档
85 1
|
7月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
690 0
|
7月前
|
前端开发 JavaScript API
React 生态系统:路由、状态管理、调试、测试、组件库、文档……
React 生态系统:路由、状态管理、调试、测试、组件库、文档……
119 0
|
前端开发
react导出word文档?
react导出word文档?
|
前端开发 JavaScript 物联网
React组件库Concis | 组件突破50+,移动端concis起步,新增英语文档,持续更新中...
对于不熟悉这个项目的小伙伴们做个简单的介绍,Concis是一个基于React+TypeScript开发的一款轻量级组件库,全面拥抱React生态,支持React新特性(hooks/redux)追求轻量的组件体积,简单的使用方式,最小的思维负担。
116 1
React组件库Concis | 组件突破50+,移动端concis起步,新增英语文档,持续更新中...
|
JavaScript API
看文档不如看源码? - React-Redux 源码解析
react-redux 的源码不太适合阅读,本身常用的 API 不多,只是 Provider 和 connect,而且都很好理解,这源码没必要还是不要看了,太绕了一点都不享受 🤦‍♂️。
|
前端开发 JavaScript 开发者
React 组件文档套件设计
在编写 React UI 组件时为了方便开发者使用组件,我们经常会使用文档系统来自动生成组件文档和定义文档。开源中比较出名的是 storybook,还有 react-styleguidist。
|
资源调度 前端开发 JavaScript
React 新的文档用到了哪些技术?
前言 https://beta.reactjs.org React 的新的文档已经 完成了 70 % 并且呼吁社区进行翻译工作。 新的文档采用了全新的架构 next.js + Tailwind CSS
389 0
react-native-storage文档介绍
react-native-storage文档介绍
190 0