The new React docs
Tags: javascript, react
Published: 2023-03-17 16:38:20

Congratulations for all React team! 🎉

{% twitter 1636441676506906626 %}

Today, the new React homepage and documentation just released and I'm very happy about it. It's a long journey story.

This post will tell you about the updates and guide you through the website.

Are you ready?

I'm very excited about this. Let's go! 😁

## The New Domain

The new documentation is moved to [react.dev](https://react.dev). Don't worry about the old one. We can still access it from [legacy.reactjs.org](https://legacy.reactjs.org).

If you previously put the old website into your post or article, it will redirect the link to the new site to void breaking changes.

## The New Navbar

![New React sites navbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4isepajwoszw3euk1w1e.png)

The new navbar looks content-first now. Long searchbar is the first thing you should see. And you are free to search anything you want.

---

![Open modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3vyyz183viaztjvkr1v.png)

The opened modal is much larger. Gives you better experience compared to the previous version.

![Previous version searchbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs8p52hgeydfzcjih4yi.png)

---

Guest what the best part? Yes, The theme switch!

![Them switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcbsz0e7sux9ai1udykv.gif)

But, the language menu is missing now... I think it's on progress? 🤷‍♂️. No worries...

---

And the GitHub link redirects you to the release page instead of the README one.

![Redirect to release](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7tgr7wh4s8rxv2xotla.gif)

## The Learn Section

![Learn section sidebar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p2srgv7yijoczuex4ih.png)

This is the most highlighted part. I'm very happy for this updates.

I was following the React community since 2019. Many of my friends and other people struggle reading the docs because it's not a beginner friendly and feels very technical 😅.

The React team heard those voices. They restructured the Quick Start and transform it. Entirely!

Now, we have more example codes...

![Example codes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgl535gea6fdj803nene.png)

...and sandbox to play!

![Sandbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmz0klkmxtjmsshzjpav.png)

The choice of words is also very easy to understand. If you read the Quick Start from start 'til the end, you should feeling it guides you step-by-step.

Plus...

![Illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjo32jmb8gu3ya53jdhv.png)

...more illustration to help you understand better! 😍

---

If you need more practical way for learning React, you can go to **Tutorial: Tic-Tac-Toe**. It will gives you many insights about how you can use React to build your UI.

![Tutorial: Tic-Tac-Toe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a63nqwo1z3t35d9cxokh.png)

This is a step-by-step and detailed tutorial. Sandbox, illustration, and codes is provided. Awesome! 😁

---

For you, if you want to explore more about React, you can read **Describing the UI**, **Adding Interactivity**, **Managing State**, and **Escape Hatches** topics.

React team is also adding difficulty badge to give you more attention to the topic.

![Intermediate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3k39vvyc38st3b124ox.png)

## The Reference Section

This sections contains all of React built-in APIs. The React team seems to put a lot of effort into this part 😅.

How come? Each API is explained in great detail and provides good and bad ways to use them.

![Built-in React hooks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbx0tcwztup1zjxl4se5.png)

---

This section expose APIs from `react`, `react-dom`. and the `Legacy APIs`.

![APIs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe8oug8y3t154ucjs614.png)

## Community & Blog Section

And the two last sections. People behind this and latest update.

![Community](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ays1ubwnqginngcaqtps.png)

Thousand claps 👏 for you guys that shipping this milestone! Catch them [here](https://react.dev/community/docs-contributors).

And never miss any news from the React team...

![Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smu6wxa3rp17nnocs8qm.png)

## Conclusion

@dan_abramov and friends (sorry guys I can't mention you one-by-one :3) have worked hard until this release. I follow Dan on Twitter and he really passionate about the docs.

The new docs is game changing. Focusing the content for all audience. More illustration, playground, use-cases, and better detailed explanation.

And the most important. Dark theme! 😅

I believe they won't stop here. Friendly and clear documentation is one of the most things React community wants.

See you guys on the next improvement 👋...