🇬🇧 Limited Time — UK Only·🎓 Free Learning for 1 Month·🤖 Free AI Training Included·📚 4,000+ Lessons · 35,000+ Quizzes·🏆 GCSE Mocks · Olympiad Papers·⚡ Selected Students Only · Limited Places·🎁 Free Value Worth £2,000·🇬🇧 Limited Time — UK Only·🎓 Free Learning for 1 Month·🤖 Free AI Training Included·📚 4,000+ Lessons · 35,000+ Quizzes·🏆 GCSE Mocks · Olympiad Papers·⚡ Selected Students Only · Limited Places·🎁 Free Value Worth £2,000·🇬🇧 Limited Time — UK Only·🎓 Free Learning for 1 Month·🤖 Free AI Training Included·📚 4,000+ Lessons · 35,000+ Quizzes·🏆 GCSE Mocks · Olympiad Papers·⚡ Selected Students Only · Limited Places·🎁 Free Value Worth £2,000·
⚛️Free Course

React JS

Build modern web apps with components, state, and hooks.

23 Lessonsintermediate

Lessons

1

Components as functions

In React, a component is often a function that returns what to show. The idea is: one function = one piece of the UI. Here we simulate that with a plain function returning a string (in real React it returns JSX).

React was created at Facebook in 2011 and open-sourced in 2013A React app is a tree of components — the root is usually <code>&lt;App /&gt;</code>Function components replaced class components as the modern standard in 2019
2

State: data that changes

State is data that can change over time (e.g. a counter, whether a modal is open). When state changes, the UI updates. Here we mimic that with a simple object and a function that updates it and 're-renders' (logs).

useState is a <strong>React Hook</strong> — hooks must be called at the top level of a component (not inside if/loops)React schedules re-renders — state doesn't update instantly when you call the setterMultiple <code>useState</code> calls in one component are fine — each is independent
3

Rendering lists

In React you often map over an array to render a list of components. Each item needs a unique key (usually an id) so React can update efficiently. Here we simulate with a simple loop and console output.

Using array index as key (<code>key={i}</code>) works only for static lists — causes bugs when items are added/removed/reorderedReact reconciliation uses keys to diff the virtual DOM efficiently<code>key</code> is not a prop — the child component can't access <code>props.key</code>
4

Events and handlers

React uses camelCase event names (onClick, onChange). You pass a function that gets called when the event happens. Here we simulate: a function that would be the click handler and we call it to show the idea.

React uses <strong>SyntheticEvent</strong> — a cross-browser wrapper that normalises event APIsReact attaches ONE event listener to the root DOM node, not per element (efficient)Event handlers in React are not called in the capture phase by default — add <code>Capture</code> suffix: <code>onClickCapture</code>
5

JSX: HTML-like syntax

📚 What is JSX? JSX is a special syntax that lets you write HTML-like code directly inside JavaScript. React components return JSX, which the build tool converts to regular JavaScript calls. It looks like HTML but has the full power of JavaScript available inside {} expressions.

JSX is NOT HTML — it's syntax sugar for <code>React.createElement()</code>In React 17+, you don't need to <code>import React</code> at the top — the transform handles itJSX expressions must return a value — statements like <code>if</code>/<code>for</code> don't work inside <code>{}</code>
6

Conditional Rendering

📚 What is Conditional Rendering? Conditional rendering shows different UI based on a condition - the component decides what to render at runtime. You use familiar JavaScript: if/else, ternary (? :), or logical AND (&&). This is how React makes interfaces respond to state and props.

Returning <code>null</code> from a component renders nothing but still triggers lifecycle/effectsShort-circuit <code>&&</code> is a JS feature — React doesn't add any magic; <code>false</code> and <code>null</code> are valid children that render nothingPrefer ternary for binary cases (show A or B); use <code>&&</code> for optional additions
7

Controlled Inputs

📚 What are Controlled Inputs? A controlled input is a form element where React state is the single source of truth for the value. You set value={state} and onChange updates the state. This is different from normal HTML where the DOM owns the value. Controlled inputs give you full control over vali…

React Hook Form and Formik are libraries that optimise large forms by reducing re-rendersControlled inputs enable instant validation (red border as user types wrong email format)The <code>select</code> element also uses controlled pattern: <code>value={selected} onChange={...}</code>
8

Side Effects (useEffect idea)

📚 What are Side Effects in React? A side effect is anything that affects something outside the component's render - like fetching data, setting up a subscription, starting a timer, or updating the page title. React's useEffect hook runs after the render and is where all side effects belong.

<code>useEffect</code> runs <em>after</em> paint — not synchronously during render<code>useLayoutEffect</code> runs synchronously after DOM updates but before paint — for measuring DOM elementsReact 18 runs effects twice in Strict Mode (dev only) to help catch cleanup issues
9

Props and children

📚 What are Props? Props (properties) are the inputs that a parent passes to a child component. They are read-only inside the child. Any JavaScript value can be a prop: strings, numbers, arrays, objects, functions, even other components. The special children prop holds whatever JSX is placed betwee…

Props are <strong>immutable</strong> in the child — only the parent can change what it passes<code>children</code> can be any JSX — text, elements, even other componentsTypeScript adds prop type safety with interfaces: <code>interface ButtonProps { label: string; onClick: () => void; }</code>
10

Keys in Lists

📚 Why do Lists Need Keys? When React renders a list, it needs a way to identify each item so it knows what changed between renders. Keys are unique identifiers you provide (usually the item's id). Without keys, React compares items by position, causing bugs when items are reordered, added, or remo…

Using array index as key is fine ONLY if the list never reorders, filters, or prepends itemsReact 18 in strict mode intentionally double-renders — missing keys cause visible bugs hereKeys can be strings or numbers
11

Lifting state up

📚 What is Lifting State Up? When two or more sibling components need to share the same data, move that data UP to their common parent. The parent owns the state and passes it down as props. Children can also receive a callback prop to update the shared state. This is one of the most important Reac…

Lifting state is fine for 2–3 levels; for deeply nested sharing use Context or state libraryReact's official docs use lifting state as the first example of component coordinationProp drilling = passing props through many intermediate components that don't use them — a sign to consider Context
12

Composition

📚 What is Component Composition? Composition means building a UI by combining small, focused components together -- like LEGO bricks. Instead of one giant component that does everything, you build many tiny ones and assemble them. React is designed around this idea: a Page contains a Header and a …

React explicitly chose composition over inheritance — Facebook's React docs say 'we found no use case for component inheritance'The children prop is just a regular prop of type ReactNodeComponent composition is also why React libraries (shadcn, Radix, Headless UI) are so flexible
13

Default props

📚 What are Default Props? Default props give a component a fallback value when a prop is not provided. Without defaults, missing props cause 'undefined' to appear in your UI. There are two modern ways: default parameter values in the function signature, or the logical OR operator inside the functi…

<code>undefined</code> triggers the default; <code>null</code> does not — a common source of bugs<code>Button.defaultProps</code> is deprecated as of React 18.3 and removed in React 19Default props improve component resilience and reduce defensive <code>??</code> checks inside render
14

Callback props

📚 What are Callback Props? A callback prop is a function that a parent passes down to a child. When something happens inside the child (like a button click), it calls that function to communicate back UP to the parent. This is the standard pattern for child-to-parent communication in React.

All of React's built-in event props (onClick, onChange, onSubmit) are callback propsThe convention of prefixing with 'on' is universal in the React ecosystemCallback props are how you 'lift events up' to match the data flow pattern
15

Fragments

📚 What are React Fragments? React requires every component to return a SINGLE top-level element. But sometimes you want to return two sibling elements without wrapping them in an extra <div> that messes up your layout or CSS. React Fragments solve this: they group multiple elements together withou…

The &lt;&gt;&lt;/&gt; short syntax was introduced in React 16.2Fragments never appear in the HTML — confirmed by inspecting the DOM in DevToolsFragments fix common CSS Grid/Flexbox bugs caused by unexpected wrapper divs
16

Inline styles in React

📚 What are Inline Styles in React? In regular HTML you write style="color: red; font-size: 18px;" as a string. In React, the style prop takes a JavaScript OBJECT instead. This means you write camelCase property names (fontSize instead of font-size) and values as strings or numbers. React converts …

Inline styles have the highest CSS specificity — they override all class-based stylesCannot use pseudo-selectors (:hover, :focus) or @media queries in inline stylesCSS variables work in inline styles: <code>style={{ '--accent': color }}</code>
17

Conditional class names

📚 What are Conditional Class Names? Conditional class names let you apply different CSS classes based on component state or props. This is how you make buttons look active, inputs show errors, or cards highlight on hover -- without inline styles. The pattern is: build a string of class names, addi…

clsx has 700M+ weekly npm downloads — it's the standard for conditional classestailwind-merge resolves Tailwind class conflicts (e.g. both 'p-2' and 'p-4' → keeps 'p-4')In TypeScript: className={cn(...)} is fully typed via clsx's type definitions
18

Refs idea

📚 What are React Refs? A ref (reference) is a way to hold a mutable value that persists across renders WITHOUT triggering a re-render when it changes. The most common use is to get a direct reference to a DOM element -- like grabbing an input to call .focus() on it. You create refs with useRef() a…

Refs don't trigger re-renders — changing .current is invisible to React's render cycleuseRef is the React Hook equivalent of getElementById in vanilla JSReact 19 adds native ref as a prop — no more forwardRef needed for component refs
19

When to optimize (memo idea)

📚 What is React.memo and When to Optimize? React re-renders a component whenever its parent re-renders, even if the component's own props didn't change. React.memo wraps a component and tells React: 'only re-render this if the props actually changed.' It's a performance optimization you add AFTER …

Don't premature-optimise — React.memo adds overhead for cheap componentsMemo is only effective if the parent passes the same prop references; useCallback prevents callback reference changesReact DevTools Profiler shows render count and helps identify which components need memo
20

Context idea

📚 What is React Context? Context solves the 'prop drilling' problem: when many nested components all need the same data (like the current user, theme, or language), passing props down through every level becomes messy. Context lets one component provide a value that ANY descendant can read -- with…

Context is NOT a replacement for all state — local state (useState) is still best for component-specific dataContext re-renders ALL consumers on value change — split contexts by update frequencyZustand/Jotai are popular alternatives that solve Context's performance issues for high-frequency updates
21

Rules of hooks

📚 What are the Rules of Hooks? React hooks (useState, useEffect, useContext, etc.) have two strict rules that you MUST follow. Breaking these rules causes mysterious bugs where state gets mixed up between renders. React actually includes a linter rule (eslint-plugin-react-hooks) to catch violation…

React 18.2 added a new lint rule for exhaustive-deps — another hook rule for useEffectThe rules are enforced by the <code>eslint-plugin-react-hooks</code> package (bundled in Create React App and Vite)Custom hooks MUST start with 'use' — this is how React identifies them for the linter
22

Custom hooks

📚 What are Custom Hooks? A custom hook is a regular JavaScript function that starts with 'use' and calls built-in React hooks inside it. Custom hooks let you EXTRACT and REUSE stateful logic across multiple components -- without duplicating code. If two components share the same useEffect + useSta…

Custom hooks are the primary code reuse mechanism in modern React (replacing HOCs and render props)The React docs call them 'a mechanism to reuse stateful logic, not state itself'Popular hook libraries: react-use (100+ hooks), @tanstack/react-query, SWR
23

React recap

📚 React: The Big Picture React is a JavaScript library for building user interfaces out of components. Each component is a function that returns what should appear on screen. React keeps the UI in sync with your data automatically -- when state changes, the component re-renders.

React 19 (2024) introduced server components and new form actionsThe React ecosystem: React Router (navigation), TanStack Query (data fetching), Zustand/Jotai (global state)TypeScript + React is the industry standard for production apps

Start learning React JS free today

AI tutoring · quizzes · projects · works on any device

Start free on Applaa →Download Applaa