React新文档介绍（chatgpt翻译）
React新文档介绍（chatgpt翻译）
小程序
最近看到React新官网发布了，并且官方团队写了个文章介绍，地址如下，不过只有英文版
image.png
我试试用chatgpt翻译一下, 测试一下翻译效果，强烈建议去原文里体验一下交互式学习的效果，很棒
欢迎加我，畅聊前端 & 英语学习
tl;dr
- 新的React网站（react.dev）使用函数组件和Hooks教授现代React。
- 我们包含了图表、插图、挑战和超过600个新的交互式示例。
- 以前的React文档网站现在已经移动到legacy.reactjs.org。
新网站，新域名，新主页
首先，一些杂事。
为了庆祝新文档的发布，并更重要地清晰地区分旧内容和新内容，我们已经转移到更短的react.dev域名。旧的reactjs.org域名现在将重定向到此处。
旧版React文档现已存档在legacy.reactjs.org上。所有指向旧内容的链接都会自动重定向到那里，以避免“破坏网络”，但是该遗留网站不会再得到太多更新。
信不信由你，React很快就要十岁了。在JavaScript年份中，它就像整整一个世纪！我们已经 [刷新了 React 主页] ( https：// react.dev ) ，反映出为什么我们认为 React 是创建用户界面的绝佳方式，并更新入门指南以更突出地提及基于现代 React 的框架。
如果您还没有看过新主页，请查看！
通过Hooks全面使用现代React
当我们在2018年发布了React Hooks时，Hooks文档假定读者熟悉类组件。这有助于社区迅速采用Hooks，但是一段时间后旧的文档无法为新读者提供服务。新读者必须学习两次React：一次是类组件，然后再学习Hooks。
新文档从头开始使用Hooks教授React知识。 文档分为两个主要部分：
- 学习React 是一个自我学习的课程，从零开始教授React。
- API参考 提供每个React API的详细信息和使用示例。
让我们更仔细地看看每个部分中可以找到什么内容。
仍有少数罕见的类组件用例尚未具备基于Hook的等效性。支持类组件，并在新网站的Legacy API部分进行了记录。
快速入门
“学习”部分始于快速入门页面。它是对React简短介绍之旅。它介绍了像组件、props和state等概念的语法，但不会深入讲解如何使用它们。
如果您喜欢通过实践来学习，请推荐接下来查看Tic-Tac-Toe教程 。它将带领您构建一个小游戏并同时教授您日常所需技能。以下是您将构建的内容：
image.png
我们还想强调一下React思维——这是许多人理解React的教程。我们已经更新了这两个经典教程，使用函数组件和Hooks，所以它们像新的一样好。
上面的示例是一个沙盒。我们在整个网站中添加了很多沙盒——超过600个！您可以编辑任何沙盒，或按右上角的“Fork”按钮将其打开到单独的选项卡中。沙盒让您快速玩转React API、探索自己的想法并检查自己的理解。
逐步学习React
我们希望全世界每个人都有平等机会免费学习React。
这就是为什么Learn部分被组织成一个分章节自学课程。前两章描述了React基础知识。如果您刚接触React或者想要恢复记忆，请从这里开始：
- 描述UI 教你如何使用组件显示信息。
- 添加交互性 教你如何响应用户输入来更新屏幕。
接下来两章更加高级，并将给你更深入地洞察棘手部分：
- 管理状态 教你如何随着应用程序变得越来越复杂而组织逻辑。
- Escape Hatches 教你如何“走出” React，并在什么时候最合适进行操作。
您不必按顺序阅读这些章节。谁有时间做呢？！但是您可以选择阅读它们作为书籍形式进行阅读！
使用挑战检查理解
Learn 部分中大多数页面都以几个挑战结束，以检查您是否理解该主题内容.例如，在关于条件渲染（Conditional Rendering） 的页面中就包含以下几项挑战:
除非真正需要, 否则无需立即完成他们!
使用 ? : 显示未完成项目图标{/show-an-icon-for-incomplete-items-with--/}
使用条件运算符(cond ? a : b) ，如果 isPacked 不为 true, 列表项后面显示 ❌ .
image.png
请注意左下角的“显示解决方案”按钮。如果您想要检查自己，这很方便！
通过图表和插图建立直觉
当我们无法仅用代码和文字来解释某些内容时，我们添加了一些图表以帮助提供一些直觉。例如，以下是保留和重置状态中的一个示意图：
image.png
你还会在文档中看到一些插图 - 这是其中之一 浏览器绘制屏幕：
新的、详细的API参考
在API参考中，每个React API现在都有一个专门的页面。这包括各种各样的API：
- 内置钩子，如
useState。 - 内置组件，如
<Suspense>。 - 内置浏览器组件，如
<input>。 - 面向框架的API，如
renderToPipeableStream。 - 其他React API，如
memo。
您会注意到，每个API页面都至少分为两个部分：参考和使用。
参考通过列出其参数和返回值来描述正式的API签名。它很简洁，但如果您不熟悉该API，则可能感觉有点抽象。它描述了API的功能，但不描述如何使用它。
使用展示了为什么和如何在实践中使用这个API，就像一个同事或朋友可能会解释一样。它展示了React团队为每个API设计使用的典型场景 。 我们添加了彩色代码片段、使用不同API的示例以及您可以复制和粘贴的示例：
image.png
我们希望这种方法不仅可以作为查找参数的方式，而且可以作为查看任何给定API可以执行的所有不同操作以及它如何与其他API相关联的方式。
接下来是什么？
以上是我们小小的游览！浏览新网站，看看您喜欢或不喜欢的内容，并在匿名调查或我们的问题跟踪器中提供反馈。
我们承认，这个项目花了很长时间才推出。我们希望维护React社区应有的高质量标准。在编写这些文档和创建所有示例时，我们发现了自己解释中的错误、React中的错误，甚至是React设计中的漏洞，我们现在正在努力解决这些问题。我们希望新文档可以帮助我们将React本身的标准提高到更高的水平。
我们听到了许多用户要求我们扩展网站的内容和功能，例如：
- 为所有示例提供TypeScript版本；
- 创建更新的性能、测试和可访问性指南；
- 独立记录React服务器组件，而不是支持它们的框架；
- 与我们的国际社区合作，将新文档翻译成不同的语言；
- 为新网站添加缺少的功能(例如这个博客的RSS).
既然react.dev已经发布，我们就可以将焦点从“追赶”第三方React教育资源转移到添加新信息并进一步改进我们的新网站。
我们认为现在学习React没有比这更好的时机了。
谁参与了这个项目？
在React团队中，Rachel Nabors领导了这个项目(并提供了插图)，而Dan Abramov设计了课程。他们共同撰写了大部分内容。
当然，没有任何一个如此巨大的项目是独立完成的。我们需要感谢许多人！
最后，感谢React社区为这个努力提供的灵感。您是我们做这个工作的原因，我们希望新文档可以帮助您使用React构建任何您想要的用户界面。
结束：还是得好好学英语呀
如果你觉得文章还不错，请大家 点赞、分享、留言 下，因为这将是我持续输出更多优质文章的最强动力！
