Roadmap to learning React

If you're just learning React, it can be overwhelming to figure out what to learn, in what order and what practice projects are too difficult for your skill level - or just right.

Here's my suggested learning path, with recommended projects for each stage.
Good luck! 🍀

Stage 1: The fundamentals

This is where you want to get accustomed with the basics of React:

• what components are, basics of JSX, how to render components inside other components
• what state is and how to use it
• basics of data fetching
• working with lists, keys
• basics of working with forms

The point is to get familiar with core React concepts if you haven't worked with React before.

Some great beginner projects to get you started are:

Build an Accordion component

Practice React by building an Accordion component that receives a list of items with title and content and displays them as an Accordion.

reactpractice.devCorina Udrescu

Build a Public holidays app

Build a React application that shows the national holidays for the current year, for a given country. The main screen should show: * a dropdown with a list of countries * a list of public holidays for the selected country You can retrieve a list of available countries and their holidays from

reactpractice.devCorina Udrescu

Create a simple Contact Book app

Create a simple Contact Book app that allows users to manage a collection of friends’ contact details. For each person, the user should be able to save the name and city where they live. Users should be able to add, edit and delete persons. All contact details should be displayed

reactpractice.devCorina Udrescu

Stage 2: The nuances

This is where you start to get familiar with some of the "nuances" of the things you learned in the first stage:

• more complex UIs to break down into components, how to structure your state, lifting state up
• state updater function, closures in React
• working with the browser APIs: local storage, Observer API etc.
• useEffect for side effects

Some good challenges here would be:

Build an infinite scrolling list of Pokémon

Start by displaying a list of 12 Pokémon. For each Pokémon, show its name and photo. As the user scrolls, when he reaches the end of the currently visible items, show a “Loading...” text message and start loading the next page. You can use the official Poke API to fetch

reactpractice.devCorina Udrescu

Add persistence to local storage for an existing app

Here’s a simple shopping list app - https://codesandbox.io/p/sandbox/shopping-list-local-storage-76f46c. Right now if the user refreshes the page, all the data is lost. Improve the app by saving the data to local storage, so the user doesn’t lose his items. Acceptance criteria: * When the user changes the

reactpractice.devCorina Udrescu

Build a memory game

Build a memory game in React. You start with 6 images that you will display as 12 cards. By default, they are “flipped” - you only get a placeholder instead of the image. As the user clicks a “card”, flip it around, revealing the image. When the user clicks the

reactpractice.devCorina Udrescu

Stage 3: Real world beginner

This is where you'r ready to write professional React code, even as a beginner.

You no longer use just core React libraries to build things (as you did while learning), but instead you switch to production-ready libraries for data fetching, forms etc.
You can build simple CRUD apps connected to real APIs and follow good practices in the process.

Some concepts to pay attention to:

• Data fetching and CRUD with react-query (or similar libraries)
• Building multi page apps with routing
• Building complex real-world components - touch on useEffect edge cases, using intervals in React, custom hooks

Some nice challenges at this level would be:

Build a drag and drop to-do list

Build a Kanban-style to do list, where you can drag the cards from one column to the other to mark them as “To do”, “In Progress” or “Done”. * app should have three columns: “To do”, “In progress”, “Done” * users can drag and drop cards from one column to the other

reactpractice.devCorina Udrescu

Build a notes app with React Query and json server - starting from failing unit tests!

Build a Google Keep inspired Notes app using React Query for fetching the data and json-server as the backend API. * Users can add notes with a title and text content * Notes are shown on top of each other, with the latest one on top * Users can “pin” notes; pinned notes

reactpractice.devCorina Udrescu

Build the Linkedin “Add experience” form

Build a dynamic form inspired from Linkedin’s “Add experience” form. This is an advanced challenge where you get to practice building dynamic forms and using Typescript. 0:00 /0:09 1× The form should have the following fields: * job title (required) * employment type * company (required) * whether the job is current

reactpractice.devCorina Udrescu

Build a Pomodoro app

Build a React app that allows users to track a Pomodoro cycle. Here’s how a Pomodoro cycle works, in the words of Harry Guinness from the Zapier blog: You set a timer for 25 minutes, work until it’s up, then take a five-minute break—and repeat the whole process three

reactpractice.devCorina Udrescu

Stage 4: Learn on demand

Once you're here, you can just learn concepts as you need them. You have a foundation you can now start building upon, on demand.

Some topics you could consider diving deeper into are:

• React 19 features
• How to investigate performance problems with DevTools
• Advanced Context / how to avoid its pitfalls
• Using Redux RTK, Zustand or similar libraries
• NextJS, SSR

At this point, I can also highly recommend reading Nadia's Advanced React book - it explains in a very readable way how to think in React, why some things work the way they do and goes over common best practices and pitfalls to avoid.