React Foundations: Building Interfaces, Explained Properly
About this course
A complete, patient introduction to React for people who can write JavaScript but have never built a user interface. You will start with the problem React exists to solve — keeping a screen in step with changing data — and build up through JSX, components, props, state, events, lists, effects and custom hooks to a small application you write yourself. Every hook is introduced by the problem it solves, and the rules that look arbitrary are explained by the mechanism underneath them, so you can predict what React will do instead of guessing. The mistakes that cost beginners days are covered directly: the screen that will not update, the effect that loops forever, the stale value inside a handler, the missing key warning nobody explains. By the end you can build and debug a real React interface.
What you'll learn
- Explain what problem React solves, and describe a screen as a function of state
- Write components with JSX and pass data between them with props
- Manage state with useState, and know why updating an object in place does nothing
- Handle events and build controlled forms that validate as the user types
- Render lists correctly, and explain what keys are actually for
- Use useEffect for genuine outside work, and avoid the effects you do not need
- Fetch data with loading and error states handled properly, without race conditions
- Lift state up, and recognise when to reach for context instead
- Extract custom hooks to reuse logic across components
- Debug the common React failures: stale closures, infinite loops, missing keys
Stuck on something? Ask
Every lesson has an assistant that can see the lesson you are reading. Ask in your own words and it answers using the same examples and table names in front of you — no switching to a search engine and losing your place.
Why does WHERE come after FROM?
Because the database reads the rows first, then decides which to keep. That order is also why WHERE cannot see a SELECT alias.
It will not give you assessment answers — it explains the idea they test, so the certificate still means something.
Not ready yet?
One email when something new is published. Nothing else.
Course content
The Problem React Solves 5 lessons
- The problem, before the solution Preview
- How React makes that affordable Preview
- Download: playground.html (no installation needed) Preview
- Knowledge check: why React exists
- Section 1 handout (PDF)
JSX: Describing What the Screen Should Show 5 lessons
- What JSX actually is
- Putting values in
- Styling, and reading unfamiliar JSX
- Knowledge check: JSX
- Section 2 handout (PDF)
Components and Props 5 lessons
- A component is a function
- Props: passing data in
- children, and composition
- Knowledge check: components and props
- Section 3 handout (PDF)
State: Data That Changes 5 lessons
- Why a variable is not enough
- Setting state is a request, not an assignment
- A real project with Vite
- Knowledge check: useState
- Section 4 handout (PDF)
Events and Forms 5 lessons
- Handling events
- Controlled inputs
- A complete form
- Knowledge check: events and controlled inputs
- Section 5 handout (PDF)
Lists and Keys 4 lessons
- Rendering a list
- What keys are really for
- Knowledge check: rendering lists
- Section 6 handout (PDF)
Conditional Rendering 4 lessons
- The four ways, and when each fits
- Choosing well
- Knowledge check: showing things conditionally
- Section 7 handout (PDF)
Effects: Reaching Outside React 4 lessons
- What an effect is, and when you need one
- The three ways effects go wrong
- Knowledge check: useEffect
- Section 8 handout (PDF)
Fetching Data 4 lessons
- Three states, not one
- Race conditions, and a reusable hook
- Knowledge check: loading data
- Section 9 handout (PDF)
Sharing State Between Components 4 lessons
- Lifting state up
- Context, and when not to use it
- Knowledge check: lifting state and context
- Section 10 handout (PDF)
Putting It Together: A Complete Application 5 lessons
- The brief, and the shape
- The rest of the components
- Debugging React, and what comes next
- Final assessment: React in practice
- Section 11 handout (PDF)
Frequently asked questions
What do I need to know before starting?
JavaScript — specifically array methods like map and filter, destructuring, the spread operator, arrow functions and async/await. If those are unfamiliar, take JavaScript Foundations first. Most people who find React hard are not confused by React; they are confused by the JavaScript it is written in.
Do I need to install anything?
For the first three sections, no — a single HTML file you can open by double-clicking is provided, so you can write components before installing a thing. From section 4 the course moves to Vite, which needs Node 20 or later, and section 4 walks through it.
Does it cover class components?
Only enough to recognise them in older code. Function components and hooks are how React has been written since 2019, and learning both at once means never being sure which rules apply. The React team recommends hooks for all new code.
Does it cover Next.js, Redux or TypeScript?
No, deliberately. Each is a large topic layered on top of React, and mixing them in makes it impossible to tell which tool is causing which behaviour. This course teaches React itself, which is what all three assume you already know.
Which version of React is this?
React 19, using function components and hooks throughout. Almost everything here applies unchanged to React 18 and to 16.8 onwards; where a version genuinely matters, the text says so.
Is this a video course?
No. Every lesson is written out in full, so you can read at your own pace, search it later, and keep it open beside your editor. Each section also ships as a printable PDF handout.
Will I be able to build a real application afterwards?
You will be able to build and debug a real interface — components, state, forms, lists and data from an API, which is the bulk of most front-end work. Routing, authentication and deployment are separate topics you can pick up individually once the foundation is solid.
Instructor
Fepiq Courses
Practical engineering courses written for people who prefer reading to watching.
We'll send your receipt and a sign-in code here. No password needed.
Full lifetime access · Certificate on completion · AI tutor in every lesson
Save ₹499
Front-End Foundations: JavaScript and React
- JavaScript Foundations: The Language, Explained Properly
- React Foundations: Building Interfaces, Explained Properly (this course)