Five Reasons to Love React's Docs

A while ago, I was working on a content management system with create-t3-app. While I was working on it, the frameworks React 18, Next 13, and tRPC 10 all came out with major breaking changes. I put the project aside, learned AstroJS, and made a couple of websites. Now, I restarted the CMS project with the recent changes. I went to React’s website and discovered their new docs were done. I read the “Learn React” section over the last day and a half. It was a fantastic experience. These were the 5 reasons.

Guide and Reference Structure

React’s guide and reference structure has a key trait - a strong separation of concerns. The guide, labeled Learn, explains how React works and how you can use it. Contrarily, the reference contains pages detailing the functions, components, and other related API elements. Each page has a syntax description, explanation of usages, and troubleshooting tips. React’s Learn section gives you a clear path to learn the language. When you are working with React, their reference makes it easy to find and understand the specific element you are working with. Two sections, each with their own purpose. As a result, learning and usage are both streamlined. I love this design.

React Hooks Emphasis

When I learned React, they were rolling out their functional components. They had a brief section on their Hooks, but that was about it. If you wanted to learn about React Functional Components on their site, you found that most of the guides used class-based components. As a result, I learned by looking through the package’s files and solving problems as I encountered them. Now, the guide is based on modern functional components. And learning what you’re doing got far simpler.

Clustered Concepts

React structures its Learn React section into an eloquent sequence of related concepts. They start with two basic units that describe how to build components and add interactivity. The third intermediate unit describes various ways to work with data in React. With the last unit, they teach you how to step outside of React for more advanced scenarios.

It’s clear they considered a variety of factors when they grouped and sequenced these concepts. As a result, the structure guides you. You don’t have to figure out what to learn next. That saves time.

Excellent Instructional Design

I’ve done a lot of research on the concept of learning itself. As a result, I can identify excellent instructional design. React’s new documentation has that. Each unit has an introductory page that details the parts within.

When you dive into those units, each one starts with an overview and a table of contents. Then, it explains ways to perform the concepts, which is followed by a summary of key concepts. Finally, they supply challenges to solidify your understanding.

Introduce what’s being taught, teach those concepts, summarize them, then offer practice. This has a positive effect on learning. It makes it easier to grasp and keep information.

Thorough Explanations

When I say React’s new documentation has thorough explanations, I mean they detailed everything. For example, the Managing State unit, they even have a page that explains how to choose your state’s structure. Every page details how React works under the hood. The teaches you how to use React and why to use it that way. They populate each page with caveats so you know the limitations upfront. Finally, they include deep-dives. Those include more advanced use cases or React details. These thorough explanations provide an excellent understanding of React.

Summary

Those are the five reasons I appreciate the new React documentation. The guide and reference structure, hooks emphasis, clustered concepts, instructional design, and thorough explanations. These things make excellent documentation. I’m a big fan of what React did with theirs.

If you’d like to talk about React or want to contact me about a job opportunity, you can visit my LinkedIn or fill out the contact form below.