> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# A roadmap to learning React by practice
- URL: https://reactpractice.dev/articles/roadmap-to-learning-react/
- Published: 2025-05-28T12:07:13.000Z
- Updated: 2026-06-01T01:57:39.000Z
- Author: Corina Udrescu
- Tags: Articles, #corina-2, #Import 2026-06-09 12:07

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](https://react.dev/learn/your-first-component?ref=reactpractice.dev) are, basics of [JSX](https://react.dev/learn/writing-markup-with-jsx?ref=reactpractice.dev), how to [render components inside other components](https://react.dev/learn/understanding-your-ui-as-a-tree?ref=reactpractice.dev)
- what [state](https://react.dev/learn/state-a-components-memory?ref=reactpractice.dev) is and how to use it
- basics of [data fetching](https://www.robinwieruch.de/react-hooks-fetch-data/?ref=reactpractice.dev)
- working with [lists, keys](https://react.dev/learn/rendering-lists?ref=reactpractice.dev)
- basics of working with [forms](https://react.dev/learn/reacting-to-input-with-state?ref=reactpractice.dev)

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 componentPractice React by building an Accordion component that receives a list of items with title and content and displays them as an Accordion.![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-26.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/publication-cover-11.jpg)](https://reactpractice.dev/exercise/build-an-accordion-component/)

[Build a Public holidays appBuild 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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-27.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/public-holidays-feature-image-1.png)](https://reactpractice.dev/exercise/build-a-public-holidays-app/)

[Create a simple Contact Book appCreate 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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-28.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/contact-book-completed.png)](https://reactpractice.dev/exercise/create-a-simple-contact-book-app/)

## 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](https://react.dev/learn/thinking-in-react?ref=reactpractice.dev), [how to structure your state](https://react.dev/learn/choosing-the-state-structure?ref=reactpractice.dev), [lifting state up](https://react.dev/learn/sharing-state-between-components?ref=reactpractice.dev)
- [state updater function](https://react.dev/reference/react/useState?ref=reactpractice.dev#updating-state-based-on-the-previous-state), closures in React
- working with the browser APIs: local storage, Observer API etc.
- useEffect for [side effects](https://react.dev/learn/synchronizing-with-effects?ref=reactpractice.dev)

Some good challenges here would be:

[Build an infinite scrolling list of PokémonStart 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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-29.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/scrolling-down-1.png)](https://reactpractice.dev/exercise/build-an-infinite-scrolling-list-of-pokemons/)

[Add persistence to local storage for an existing appHere’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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-30.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/publication-cover-12.jpg)](https://reactpractice.dev/exercise/add-persistence-to-local-storage-for-an-existing-app/)

[Build a memory gameBuild 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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-31.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/memory-game-example-2.png)](https://reactpractice.dev/exercise/build-a-memory-game/)

## 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](https://tanstack.com/query/latest/docs/framework/react/overview?ref=reactpractice.dev) (or similar libraries)
- Building multi page apps with [routing](https://reactrouter.com/start/declarative/installation?ref=reactpractice.dev)
- Building complex real-world components - touch on [useEffect edge cases](https://react.dev/learn/you-might-not-need-an-effect?ref=reactpractice.dev), using [intervals in React](https://overreacted.io/making-setinterval-declarative-with-react-hooks/?ref=reactpractice.dev), [custom hooks](https://react.dev/learn/reusing-logic-with-custom-hooks?ref=reactpractice.dev)

Some nice challenges at this level would be:

[Build a drag and drop to-do listBuild 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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-32.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/React-2024-22-1.jpg)](https://reactpractice.dev/exercise/build-a-drag-and-drop-to-do-list/)

[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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-33.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/notes-landscape-1.png)](https://reactpractice.dev/exercise/build-a-notes-app-with-react-query-and-json-server/)

[Build the Linkedin “Add experience” formBuild 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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-34.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/linkedin-add-experience-form.png)](https://reactpractice.dev/exercise/build-the-linkedin-add-experience-form/)

[Build a Pomodoro appBuild 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![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/icon/browser-35.png)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/thumbnail/pomodoro-wireframes-1-1.png)](https://reactpractice.dev/exercise/build-a-pomodoro-app/)

### 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](https://react.dev/blog/2024/12/05/react-19?ref=reactpractice.dev)
- 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](https://www.advanced-react.com/?ref=reactpractice.dev) 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.