Course Overview

Grokking React Fundamentals teaches you how to build interactive web pages with React, starting from the first line of JSX and ending with routing, custom hooks and the practices that keep a React codebase easy to change. Each chapter builds on the one before it, so you can read the course from start to finish without looking anything up elsewhere.

The course covers the core ideas you need to write React code on your own: components, props, state, JSX syntax, event handling, hooks, forms, data fetching and routing. Every idea is shown with a small example that you can read, run and change.

Who Should Take This Course?

The course is written for two groups of readers:

• Developers who are new to React. You may have built pages with HTML, CSS and JavaScript, but you have not used React yet.
• JavaScript developers who want to build user interfaces. You know variables, functions, arrays, objects and arrow functions, and you want to turn that knowledge into interactive pages.

You need a working knowledge of HTML, CSS and, above all, JavaScript. The course does not teach JavaScript itself, so the examples use features such as arrow functions, template literals, the ternary operator and array methods without explaining them.

How the Course Is Taught

Each lesson explains one idea through a short, complete example. The text tells you what happens when the code runs, in the order it happens: what appears on the screen, what changes after a click, and why React behaves that way. Technical terms are defined the first time they appear and then used freely.

From the JSX Basics chapter onward, every chapter ends with an assessment. Each attempt draws a set of questions from a larger pool, so a second attempt gives you different questions. The questions ask you to predict what a piece of code does or to choose between two approaches, so a correct answer shows that you understood the idea rather than remembered a sentence. Every option comes with an explanation, so read them after you answer.

The examples follow current React practice. They use function components and hooks, and they avoid APIs that newer versions of React have removed or replaced.

Course Structure

The course is organized into the following chapters, in this order:

• Introduction to React: what React is, whether it is a library or a framework, why developers use it, and how it compares with plain JavaScript.
• JSX Basics: the HTML-like syntax used to describe a user interface, how it mixes markup with JavaScript, and the mistakes beginners make most often.
• Components: how to write function components, the building blocks of every React page.
• Props and Prop Drilling: how one component passes data to another, what happens when data must travel through many layers, and how context shares data with distant components.
• Lists and Keys: how to render a list of items from an array, and why each item needs a key.
• Styling: how to style React components with plain CSS files and with CSS frameworks such as Bootstrap and Tailwind CSS.
• Hooks Overview: what hooks are, the rules for calling them, and the hooks React provides.
• State: how a component remembers values that change, such as a counter or the text in a form.
• Event Handling: how to respond to user actions such as clicks and form submissions.
• Controlled and Uncontrolled Components: two ways to read the values of form fields, and when to use each.
• Conditional Rendering: how to show or hide parts of the page based on a condition.
• Refs: how to keep a value that does not trigger a new render, and how to reach a DOM element directly with the useRef hook.
• Data Fetching: how to load data from a server with the useEffect hook, and how its dependency array controls when the effect runs.
• useReducer: how to manage state that has many related values or many ways to change.
• Routing: how to move between pages of a single application with React Router.
• Custom Hooks: how to move repeated logic out of components into functions of your own.
• Best Practices: habits that keep React code readable, fast and easy to maintain.

By the end of the course, you will be able to build an interactive React application that keeps track of changing data, responds to user input, loads data from a server and moves between several pages. You will also understand the reasons behind each pattern, which prepares you to learn more advanced React topics and libraries afterward.