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