CAREER PATH · REACT
We explain new ideas in plain language, practise repeatedly and build useful projects. Comfort with HTML, CSS, JavaScript functions, arrays, objects and modules is recommended.
function App() { return <main>Hello React</main>; }Your first useful result is only a few careful steps away.EXPLORE BEFORE YOU START
Master components, state, forms, APIs, routing, TypeScript, testing and production React applications.
Comfort with HTML, CSS, JavaScript functions, arrays, objects and modules is recommended.
You can read this outline without signing in or completing onboarding. Start with the welcome screen above when you are ready to practise. Use a current browser; a keyboard and larger screen can make longer coding tasks easier, but the lesson interface also adapts to phones.
The in-page coding tasks use pattern checks to confirm required pieces. They do not replace installing the relevant framework, design application, Python environment or hosted service for full execution. Each section includes guided practice, projects and a ten-question exam.
Read an explanation, study the example, try the task and review feedback. Keep your own project files and test them in their intended environment. Completing an activity or a course certificate is not an accredited qualification or a guarantee of employment.
Expand a section to read its chapters and projects. This is the actual course curriculum, not a separate list of promised future topics.
Understand declarative interfaces, JSX and the render cycle.
Section outcome: Build a small interface from predictable component trees.
Describe the desired interface for current data rather than manually performing every DOM update.
Combine markup-like syntax with JavaScript values and rules.
Rebuild and vary the jsx expressions example until every important piece feels familiar.
Understand that React compares renders and updates the necessary interface.
Use a modern project structure and inspect components without treating tooling as magic.
Rebuild and vary the project setup and developer tools example until every important piece feels familiar.
Render one learner profile from props and test missing content.
Compose a complete static React page from small reusable components.
Create reusable pieces with clear data inputs and flexible children.
Section outcome: Design component APIs that remain understandable as the interface grows.
Give each component one coherent rendering responsibility.
Pass data downward without mutating inputs.
Rebuild and vary the props and one-way data flow example until every important piece feels familiar.
Combine focused pieces instead of creating giant configuration objects.
Render collections and alternatives with stable identity.
Rebuild and vary the lists, keys and conditional ui example until every important piece feels familiar.
Create one composable notice component with success, warning and error examples.
Build a filterable directory entirely from reusable presentational components.
Model changing information and update it predictably from user events.
Section outcome: Build an interactive feature without duplicated or contradictory state.
Store only values that genuinely change and use functional updates when they depend on earlier state.
Translate user actions into explicit state transitions.
Rebuild and vary the event handling example until every important piece feels familiar.
Calculate values from source state instead of synchronising duplicates.
Group or separate values based on how they change together.
Rebuild and vary the state structure example until every important piece feels familiar.
Build an accessible control with minimum, maximum and derived price.
Model add, remove, quantity and total behaviour with predictable updates.
Build accessible forms, validate intent and coordinate related components.
Section outcome: Create a multi-step form with useful errors and preserved input.
Connect field values and changes to state when the application must coordinate them.
Explain what failed, where and how to recover.
Rebuild and vary the validation and error ux example until every important piece feels familiar.
Move shared state to the nearest common owner.
Represent complex state transitions with named reducer actions.
Rebuild and vary the reducers for workflows example until every important piece feels familiar.
Build validation that connects every error to its field.
Create a resumable workflow with reducer state and a final review step.
Synchronise with external systems without using effects for ordinary calculations.
Section outcome: Load remote data with cancellation and complete UI states.
Use effects to synchronise with systems outside React, not to calculate render data.
Declare reactive dependencies and undo subscriptions or requests.
Rebuild and vary the dependencies and cleanup example until every important piece feels familiar.
Cancel or ignore stale requests when inputs change.
Recognise when a dedicated data library simplifies repeated server state.
Rebuild and vary the caching and server-state tools example until every important piece feels familiar.
Load search suggestions without stale-response flicker.
Create loading, empty, error, retry and success states around remote data.
Connect URLs to screens and organise features for growth.
Section outcome: Build a multi-route application with meaningful navigation and error pages.
Map stable URLs to interface views and navigation.
Share layout while rendering resource-specific routes.
Rebuild and vary the nested layouts and parameters example until every important piece feels familiar.
Keep filters shareable and browser-history friendly.
Group related components, state and tests around product capabilities.
Rebuild and vary the feature-based architecture example until every important piece feels familiar.
Synchronise one filter with search parameters.
Build nested routes, resource pages and recovery states.
Make component contracts explicit and protect user behaviour with tests.
Section outcome: Convert a feature to TypeScript and test its important journeys.
Describe component inputs and changing values without broad any types.
Represent allowed UI states so impossible combinations become harder to create.
Rebuild and vary the unions and narrowing example until every important piece feels familiar.
Interact with the interface as a user and assert visible outcomes.
Replace network or time boundaries without mocking every implementation detail.
Rebuild and vary the mocking boundaries example until every important piece feels familiar.
Model and test loading, empty, error and success states.
Convert a complete React feature and protect its main user journey.
Understand server/client boundaries and ship a measured React product.
Section outcome: Deploy and present a production-quality React capstone.
Place data and interaction on the appropriate side of the application boundary.
Choose static, dynamic or streamed rendering based on content and freshness.
Rebuild and vary the rendering strategies example until every important piece feels familiar.
Measure bundles, interaction and semantics before optimising.
Configure environments, capture failures and preserve a recovery path.
Rebuild and vary the deployment and observability example until every important piece feels familiar.
Choose and justify rendering for three different pages.
Build, test, optimise, deploy and document a complete React application.
Guest progress is saved in this browser on this device. Clearing site data or switching browsers can remove access to that local progress. An optional account can synchronize supported course progress; it is not required to access the lessons. Download or back up project work separately.
Certificates recognize completion of the course activities on this site. They are not university credit, professional accreditation or proof that every program you write is correct.