M. Akbar Nugroho

Posted on Mar 17, 2023

The new React docs

#javascript #react

Congratulations for all React team! 🎉

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. Don't worry about the old one. We can still access it from 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

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.

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

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

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.

The Learn Section

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...

...and sandbox to play!

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...

...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.

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.

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.

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

Community & Blog Section

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

Thousand claps 👏 for you guys that shipping this milestone! Catch them here.

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

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 👋...