✏️ The 5 stages of learning React

When you’re learning React, everybody suggests “just read the docs” or “start building things”. And this is good, you do read the docs - but is it really enough? I don’t think so!

The docs don’t go over any detail when it comes to actually building projects - how should you do data fetching in your app? How do you handle server state, routing? You’re left kind of on your own.

And yes, you can start building projects - but spending weeks building a huuge project is not really that effective when learning, and not everybody has that much time to dedicate to learning React.

This is why I have defined 5 stages of learning React, that should guide you to what you should learn at each step, what skills to focus on in logical order, so you can effectively improve your skills and get momentum.

STAGE 1 - STARTER

This is where you are if you’re totally new to React. Your focus should be on understanding React fundamentals and building your first components. This is where the docs are the best resource you can find.

Graduating from the STARTER Phase

• You’ve built at least one component that uses state (shows familiarity with props, hooks, responding to events)
• You have built at least one app that fetches data from an API, displays it and allows the user to interact with it

STAGE 2 - BUILD

This is where you start building more complex components and start to build a feeling for thinking in React. You practice breaking down UIs into components, structuring your state, immutability and writing declarative code.

Graduating from the BUILD Phase

• You’ve built at least one app that uses a non trivial state structure (i.e. not string/number/array) - demonstrates ability to structure state, best practices for structuring state
• You’ve built at least one app with a non trivial component hierarchy tree - at least 3 levels deep - demonstrates ability to break down UI into components, build real world UIs

STAGE 3 - SHIP

You’re familiar with React fundamentals, but you’re still confused when it comes to building apps. How should you structure your state? How to handle routing? What is a good app architecture?

This is where you become familiar with best practices for shipping production React apps. At this point, the docs are not enough any more and you need to expand your horizon to more resources, usually related to the libraries you decide to pick (e.g. TanStack Query, React Router)

Graduating from the SHIP Phase

• You’ve built and deployed an app that allows users to create/read/update/delete a resource using a real API
• You’ve built an app that has multiple pages that the users can navigate to and bookmark (demonstrates understanding of routing)

STAGE 4 - GROW

You’re confidently building apps, but you feel like there’s still things you don’t know well in React. You want to get familiar with best practices of using React Context, effects in React and more. This is where you can deep dive into specific React concepts and where the docs are your best friend again.

Graduating from the GROW Phase

• You’ve built at least one component that interacts with some native Browser API - e.g. interval, IntersectionObserver (demonstrates understanding of reconciling the imperative nature of the browser API with the declarative nature of React)
• You’ve build at least one app that uses context and understand its strengths and pitfalls to avoid

STAGE 5 - EXPLORE

You’ve gone over all important core React concepts and know when and how to use them. You’re ready to broaden your horizons to other parts of the React ecosystem. You can learn about server side rendering and React server components, or try out client side state libraries - like Zustand or Redux.
This stage never ends 😀 Just learn new things based on what sparks your curiosity and what you need in your work.

Where would you say you are on your React journey? Hit reply and let me know!

Have a great day!
Corina