React’s newest documentation has arrived

After two and a half years of being in beta, the highly anticipated new React documentation has finally been released, and it's fantastic! Rachel Nabors and Dan Abramov led the effort to update the existing documentation, bringing it up-to-date with React's newest features and best practices including the use of the newly added Hooks in React 16.8.

One of the significant changes in the new documentation is the focus on functional components and hooks, which have become the norm in modern React development. The old documentation was mostly class-based, which could be confusing and frustrating for those starting with React. The new documentation's emphasis on functional components and hooks makes it much easier to learn React without any unnecessary confusion.

(Obviously it is still possible to use the class components, but it would be asinine to do so. Nobody uses them in the current environment nor do they fit into the big picture anymore.)

The original idea was that class components have state, while function components don't, since they were just dumb components. This changed with React 16.8 released in 2018 and now we mostly use functional components (with some exceptions like Error Boundaries) in modern environments. Also, going by the new documentation, those who want to learn React will only learn the functional components.

The new documentation is divided into several chapters:

• A part focusing on learning (zero to hero). In my opinion this part is simply amazing, providing highly visual and informative learning material, I utterly recommend it.
• A chapter of information on hooks, components, APIs. Once again, the documentation here is remarkably well written.
• Of community posts.
• Lastly, there is a new blog.

SPA vs framework

The future of single page applications (SPAs) raises many questions.
One significant change in the new documentation is the absence of any mention of Create React App, which was previously the official recommendation for starting a new React project.
Since it used to be the official recommendation of Meta, the "best place to start building your new React SPA", it doesn’t bode well for it being absent from the documentation. Also, with 1500 unresolved issues and 400 open pull requests, we can safely assume CRA has deceased.

Theo's personal crusade has now reached its goal, and he didn't forget to share the result on YouTube either.

Instead of CRA, the documentation suggests using frameworks like Next.js - I wrote about the advantages of the new version here -, Remix, and Expo. (even the new documentation is built with Next.js instead of CRA.) This shift probably occurred because SPAs do not include routing or data fetching solutions, which require developers to use additional libraries like TanStack Router or React Router. Not to mention the performance, which I believe is the real asset here.

The preference for frameworks over SPAs probably came with the introduction of server-side components in React v18.

However, according to the new documentation, this is not the only way, and Vite and Parcel are also mentioned if SPAs are needed. This raises the question whether SPAs are generally doomed and is this the beginning of the end?
Of course, this is not the case, but it is becoming increasingly clear that they have their own special place.

Visual turbo

The new documentation is engaging and easy to follow, featuring many diagrams and illustrations, and after each section, there are over 600 interactive examples for those who want to practice, making it an excellent resource for developers of all skill levels. However, this does not exempt us from continuously learning and experimenting during our own developments.

Not just the content changed

One small but noteworthy change is the documentation's color scheme, which was noticed by a sharp-eyed user, that the color scheme used in the documentation has also been changed. Specifically, the original #61dafb, have been replaced with the new slightly darker shade of teal #0a7ea4. I personally think this new, darker color scheme looks much more modern and aesthetically pleasing.

Summary

Overall, the new React documentation is updated, modernized, and well-organized. I highly recommend checking out the new React documentation, whether you're a seasoned React developer or just starting. The documentation is a fantastic resource that showcases the latest trends in React and offers engaging content for learning. It's well worth the time and effort to explore the documentation and take advantage of all the interactive examples and learning resources it offers.

I hope this short summary of the new React documentation was helpful, if you have any questions, feel free to leave a comment, and I'll do my best to help!