Web development1:1 mentoring

React

Learn to think in components and build real React apps with state, hooks, data fetching and routing.

Level:: Intermediate
Format:: 1:1 online mentoring

Free, no-obligation chat · Affordable plans that fit your budget · Start this week

1:1 personal attentionOne mentor, one student, at your pace.
Flexible timingsSessions that fit your week and time zone.
Affordable plansPlans that fit your budget.
Practise between sessionsShort problems that build confidence.

About this course

Learn React online

React is one of the most widely used libraries for building user interfaces. Learners often find it hard because most React problems are really JavaScript problems, and ideas such as state, effects and re-rendering are new at the same time.

This course follows the structure of the official React documentation: JSX, components and props, rendering lists and conditions, responding to events, state, reducers and context, refs, effects, custom hooks, forms, data fetching, routing, testing, and building and deploying a project, with TypeScript as an option.

Right now our free self-study lessons cover Java and Python, so React is taught through affordable 1:1 online mentoring: a mentor explains each idea, reviews your code and works at your pace. Message us on WhatsApp or email, or fill in the short form, for a free, no-obligation chat. We will suggest a plan that fits your budget and flexible timings in your time zone, and you can start this week.

Who this course is for

Learners who know basic JavaScript and want to build interfaces
Students building a portfolio or class project in React
Developers moving from other front-end tools
Career changers aiming for front-end roles
Learners who understand tutorials but cannot yet build alone

Outcomes

What you'll learn

Break an interface into components and pass data with props
Manage state with useState and useReducer
Use useEffect correctly, including dependencies and cleanup
Render lists with keys and handle conditional UI
Build controlled forms with validation
Fetch data and show loading, empty, error and success states
Add client-side routing to an app
Write custom hooks and share state with context

Skills you'll gain

React
JSX
Props and state
Hooks
useEffect
Context
Forms
Data fetching
Routing
TypeScript with React
Testing basics
Deployment

Detailed syllabus

React syllabus

Every module lists its topics and what you will be able to do. Your mentor plans sessions around them and your own goals.

Module 1
JavaScript for React
The language features React code uses every day.
- Arrow functions and destructuring
- Spread and rest
- map, filter and reduce
- ES modules
- Promises and async/await
- Template literals
- Closures
By the end of this module you can
- Read and write the JavaScript found in React code
- Transform arrays with map and filter
Covered in 1:1 mentoring sessions
Module 2
Getting started and JSX
Setting up a project and writing markup in JavaScript.
- Creating a project with a modern build tool
- Project structure
- JSX rules
- Embedding expressions
- Fragments
- Importing CSS
- Using the React developer tools
By the end of this module you can
- Create and run a React project
- Write JSX that renders correctly
Covered in 1:1 mentoring sessions
Module 3
Components and props
Thinking in components.
- Function components
- Props and children
- Composition
- Default props and destructuring
- Conditional rendering
- Rendering lists and keys
- Keeping components pure
By the end of this module you can
- Split a design into components
- Pass data down with props
Covered in 1:1 mentoring sessions
Module 4
State and events
Making the interface respond.
- Handling events
- useState
- State updates and batching
- Updating objects and arrays immutably
- Lifting state up
- Controlled inputs
- Choosing where state lives
By the end of this module you can
- Build interactive components with state
- Lift state up when two parts share it
Covered in 1:1 mentoring sessions
Module 5
Effects and refs
Synchronising with the outside world.
- What effects are for
- useEffect and dependency arrays
- Cleanup functions
- Avoiding unnecessary effects
- useRef and the DOM
- Common effect bugs
- Strict mode behaviour
By the end of this module you can
- Write an effect with correct dependencies
- Decide when you do not need an effect
Covered in 1:1 mentoring sessions
Module 6
Reducers, context and custom hooks
Organising complex state and reusing logic.
- useReducer
- Context for shared data
- Combining reducer and context
- Writing custom hooks
- Memoisation with useMemo and useCallback
- When to optimise
By the end of this module you can
- Share state across a component tree
- Extract logic into a custom hook
Covered in 1:1 mentoring sessions
Module 7
Forms and validation
Collecting and checking user input.
- Controlled and uncontrolled inputs
- Form submission
- Validation and error messages
- Multiple fields with one handler
- Accessible labels and errors
- Disabling and loading states
By the end of this module you can
- Build a validated, accessible form
- Show clear errors to users
Covered in 1:1 mentoring sessions
Module 8
Data fetching
Connecting to real data.
- Fetching from REST APIs
- Loading, empty and error states
- Request cancellation and race conditions
- Caching and refetching ideas
- Optimistic updates overview
- Handling authentication tokens safely
By the end of this module you can
- Fetch and display data with all four states
- Avoid stale and out-of-order responses
Covered in 1:1 mentoring sessions
Module 9
Routing and project structure
Multiple pages in a single-page app.
- Client-side routing
- Route parameters
- Nested routes and layouts
- Protected routes
- Folder structure and naming
- Error pages
By the end of this module you can
- Build a multi-page app with routes
- Organise a project so it scales
Covered in 1:1 mentoring sessions
Module 10
TypeScript with React
Typed props, state and events.
- Typing props
- Typing state and reducers
- Event types
- Typing refs and context
- Generic components
- Typed custom hooks
By the end of this module you can
- Convert a React project to TypeScript
Covered in 1:1 mentoring sessions
Module 11
Testing and debugging
Making sure your app works.
- React developer tools
- Component tests with a testing library
- Testing user behaviour
- Mocking API calls
- Reading error messages
- Accessibility checks
By the end of this module you can
- Write tests that act like a user
- Debug re-renders and state issues
Covered in 1:1 mentoring sessions
Module 12
Building and deploying an app
From idea to a project you can explain.
- Planning a project
- Choosing state and data approach
- Environment variables
- Building for production
- Deploying a small app
- Next steps: frameworks and server rendering
By the end of this module you can
- Ship a finished React app
- Explain your design choices
Covered in 1:1 mentoring sessions

Ways to learn

How you can learn React

React mentor, 1:1 online

A mentor who knows this course plans sessions around your goal, explains each idea with fresh examples and checks your understanding. Personal attention, flexible timings in your time zone and affordable plans that fit your budget.

Talk to our team

How it works

Your learning journey

Four simple steps to start React with a mentor. A real person replies to you; there is no booking system.

Step 1: Talk to us
Message us on WhatsApp or email, or fill in the short form. The first chat is free, with no obligation.
Step 2: Get your plan
We listen to your goal, level and deadlines, then suggest a plan that fits your budget and timings.
Step 3: Learn with your mentor
Online 1:1 sessions with a mentor who knows your course, explains clearly and checks your understanding.
Step 4: Practise & track progress
Keep going between sessions with practice, and watch your confidence grow week by week.

Learn by doing

Projects and practice

Task board
A component-based board with state, a reducer, filtering and data saved in localStorage.
API-powered movie or recipe browser
A search app with routing, loading and error states and a detail page for each item.
Shopping cart
A small shop with a context-based cart, derived totals and a validated checkout form.
Capstone app
An app of your choice with routing, data fetching, tests and a deployed live version.

Free practice on MentorNxt

Your progress

What you'll be able to do

Milestones from the start, middle and end of the syllabus.

Read and write the JavaScript found in React code
Early on
Build a validated, accessible form
Halfway
Ship a finished React app
By the end

FAQs

React: frequently asked questions

Is there a self-study option, or is it 1:1 mentoring?

Our free self-study lessons exist only for Java and Python today. React is learned through 1:1 online mentoring, where a mentor teaches live, answers questions as they come up and shapes each session around what you need next.

How much does mentoring cost?

1:1 mentoring is personal online tutoring and is affordable, with plans that fit your budget. Tell us your goals and how often you would like sessions, and our team will suggest an option that works for you.

How do I get started?

Message us on WhatsApp or email, or fill in the short form on this page. Our team replies, talks through your goals and helps you choose a mentor and a schedule. It starts with a free, no-obligation chat, and you can start this week.

Are the sessions 1:1 and can they fit my schedule?

Yes. Every session is one-to-one and online: one mentor, one learner. Timings are flexible in your time zone, so sessions can sit around school, work and family plans.

Do I need to know JavaScript before React mentoring?

It helps to know the basics. If your JavaScript is shaky, the mentor starts there, because most React problems are really JavaScript problems. Many learners find React much easier after a few sessions on the language.

Can sessions focus on my own project?

Yes. Bring your code and the mentor will help you understand it, plan the next feature and fix what is not working, explaining each step so you can carry on on your own.

Do you teach TypeScript with React?

Yes, as an option once the basics are solid. See our TypeScript course for the language itself.

Which React version and tools do you use?

The course follows the current official React documentation, with function components and hooks, and a modern build tool.

Free, no-obligation chat

Talk to our team about React

Tell us what you need. Our support team replies within one working day, by email or WhatsApp, whichever you prefer, and arranges your mentor.

Prefer to talk first?

Message the support team directly. We usually reply the same day.

Chat on WhatsApp Email us

Our mentors teach and explain. They never complete graded work, tests or assessments for students.

Keep going

Syllabus references

Last reviewed9 November 2026

Ready to start React?

Message us on WhatsApp or email, or fill in the short form. Our team replies with a plan that fits your goal and budget, and you can start this week.

Fill in the short form

WhatsApp Email us

Talk to us about a mentor

WhatsApp Email us

Learn React online

Who this course is for

What you'll learn

Skills you'll gain

React syllabus

JavaScript for React

Getting started and JSX

Components and props

State and events

Effects and refs

Reducers, context and custom hooks

Forms and validation

Data fetching

Routing and project structure

TypeScript with React

Testing and debugging

Building and deploying an app

How you can learn React

React mentor, 1:1 online

Your learning journey

Step 1: Talk to us

Step 2: Get your plan

Step 3: Learn with your mentor

Step 4: Practise & track progress

Projects and practice

Task board

API-powered movie or recipe browser

Shopping cart

Capstone app

Free practice on MentorNxt

What you'll be able to do

React: frequently asked questions

Talk to our team about React

Related courses

JavaScript Programming

TypeScript

Web Development

Node.js and Express

HTML and CSS

Syllabus references

Ready to start React?

Learn React online

Who this course is for

What you'll learn

Skills you'll gain

React syllabus

JavaScript for React

Getting started and JSX

Components and props

State and events

Effects and refs

Reducers, context and custom hooks

Forms and validation

Data fetching

Routing and project structure

TypeScript with React

Testing and debugging

Building and deploying an app

How you can learn React

React mentor, 1:1 online

Your learning journey

Step 1: Talk to us

Step 2: Get your plan

Step 3: Learn with your mentor

Step 4: Practise & track progress

Projects and practice

Task board

API-powered movie or recipe browser

Shopping cart

Capstone app

Free practice on MentorNxt

What you'll be able to do

React: frequently asked questions

Talk to our team about React

Related courses

JavaScript Programming

TypeScript

Web Development

Node.js and Express

HTML and CSS