React Syllabus for Beginners

A beginner React roadmap in the order worth learning it: components, state, Effects, and a small accessible capstone after HTML, CSS, and JavaScript.

TechWebster26 Oct 202611 min readDiscussion on DEV (opens in a new tab)

Comfortable building a page with HTML, CSS, and JavaScript? React is the next step when you want the interface built from pieces that stay in step with the data.

This syllabus follows the HTML, CSS, and JavaScript roadmaps. Work through the topics in order, try the checkpoints, and build one feature at a time. It is a learning plan. Reading the list does not make a project production-ready.

Carriage, the stage you are onTool, seated at that stationToken, a stage you have passedThe line will not skip a station. Sections 1–7 seat the shell, 8–14 the pin, 15–19 the plug, and 20–24 the dial. Leave a station only when you can explain its checkpoint.

Before You Start

You should be able to use JavaScript functions, arrays, objects, destructuring, modules, events, promises, and async/await. Practice mapping and filtering arrays without React first. You do not need a Node.js backend before you start.

When those foundations need more practice, go back to the JavaScript syllabus. The line-by-line post shows how a program actually runs.

The Learning Order

Stage	Sections	Try this before moving on
1. Components and rendering	1–7	Build a static book list from data and explain each component's props.
2. Interaction and state	8–14	Add search, filters, and a validated form without duplicating state.
3. External systems and reusable logic	15–19	Handle loading and failure, clean up an Effect, and explain when a ref or custom Hook helps.
4. Quality, delivery, and next steps	20–24	Test a user journey and finish a small accessible capstone before adding ecosystem tools.

The later topics build on the earlier ones. Return to a checkpoint when you cannot yet explain the result. On the figure, that is the difference between a tool waiting in the air and a part that has seated.

1. Introduction to React

What a UI library does, and how React differs from changing the DOM by hand
Describing the interface from data
Components, props, and state, at a high level
Core React versus frameworks, routing libraries, and build tools

React does not replace HTML, CSS, or JavaScript. Start with the official React Quick Start (opens in a new tab).

2. Setting Up Your Workspace

A code editor, a modern browser, and the browser developer tools
Trying examples in the sandboxes in React's documentation
For local learning, a project created with a current build tool such as Vite
Reading the generated files, the package scripts, and the development-server output
Telling a development build from a production build

Use React's setup guidance (opens in a new tab) to choose an approach. React recommends a framework for new production apps. The from-scratch guide (opens in a new tab) also supports learning the basics with a build tool. Follow Vite's current instructions (opens in a new tab) if you take that route. This syllabus does not depend on Create React App.

Practice: run a starter app, change the heading, and find the error when you deliberately break a component name.

3. JSX and Rendering Markup

Writing markup in JSX and embedding JavaScript expressions
Closing tags, returning one enclosing structure, and using fragments
className, and JavaScript objects for inline styles
Keeping render logic predictable and free of side effects

Practice: rebuild a simple profile card with a heading, an image, and a short description.

4. Components and File Organization

Function components, and capitalized component names
Defining a component separately from rendering it
Nesting components, and organizing imports and exports
Splitting by responsibility, rather than turning every line into a component

Practice: draw a component tree for a page header, a search bar, a book list, and a book card.

5. Props and Composition

Passing strings, numbers, objects, and callbacks to children
Reading props without modifying them
Using children to compose a reusable layout
Keeping data flow understandable from parent to child

Practice: render different book cards with the same component. Explain which values come from props.

6. Lists and Stable Keys

Transforming arrays into elements with map
Giving sibling items stable keys from their data
Avoiding array-index keys when items can move, appear, or disappear
Understanding that keys identify items, and do not become ordinary child props

Practice: reorder editable rows and check that each edit stays with its record. Read the official list-key guidance (opens in a new tab).

7. Conditional UI and Styling

Showing different output with conditions
Rendering a useful empty state instead of a blank area
Applying styles from state or props
Reusing responsive CSS and semantic HTML

Checkpoint: build the static book-list interface before adding interaction. Thinking in React (opens in a new tab) demonstrates that sequence.

8. Events and Handlers

Passing an event handler, rather than calling it during render
Responding to clicks, changes, and form submissions
Passing callback props to report what the user did
Default browser behavior and event propagation

Practice: add a button that reports which book was selected.

9. State with useState

Adding state for values that change through interaction
Reading state as a snapshot of one render
Requesting an update with the setter
Using an updater function when the next value depends on the previous one

Practice: build a counter with increase, decrease, and reset. Explain why changing an ordinary variable does not update the interface. See Adding Interactivity (opens in a new tab).

10. Updating Objects and Arrays

Treating objects and arrays in state as read-only
Producing updated copies rather than mutating existing state
Adding, removing, and editing items by stable id
Copying nested values when the update requires it

Practice: toggle a book's completed status and remove a book without changing the previous array.

11. Controlled Forms and Validation

Connecting text inputs, checkboxes, and selects to state
Keeping a value controlled, rather than switching it between controlled and uncontrolled
Handling submission, and keeping what the user typed when validation fails
Associating labels, instructions, and errors with the controls

Practice: add a book with a required title and a category. Check keyboard submission and a second submit. Client validation helps the person using the form. A backend still has to validate and authorize the request. See React's input reference (opens in a new tab).

12. Choosing and Deriving State

Storing the smallest useful representation of the interaction
Calculating filtered lists and totals from existing data
Avoiding a second copy of state that can fall out of sync
Representing loading or submission without contradictory flags

Practice: store the search text and the category, then calculate the visible books during render. Do not add an Effect just to copy that filtered list into state. See You Might Not Need an Effect (opens in a new tab).

Finding the closest common parent that needs the data
Lifting shared state up, and passing values and callbacks down
Keeping one source of truth for a shared value
Distinguishing local editing state from shared application data

Practice: keep a results count and the book list synchronized from the same filter values. Review Managing State (opens in a new tab).

14. State Identity and the Rules of Hooks

How position, component type, and keys affect whether state is preserved
Resetting a small editor on purpose when its selected record changes
Understanding that removing a component discards its local state
Calling Hooks such as useState at the top level of components or custom Hooks

Practice: switch records and decide which edits should survive. Read Preserving and Resetting State (opens in a new tab) and the Rules of Hooks (opens in a new tab). Keep the Hooks lint rules enabled.

15. Effects for External Synchronization

Using an Effect when synchronizing with something outside React
Distinguishing a render calculation, a user event, and an Effect
Listing dependencies honestly, and cleaning up subscriptions or timers
Reading Strict Mode's development checks, rather than disabling them to hide a cleanup bug

Practice: subscribe to a browser event and remove the listener in cleanup. Filtering data and handling a click usually do not need an Effect. Follow Synchronizing with Effects (opens in a new tab).

16. Loading Data and Handling Failure

Showing loading, error, empty, and successful states
Checking HTTP status and the shape of the data before using it
Stopping a stale response from overwriting a newer one
Offering a useful retry

Practice: load a small public JSON dataset and simulate a slow request, a failed request, and no results. A simple Effect-based fetch can teach the lifecycle of a request. Production frameworks and data libraries may handle loading, caching, and coordination better. Keep private credentials out of browser code.

17. Refs and DOM Access

Using useRef for a value that should not trigger a render
Reaching a DOM node when focus, scrolling, or measurement requires it
Understanding why changing a ref does not update the UI
Avoiding manual changes to DOM that React is already managing

Practice: focus the search input from a clearly labeled button. Learn these as escape hatches (opens in a new tab), not as the default way to move data.

18. Reusing Logic with Custom Hooks

Extracting repeated stateful logic after its behavior is understood
Naming custom Hooks with use
Keeping each Hook's job specific
Understanding that sharing a Hook does not automatically share its state between callers

Practice: extract a small online-status subscription used by two components, and explain the setup and the cleanup. Use Reusing Logic with Custom Hooks (opens in a new tab) as a reference.

19. Reducers and Context When Needed

Consolidating related state transitions with useReducer
Keeping reducer logic pure, and testing transitions on their own
Passing shared values deeper with context when props become cumbersome
Avoiding global context for every local input

Practice: move book-editing actions into a reducer only when that makes them clearer. A small list can stay in useState. See Scaling Up with Reducer and Context (opens in a new tab).

20. Accessibility and Responsive Interaction

Using real links, buttons, headings, and labeled controls
Testing the full interaction with a keyboard
Moving focus after an important change, and communicating status or errors
Checking narrow layouts, zoom, and readable content

Practice: add a book and find it using only the keyboard. Check the no-results message, and make sure the result does not depend on color alone.

21. Debugging and Testing Basics

Reading component errors, warnings, and network failures
Inspecting props and state with React Developer Tools
Testing visible behavior rather than private component details
Starting with a test runner and a component-testing library that fit the project

Practice: test searching, no matches, an invalid submission, and a successful addition. Include a loading or failure case when the screen fetches data. React Testing Library (opens in a new tab) is built for tests that resemble how people use an interface.

22. Routing, Frameworks, and Performance

Adding URLs and navigation when the app actually needs more than one view
Distinguishing client rendering, server rendering, and Server Components
Understanding that routing and data-loading choices depend on the framework
Measuring a performance problem before adding memoization

These are ecosystem topics, not prerequisites for a first component. Follow the chosen framework's current documentation rather than mixing setup instructions from different tools.

23. Capstone: An Accessible Reading List

Build this in small steps:

Render fictional books with reusable cards and stable ids.
Add search, category filters, a results count, and an empty state.
Add, edit, and remove books through labeled, validated controls.
Load a dataset, and provide loading, error, and retry behavior.
Add local persistence only if you need it, and label it as browser storage rather than cloud sync.
Test a complete journey, review keyboard access, and explain the component tree.

Do not add authentication, payments, or a database just to make the first project look bigger.

24. Production Build and What to Learn Next

Run the project's production build and preview it locally
Check navigation, assets, empty states, and failed requests in that build
Deploy using the hosting instructions for the chosen tool or framework
Continue with TypeScript, routing, more testing, or a backend, according to the project

A browser-only React app cannot keep a secret API key private. Keep privileged operations on a backend. Finishing a starter project is a foundation for more practice.

For server work after this, continue with the Node.js syllabus.

How to Practice

Read a topic, build a small example, change it, and watch what happens. Revisit the book list as you learn. Before moving on, explain where its data lives, why it re-renders, and what happens when something fails.

A Few Common Questions

Do I need JavaScript before React?

Yes. Functions, arrays, objects, modules, and asynchronous code show up throughout a React app. Return to the JavaScript exercises whenever React syntax is hiding a language concept you do not yet understand.

Should I learn React or Next.js first?

Learn components, props, state, and events as React concepts. A framework can supply the project setup and the production features, and those fundamentals still matter. A small learning app does not need every framework feature on day one.

Do I need Redux or another state library?

Not for the first project here. Start with local state, lifting shared state, and a clear data flow. Learn reducers and context when a concrete problem justifies them. Evaluate extra libraries later.

How long does it take to learn React?

There is no fixed timeline. Being able to build, explain, test, and debug a small feature tells you more than checking off topics.

Helpful Resources

React Learn (opens in a new tab) — official lessons and interactive examples.
Thinking in React (opens in a new tab) — component structure and the smallest state that works.
Managing State (opens in a new tab) — organizing and sharing state.
Escape Hatches (opens in a new tab) — refs, Effects, and reusable logic.
Creating a React App (opens in a new tab) — current setup choices.