If you know JavaScript functions, arrays, objects and events, you can start learning React. Use one small project—a searchable book list—to learn components, props and state without adding a database or routing first.
If those JavaScript topics still feel unfamiliar, practice them before starting this roadmap. React uses them throughout the code.
1. Build a static version
Create a page header, a book card and a list. A component is a function that returns part of the interface. JSX lets you write that interface alongside JavaScript expressions.
Put a few fictional books in an array. Pass each book's title, author and category to the card as props. Props are values the parent provides to a child component.
Your first checkpoint is a readable list with no interaction. Change the array and confirm the page shows the new content.
2. Render lists and empty results
Use map to render the books. Give each item a stable key from the data, especially if the list can be filtered or reordered.
Add a message for an empty list. Sketch which component owns the list and which component renders a card. Keep the structure small enough to explain.
React's Thinking in React walks through this process with a product table.
3. Add search and a category filter
Store the search text and selected category in state. State holds values that need to survive between renders and change through interaction.
Calculate the visible books from those values and the original array. Do not store another copy of the filtered list unless you have a specific reason; duplicate state can drift out of sync.
Use a labeled input for search and native controls for the filter. Test with a keyboard. A query with no matches should show a useful message rather than a blank area.
4. Add one form
Let someone add a book to the in-memory list. Show an error for an empty title and preserve what they typed while they correct it.
With a controlled input, its value comes from state and its change handler updates that state. Check that the form behaves correctly after several submissions. A refresh can reset the list at this stage.
5. Load data and handle failure
Once local state makes sense, load a small JSON dataset. Show loading, error, empty and successful states. Handle an older request finishing after a newer one so it cannot overwrite the current result.
Learn Effects as a way to synchronize with an external system. Filtering an existing array is a calculation, so it usually belongs in render logic rather than an Effect. See React's Effect guide.
Before adding more libraries
Explain how a typed character reaches state, changes the filtered result and updates the list. Then add one feature without duplicating data in state.
When you can do that, explore testing, routing, TypeScript and deployment as separate next steps. Keep the book list as a project you understand rather than expanding it until every part depends on a new tool.
Start with the official React Quick Start.
Top comments (0)