React Fundamentals

• Format — 1,400+ multiple-choice questions across 12 topics, with instant explanations after every wrong answer
• Duration — about 16.5 hours of focused practice; most learners spread it across 5–7 weeks
• Level — beginner to intermediate. Start from "what is JSX", finish able to build and reason about real React apps. Assumes you know basic JavaScript (variables, functions, arrays, objects); the React parts are taught from zero.
• Cost — free with Abekus Pro, otherwise paid in credits with Abekus Pro, otherwise paid in credits; including the completion certificate and a public verification URL
• Audience — frontend developers learning React, engineering students preparing for placements, backend developers picking up a UI framework, anyone migrating from jQuery or vanilla JS
• Companion course — React Advanced Patterns — for compound components, render props, custom hooks, performance, and the architectural decisions senior interviews probe

Anyone learning React from scratch — final-year engineering students preparing for frontend interviews, working developers asked to ramp up on React for a new project, self-taught coders who can write JavaScript but were never taught React systematically, and backend developers picking up a UI framework for the first time. The course assumes JavaScript fundamentals (variables, functions, arrays, destructuring, arrow functions) but teaches every React concept from the ground up. If your JavaScript is shaky, brush up on those first — every React snippet is also a JavaScript snippet.

The course is structured in three layers — core concepts, building UIs, and going further — so it works whether you're a total React beginner or refreshing for an interview.

Core concepts

• JSX & Rendering — JSX syntax, how it transforms to React.createElement, when React re-renders and why
• Components — functional components, composition, component rules and identity (what counts as "the same" component across renders)
• Props — passing data down, common patterns (render props, children, spread), typing props with TypeScript
• State with useState — the useState hook, state update behaviour (batching, stale closures), initialization patterns (lazy initial state, computed defaults)
• Effects with useEffect — the useEffect hook, cleanup functions, common patterns (data fetching, subscriptions, intervals) and the bugs they hide

Building UIs

• Event Handling — React's synthetic events, handler patterns, why event delegation works differently than DOM events
• Lists & Keys — rendering lists from arrays, why keys matter (and what breaks when you use indices), patterns for dynamic lists
• Forms & Controlled Components — controlled vs uncontrolled inputs, form handling patterns, when each approach is the right answer
• Refs — useRef, attaching refs to DOM nodes, forwardRef for component APIs

Going further

• Context API — Context for prop drilling, common patterns (theme, auth, locale), the performance footgun when Context value changes
• Component Lifecycle & Error Handling — mapping class lifecycle methods to hooks, error boundaries, common component patterns (container/presentational, compound components)
• Review & Mastery — concept comparisons, pattern selection (which hook for which job), questions that pull the whole picture together

React is the easiest of the three frameworks to start with and the hardest to claim mastery over. Compared to Vue, React has more concepts upfront (JSX, hooks, manual state updates) but a more flexible mental model — Vue's template directives are friendly but feel magical; React's "it's just JavaScript" frame transfers better once you're past the early hurdle. Compared to Angular, React is dramatically smaller and has less opinion — Angular gives you a framework with batteries (DI, RxJS, forms, router); React gives you a library and lets you pick the rest. Compared to plain JavaScript + DOM APIs, React trades a learning curve for everything DOM manipulation makes painful (state syncing, list re-rendering, focus management). The trade-off: React updates render the whole component tree on state change, which can be slow if you don't think about it. That's what makes Refs, Context performance, and the dependency-array footguns interview material.

The fastest path is active recall plus immediate feedback: see a snippet, predict the output, get told why the wrong answer was wrong. Most React tutorials walk you through building a todo app — you finish, you can't write a different app, and you can't trace a snippet on an interview whiteboard. MCQ-based practice forces you to understand rather than follow, and explanations on every wrong answer build the snippet-tracing skill interviewers actually test.

You answer one question at a time. Get it right and you advance; get it wrong and we explain why the right answer is right and the distractor was tempting — usually because it captures a misconception React beginners share. Every question is scored, every gap surfaces in your skill profile, and the AI guide tracks recurring mistakes across sessions so the same trap doesn't catch you twice. The platform remembers where you left off, so you can pause for a week and resume mid-topic.

About 16.5 hours of focused practice across 1,400+ questions. Most learners spread it over 5–7 weeks at 30–40 questions a day — that's roughly 20–30 minutes daily, sustainable alongside college or a job. Two-week sprints work for placement-prep crunches but the trap patterns stick better with spaced repetition.

A handful of questions show up in almost every React interview. They're rarely hard once you've seen them; they're brutal the first time. This course drills each one until it's automatic:

• Stale closures in useEffect — the effect captures the variables from the render it ran in; if dependencies are wrong, you're reading stale state forever
• Missing keys (or worse, index keys) — React uses keys to match list items across renders; the wrong key destroys component state on every reorder
• State updates are async and batched — calling setState(x+1) twice in a row doesn't increment by 2; you need the functional updater
• useEffect dependencies — every reactive value referenced inside the effect must be in the array; ESLint will tell you, exhaustive-deps exists for a reason
• Conditional hooks — hooks must be called in the same order every render; no early returns above them, no hooks inside conditions or loops
• Context re-renders — every consumer re-renders when the Context value changes, even if their part of it didn't; the wrong pattern here kills performance
• Refs vs state — refs don't trigger re-renders; if you're storing UI state in a ref to "avoid re-renders", you usually want state instead

Once you can write React comfortably and trace any beginner snippet, the next step depends on where you're heading. For frontend interviews at senior level, take React Advanced Patterns — it drills the architectural questions interviewers ask once they've established you know the basics: compound components, render props, custom hooks composition, performance optimization, Suspense, the design-decision questions that decide bar-raiser rounds. For JavaScript depth (closures, prototypes, async, event loop), pair this course with the JavaScript tracks on Abekus — most React traps are really JavaScript traps wearing a React costume.