Grokking React Fundamentals
Learn React step by step: JSX, components, props, state, events, forms, hooks, data fetching with useEffect, useReducer, custom hooks, and React Router.
Course Overview
React builds a web page from components, small JavaScript functions that each describe one part of the screen. When the data behind a component changes, React runs the function again. It then updates only the parts of the page that changed. This course teaches you to write those components and to predict what React will do with them. You start with JSX, the HTML-like syntax that describes the user interface. You then build components, pass data between them with props, render lists, and style them with CSS and with frameworks like Tailwind CSS. Next come the ideas that make a page interactive: state, event handling, forms, conditional rendering, and refs. Later chapters load data from a server with useEffect and manage related state with useReducer. You also move between pages with React Router and extract repeated logic into custom hooks. Every lesson follows one small example and explains what happens on the screen after each click, in the order it happens. The examples were run on React 19, and every chapter after the introduction ends with an assessment that explains each answer.
What you'll learn in Grokking React Fundamentals
- Explain what React is, why it is a library rather than a framework, and how it differs from updating the page with plain JavaScript.
- Build function components, compose them into a tree, and pass data between them with props.
- Style components with plain CSS, CSS Modules, Bootstrap, and Tailwind CSS.
- Store changing values in state, update arrays and objects without mutating them, and derive values instead of copying them.
- Build controlled and uncontrolled forms, and decide which one a form needs.
- Use refs to keep values between renders and to reach DOM elements, and know when a ref is the wrong choice.
- Manage related state with useReducer, move between pages with React Router, and extract repeated logic into custom hooks.
- Write JSX, embed JavaScript expressions in it, and avoid the mistakes beginners make most often.
- Render lists from arrays, and choose keys that keep each item and its input attached to the right row.
- Follow the rules of hooks and know which hook to use for each job.
- Handle clicks, typing, and form submissions, and pass arguments to event handlers correctly.
- Show or hide parts of the page with the logical AND operator, the ternary operator, and early returns.
- Fetch data with useEffect, control when the effect runs, and handle loading, errors, cleanup, and race conditions.
Course Content
JSX BASICS
COMPONENTS
HOOKS OVERVIEW
CONTROLLED & UNCONTROLLED COMPONENTS
USEREDUCER
CUSTOM HOOKS
BEST PRACTICES
What people say about our courses
About the Author
Arslan Ahmad
Industry Expertise & Leadership
Arslan Ahmad is the lead author of Grokking React Fundamentals. As the founder of Design Gurus and a former FAANG hiring manager, he has worked at industry giants like Facebook (now Meta) and Microsoft.
He has conducted hundreds of system design interviews, giving him unique insight into what top tech companies look for in candidates.
The course also incorporates expertise from senior engineers at Google, Meta, Amazon, Microsoft, and Uber, ensuring you learn system design best practices from professionals who have built and scaled real-world systems.
500+
Interviews Conducted
10k+
Students Taught
Related Courses
$197
$48
$48
FAQs
What is Grokking React Fundamentals?
It is a course on React, the JavaScript library for building user interfaces. It starts with JSX and components, then covers props, lists, styling, hooks, state, events, forms, conditional rendering, refs, data fetching, useReducer, routing, custom hooks, and the practices that keep a React codebase easy to change.
Who is this course for?
It is for developers who know JavaScript and have not used React yet, and for developers who have copied React code before and now want to understand why it works. The course explains what happens on the screen after each click and each state change, not only which code to write.
What do I need to know before I start?
You need a working knowledge of HTML, CSS, and JavaScript. The course does not teach JavaScript itself, so the examples use arrow functions, template literals, the ternary operator, and array methods like map and filter without explaining them.
Do I need to install anything?
You can read the course without installing anything, but to run the examples you need a React project on your own computer. The course does not include a setup lesson or a coding environment in the browser. The lessons that mention a build tool use Vite, which creates a React project with one command.
Which version of React does the course use?
The examples were run on React 19 and React Router 7. The lessons teach function components and hooks, and they point out where React 19 changed behavior, like the removal of defaultProps on function components.
Does the course cover class components?
Briefly. The course uses function components and hooks throughout, which is what the React documentation recommends for new code. One short section shows how a class component is written, so that you can read one in an older codebase.
Are there quizzes or assessments?
Yes. Every chapter after the introduction ends with an assessment, and each attempt draws a set of questions from a larger pool, so a second attempt gives you different questions. Most questions describe a piece of code and ask what it does, like what a counter shows after a click, and every option comes with an explanation of why it is right or wrong.
Does the course cover data fetching?
Yes. You fetch data with useEffect, use the dependency array to control when the effect runs, and handle loading states, errors, cleanup, and the race condition where a slow response overwrites a newer one. The course then moves the same fetching logic into a reducer and into a custom hook.
Does the course cover React Router?
Yes. You define routes, link between pages without a full page reload, read URL parameters, nest routes inside a shared layout, and move to another page from code with useNavigate.
What does the course not cover?
It does not teach TypeScript, testing, Server Components, or frameworks built on React like Next.js. The context API is named where it applies, but it is not taught, so you will need other material for those subjects.
