on March 17, one year after the launch of the Beta version of the new React document, React finally officially released the new React official document! The new document enables a new domain name: react.dev/ . However, at present, the new document has only been released in English

at present When accessing Beta documents ( beta.reactjs.org/ ) and English documents ( reactjs.org/ ) Will be redirected to the new domain name ( react.dev/ ).
The new document does not currently provide access to documents in other languages.

• to access the old Chinese version of the document, you can visit zh-hans.reactjs.org/ .
• to access the old English version, you can visit legacy.reactjs.org/ .

the new document mainly contains the following sections:

• tutorials and guides : a large number of tutorials and guides are available to help developers learn React from scratch or delve into specific topics.
• Code samples and demos : provides a series of code examples and demos that demonstrate the power and flexibility of React.
• Best practices and techniques : learn the latest React best practices and techniques and learn how to optimize your code for better performance.
• Community Forum : contact other React developers to get help on the project or share expertise in the community.
• News and updates : get the latest versions, updates, and news from the React development team for the first time.

Let's take a look at the features of the new React document!

full hug Hooks

when Hooks was released in 2018, the Hooks document assumed that the reader was already familiar with class components. This helps the community adopt Hooks quickly, but after a while, old documents cannot meet the needs of new readers. New readers must learn React twice: first learn class components, then learn Hooks.

while the new document embraces Hooks, it teaches how to use Hooks to learn React from the beginning. The document is divided into two main parts:

• Learn React : a self-study course that teaches React from scratch.
• API Reference : provides details and usage examples for each React API.

Note: there are still some class component use cases that do not have an Hook-based implementation. Class components are still supported and documented in the Legacy API section of the new site.

Learn

Learn consists of two parts: Quick Start and Learn React.

Quick Start

the introductory part of the React tutorial introduces the basic concepts and syntax of React, such as components, properties, and states.

if you want to learn through practice, the document also provides a tic-tac-toe tutorial. This tutorial builds a tic-tac-toe Mini Game using React and teaches some development skills. This is an online interactive tutorial, you can try to modify it yourself.
In addition to the tic-tac-toe tutorial, this section also includes a [Thinking in React] (Thinking in React) tutorial to help users understand React more deeply.

the tic-tac-toe sandbox above is just one of many examples of new documents. More than 600 sandboxes have been added throughout the site! You can edit any sandbox, or press "Fork" in the upper right corner to open it in a separate tab.

Learn React

The

Quick Start section does not cover in detail how to use React. You can learn how to use React step by step in the Learn React section. This section contains four modules:

• Describing the UI : how to display information with components
• Adding Interactivity : how to update the screen in response to user input
• Managing State : how to organize logic as applications become more and more complex
• Escape Hatches : how to "get out" of React and when it makes the most sense

Most of the pages in the

Learn section end with challenges to check understanding. For example, the following is the challenge of conditional rendering pages:

there is a Show solution button in the lower-left corner of each challenge that you can click to see the solution to the challenge.

in the tutorial, a lot of more intuitive charts have been adopted to help you understand quickly. For example, this is a chart in Preserving and Resetting State is added

We can also see some illustrations in the new document. Here is the browser that draws the screen:

API Reference

in API Reference, each React API now has a dedicated page. This includes various API:

• built-in Hooks, such as useState .
• built-in components, such as & lt;Suspense> .
• built-in browser components, such as & lt;input> .
• Framework-oriented API, such as renderToPipeableStream .
• other React API, such as memo .

each API page is divided into at least two parts:

• Reference : describes the signature of the API by listing its parameters and return values.
• Usage : shows why and how to use this API in practice. It shows a typical scenario of how the React team uses each API.

in addition, some API pages include troubleshooting (for common problems) and alternatives (for deprecated API). Hopefully, this approach will make API Reference not only a way to find parameters, but also a way to see all the different things that can be done with any given API-- and how it connects to other API.

Community

React has a community of millions of developers, and the Community section contains some React-related communities that you can join. In addition, there are React meetings, React videos, React gatherings, React teams, React document contributors, thanks, and version control strategies.

Future

it took the React team a long time to release the new document. Hope to maintain the high quality standards that the React community deserves. While writing these documents and creating all the examples, the React team found some errors in its interpretation, errors in React, and even vulnerabilities in the React design that they are now working to resolve. It is hoped that the new documentation will help the React team raise React to a higher standard in the future.

there are also many requirements for extending the content and functionality of the website in the community, for example:

• provides TypeScript versions for all examples;
• create updated performance, testing, and accessibility guidelines;
• record React server components independently of the framework that supports them;
• work with the international community to translate new documents;
• add missing features to the new site (for example, the RSS of this blog).

now that the new document has been released, the focus of the future React team is to add new information and further improve the new website.