JavaScript and React online course
The JavaScript and React online course in CodeWorlds is 16 modules of short lessons with a code editor and 1069 hands-on exercises, told as a story-driven adventure. You can read the lessons for free on this site.
Learning JavaScript, React.js, and Redux takes us on a cosmic mission. Explore outer space as a member of an astronaut team.
Your guide
Ra
Space Guide
What you'll learn
- React functional and class components
- React Hooks - useState, useEffect, useContext
- State management with Redux Toolkit
- React Router - routing and navigation
- Styling with CSS Modules and Styled Components
- Fetch API and Axios for backend communication
- Testing with Jest and React Testing Library
- Optimization with React.memo and useMemo
Main projects
During the course you will build real projects that you can add to your portfolio
Mission Control Panel
Mission control dashboard with real-time updates and charts
Crew Management System
CRUD application for crew management with authentication
Space Explorer
Application for exploring the cosmos with NASA API
Course program
16 modules full of interactive exercises and practical projects
Mission Start
React Basics
What React is, the Virtual DOM, Node.js and npm, a Vite project, app structure, your first component, JSX and React DevTools
65 exercises
Lunar Base
Components and Props
Component anatomy, props and children, composition, conditional and list rendering, controlled and uncontrolled components
65 exercises
Landing on Mars
State and Events
Component state, event handling and propagation, data flow, state update patterns and controlled forms
51 exercises
Command Center
Context API and useReducer
Context API, reducers and useReducer, global app state, context optimization and state management patterns
70 exercises
Connectivity Issues
useEffect and Custom Hooks
Lifecycle and effects, fetching API data, effect cleanup, useRef, custom hooks, race conditions, debouncing and memoization
87 exercises
Journey to Orbiter
React Router
Route configuration, URL parameters, nested routes, programmatic navigation, protected routes, redirects and lazy loading
74 exercises
Ship Styling
Styling and Animations
Styled Components, Sass, Tailwind CSS, UI component libraries, a custom design system, React Transition Group and CSS animations
67 exercises
Advanced Systems
Advanced React Patterns
HOCs, render props, compound components, Suspense, code splitting, accessibility, performance profiling and deploying to Vercel
64 exercises
Galactic Core
Modern React Hooks
useTransition, useDeferredValue, useOptimistic, useActionState, useFormStatus, useId, the use hook and list virtualization
62 exercises
Journey into the Unknown
React Ecosystem and Future
Portals, i18n, security, GraphQL with Apollo, WebSockets, Web Workers, React Compiler, Server Components and TanStack Query
86 exercises
- React Portals
- React-i18next - Internationalization in React
- Comprehensive Security Practices in React
- Apollo Client - Comprehensive GraphQL Integration with React
All lessons (14)
- WebSockets and Server-Sent Events in React
- Web Workers in React
- React Compiler (React Forget)
- Streaming SSR and Edge Runtime
- React Server Components (RSC) - The Future of React
- Micro-frontends with React - Scalable Architecture
- React Query / TanStack Query - Server State Management
- React 19 - ref without forwardRef
- React 19.2 - Partial Pre-rendering (PPR)
- Main Project: Space Mission Command Center
Database Communication
Data Fetching and APIs
Fetch and Axios, loading and error states, AbortController, sending data, caching and stale-while-revalidate, pagination, infinite scroll
63 exercises
Star Maps
React and TypeScript
Typing components, props, useState and useRef, events, Context API and useReducer, generic components and discriminated unions
63 exercises
Quality Control
Testing React
Jest and React Testing Library, testing interactions and async components, mocking modules and APIs, testing hooks and snapshots
63 exercises
Fleet Colors
Advanced Styling
CSS variables and themes, CSS Modules, zero-runtime CSS-in-JS, styled-components theming, Emotion, design tokens and responsive patterns
63 exercises
Orbital Station
Patterns and Architecture
Composition, container/presentational, headless components, inversion of control, feature flags, atomic design and state machines
63 exercises
Emergency Landing
Error Handling and Suspense
Error boundaries, react-error-boundary, form errors, logging and monitoring, fallback UI, skeleton loaders and resilient interfaces
63 exercises
Course theme
Spaceships and Galaxies
Each module is set in a unique theme that makes learning an adventure.
Your guide
Ra
Space Guide
Will guide you through all challenges and help you gain new skills.
JavaScript and React course FAQ
Is the JavaScript and React course free?
Partly. You can read the JavaScript and React lessons for free on this site. The course tasks in the app require a premium plan, while a free account lets you complete the HTML and CSS course in the app with 10 fuel units a day.
How long does the JavaScript and React course take?
The estimated learning time for the JavaScript and React course is 80-120 hours. The course has 16 modules and more than 1069 tasks, and you set the pace.
Do I need previous experience for the JavaScript and React course?
Before the JavaScript and React course it helps to know: HTML and CSS basics, JavaScript basics, World 1 or equivalent knowledge.
What will I learn in the JavaScript and React course?
In the JavaScript and React course you will learn, among other things: React functional and class components, React Hooks - useState, useEffect, useContext, State management with Redux Toolkit, React Router - routing and navigation.
What is learning in CodeWorlds like?
In CodeWorlds, every module is a series of short lessons with a live code editor, check questions and hands-on tasks. Progress earns you XP and unlocks new locations in the Space Mission world.
Start learning JavaScript today
Join CodeWorlds and discover modern learning methods that make programming fascinating and accessible to everyone.