DEV Community

Cover image for The new React docs
M. Akbar Nugroho
M. Akbar Nugroho

Posted on

The new React docs

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

New React sites 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.


Open modal

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

Previous version searchbar


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

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

Redirect to release

The Learn Section

Learn section sidebar

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

...and sandbox to play!

Sandbox

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

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

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

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


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

APIs

Community & Blog Section

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

Community

Thousand claps πŸ‘ for you guys that shipping this milestone! Catch them here.

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

Blog

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 πŸ‘‹...

Top comments (2)

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘

Collapse
 
thexdev profile image
M. Akbar Nugroho

Thanks for putting my article. Appreciate it!