Exciting news about React launched this month. The former React Docs Beta has been refined and is now the official React docs, live since march 16 at react.dev!
As with every technology, change is a constant. From the first official React docs to the modern React era — where hooks were introduced as a way to simplify state and state management. It's now been official by the React team that class components are now legacy and will be thrown into oblivion with the previous React docs to a new official home: legacy.reactjs.org.
Besides clearly separating the old from the new — this new launch promises improvements for React users, so let’s jump into the new stuff.
Going all-in with hooks and functional components
The most debatable change in the new docs is the shift towards the use of hooks and teaching functional components as the default approach — React creators argue this to be the best approach as the new readers won't have to learn React twice: once with class components and then once again with Hooks.
The docs are now divided into two main sections:
- Learn React is a self-paced course that teaches React from scratch.
- API Reference provides the details and usage examples for every React API.
Although, class components are not completely ditched as they will still be supported for “rare exceptions of remaining use cases that still require Class Components”.
Frameworks are the recommended approach
The new docs make a pretty strong claim for using a framework when starting new apps or sites entirely in React, including Gatsby, the full-stack React frameworks; Next.js and Remix, and Expo — for native apps. While traditional routes of using bundlers like Vite or CRA are strongly discouraged.
While it does makes sense due to the rising popularity of SEO optimization via Server-Side-Rendering (SSR), and because frameworks provide SSR for static sites and pages that rely on SEO. It seems to ignore the use of typical Single Page Apps with dashboard-like tools that don’t need SEO at all.
Removal of Create React App (CRA)
As mentioned before, one of the most remarkable changes is the removal of CRA from the Installation section of the new docs. Even though, once upon a time, CRA was recommended as “the best way to start building a single-page application in React”.
After the heated criticism towards CRA because of its lack of features compared to other libraries, its size, performance, and perhaps the fact that it was not actively maintained; it is now safe to say that CRA has now become legacy for react and will no longer be encouraged.
Expansion of interactive Demos and Challenges
Controversy aside, new interactive code examples and challenges have been added with tutorials updated to use function components and hooks as default. This along, with the addition of more illustrations and diagrams, was done to make React docs friendlier and easier to understand.
What to expect in the future?
As the React team acknowledges, it's been a project that took a long time to launch but the quality bar was high, and they wanted to deliver something worthy of its community. They might have teased us in their launch blog, by throwing some of the requests the community has asked to expand on, such as:
- Providing a TypeScript version for all examples;
- Creating updated performance, testing, and accessibility guides;
- Documenting React Server Components independently from the frameworks that support them;
- Working with our international community to get the new docs translated;
- Adding missing features to the new website.
As the new react.dev is out, we are thrilled with their shift in focus to catch up with further improvements.
In my personal opinion, the new React docs are a fresher and more polished face that was needed. Not only on its UI but in its content. The interactive code will let the new (and those not that much new) learners of react try it out without leaving the website. The “Escape Hatches” section is pure gold. You might not need to buy any other course to start working with React, the docs have it all!
But as the devil’s advocate, Have you played around enough with the new React docs? What do you think of the new React? Are you happy with the removal of CRA? Are you fully embracing Hooks?