These days it probably doesn't even need to be mentioned anymore but obviously AI chat tools like ChatGPT, Claude and others are game changers for productivity and solving problems.
However, these resources are human created and are hopefully helpful. This doc will continue to be updated with new resources on our blog.
Neat Docs
Official React Tutorials
The official React docs are a great place to start. They are well written and cover a lot of ground. The learn section in particular is an essential starting point.
Composition vs Inheritance
This small page from the legacy React docs is still a gem. Starting to think in terms of composition really helps as you're growing a project and creating re-usable components.
State Management
Tanstack (React Query)
Probably the best client-server state management library out there. Can be used for any sort of async work. If you find yourself spending a lot of time thinking about and optimizing loading and error states in your applications it is worth
considering React Query.
TkDodo has an written a ton of detailed advice and insight on how to really get the most out of it. See Practical React Query.
XState
State management libraries like React Query, RTK Query, and SWR are great for client-server state management. For complex client state application, XState is very good.
XState is a state management and orchestration solution for JavaScript and TypeScript apps.
It uses event-driven programming, state machines, statecharts, and the actor model to handle complex logic in predictable, robust, and visual ways. XState provides a powerful and flexible way to manage application and workflow state by allowing developers to model logic as actors and state machines.
The state charts in particular make XState unique. The ability to visualize your state machines is essentially a form interactive self-documentation.
Admin
React Admin
React Admin is a frontend framework for building admin applications. It's a great way to quickly build admin interfaces for your applications. It's built on top of Material UI and is very customizable.
For data management purposes it may be a waste of time to build a custom admin interface. CRUD operations are pretty standard and React Admin is a great way to get up and running quickly. Spend time on the parts of your application that are unique and provide value to users.
Debugging
React Dev Tools
Pretty standard dev tool most people familiar with React will have used this. In many cases those people just coming into the React ecosystem may not be aware how helpful this chrome extension can be.
React Profiler
The Profiler extension comes with React Dev tools and is a great way to look at the performance of component trees. The extension is just a UI on top of the React.Profiler API. You can also import the Profiler component from react, wrap it around any component tree and get the same data if you wanted to log it or do something with the data.
With the extension you just press record and then interact with your app.
As an app grows in complexity you might start experiencing performance issues. It's really helpful to be able to see which components are causing the most re-renders and how long they are taking.
This Profiler image is from a recording of this site. The site is almost completely static and rendered on the server, so the React Profiler is pretty boring. We can see that the CustomLink component (The Delightful Engineering logo in the top left) is re-rendering very quickly.
Testing
A lot of people tend to follow the testing pyramid. The idea is that you should have a lot of unit tests, some integration tests, and a few end-to-end tests.
The idea is that unit tests run the fastest and are the cheapest to write. They should make up the bulk of your tests. Integration tests are more expensive to write and run, but they test how different parts of your application work together. End-to-end tests are the most expensive to write and run, but they test how your application works from the user's perspective.
Unit tests can tend towards becoming bloated and not very useful. It's important to keep them focused on the smallest possible unit of code.
The only thing worse than no tests is a glob of tests that are not useful.
Unit & Integration
Jest
Jest is the most popular testing library for Javascript. It's built by Facebook and is the default testing library for React.
React Testing Library
For testing hooks and components, React Testing Library is the way to go.
End to End
Cypress
Cypress is a very mature end-to-end testing framework.
Playwright
Playwright is a newer end-to-end testing framework that is built by Microsoft. It's similar to Cypress but has some unique features.
Blogs, Videos and People
Building Resilient Frontend Architecture - Monica Lent
This talk by Monica Lent in 2019 is a timeless masterpiece for frontend developers.
Among many other interesting things, she suggests "shared components" should either be in your design system or should be copy-pasted into the locations where they are meant to be used.
Matt Pocock
Matt Pocock is one of the best educators and content creators focusing heavily on Typescript. He has put out loads of Typescript stuff on his socials and offers a Total Typescript educational package that will allegedly turn you into a wizard.
Overreacted
One of the long time core maintainers of React Dan Abromov's blog overreacted is fun to read. Some interesting pieces are What are the React Team Principles and Writing Resilient Components.
Kent Dodd's Blog
Kent has written some of the best content for web developers on the internet. Among other things he's created several comprehensive course Epic Web, Epic React and Testing Javascript. He's also the creator of React Testing Library.
Top comments (0)