Front-End Development with React: Components, Hooks and Real Interfaces
Signature Course No. 330 — A Signature AI Socratic Coaching Course.
Assumes you can already build a page by hand — your coach starts where you are.
A New Kind of Learning
Socratic coaching, delivered by an agentic AI coach.
Not a course you watch. An AI coach you work with.
The Lighthouse Coach begins by discovering how you think about the subject, teaches what is missing, and gives you realistic practice before asking you to prove that you can use it. You may test out of concepts you already understand, while capstones turn the learning into a practical plan, decision, conversation, or other real-world result.
The curriculum is deliberately authored; the AI delivers it through coaching. It is not an AI randomly generating lessons.
A coach that teaches by asking — not by lecturing
The Lighthouse Coach is an AI Socratic coach built on Cognosco Learning's Front-End Development with React: Components, Hooks and Real Interfaces course, in the Personal Effectiveness & Well-Being category. It does not play videos at you. It holds a conversation: it asks you a question, listens to your answer, names the misconception it hears, affirms what you got right, and asks the next question — the way a great coach works in the room.
The screen is a tree, not a page. In hand-built code, every update is your personal responsibility — the basket count in the header, the total in the panel, the same price in three places — and the responsibilities tangle. React's answer is the founding idea of this course: an interface is a tree of components, and each component is a function that takes inputs and returns a description of a piece of the interface. You describe what each piece should look like for its current inputs, and React works out what must change on screen.
It starts with the component model. You will learn to decompose an interface into components with one-sentence jobs, pass data down with props under a strict one-way flow, give a component memory with state, and decide — deliberately — where each piece of state should live. Most React defects in real codebases are not syntax errors: they are state placed in the wrong owner, effects doing work that rendering should have done, and props drilled through five indifferent components. This course builds the judgment that prevents them.
It works in two movements. First, Module 1 — Thinking in Components — work through Concepts 1–9, finishing with The Catalogue That Holds Together; then, Module 2 — Hooks, Effects and Real Interfaces — work through Concepts 10–18, finishing with The Portal, Shipped Whole.
Both capstones produce real artifacts — a complete build record for Cinderpath's catalogue interface: the component tree, the prop contracts, the state ownership plan, and the key components' render and handler logic, defended in writing; and the portal build record for the routed, data-fetching customer portal that grows out of it: effect and fetch design, hook extractions, context and reducer architecture, the route table, and the shipping evidence.
The honesty standard is part of the course. This course teaches the durable React model — components, props, state, hooks, effects, and rendering — not a version's changelog, and it claims no vendor certification: the completion certificate attests to this course's standard only. Where a practice is genuinely version-sensitive, the course teaches the underlying principle and marks the exact point to verify against current documentation, rather than asserting a transient detail as permanent fact.
The course is self-paced and always on — roughly 30 minutes per concept, about 9 hours in full, taken in as many sittings as you like. You can type your answers, or talk out loud: the Voice Coach speaks its questions and listens to your spoken replies. Learners who already know the material can test out concept by concept.
Front-End Development with React: Components, Hooks and Real Interfaces is part of The Lighthouse Signature Series — the online counterpart to the one-day, in-person learning Cognosco Learning has delivered since 2002.
Course Facts
One full concept, coached end to end — free: verify your email and we’ll send you a link to start.
Already enrolled? Enter the course →
Diagnose → Learn & Practice → Prove → Capstone
Every learner moves through the same discipline a Cognosco instructor would insist on in the room.
Diagnose
The Coach starts where the course starts: with the last page you built by hand. Which three pieces of it changed for different reasons, or appeared more than once — and would therefore earn component boundaries first? When something on that page had to update, how many places did you personally have to remember to change? Every concept opens with three questions that locate where you actually stand, and your answers shape how deeply the Coach works the concept with you. Everyone begins with Module 1 — no skipping the foundations you only think you have.
Learn & Practice
Work each concept in conversation with the Coach — spoken or written — then practice it against realistic situations until it holds up.
Prove
Every concept ends in proof: answer the check cold and demonstrate the skill. Know it already? Test out and take credit immediately.
Capstone
Finish with two capstones — The Catalogue That Holds Together for Module 1 and The Portal, Shipped Whole for Module 2 — that pull the whole course together, and earn the certificate.
What You'll Learn
See the screen, name the jobs, draw the tree — in that order, every time. Every skill in this course is the same judgment at a different scale: give each piece of the interface one job, feed it exactly the data it needs, and place every fact in exactly one home, so the interface's truth lives in one place per fact.
Module 1 teaches you to think in components. Thinking in Components; JSX and Rendering; Props; State with useState; Rendering Lists and Keys; Conditional Rendering and Composition; Events and Controlled Forms; Sharing State; and Designing Components — how a screen becomes a tree, how data flows down it, and where each piece of state lives.
Module 2 makes those components live in the real world. Effects; Fetching Data; Custom Hooks; Refs and Memoization; Context; Reducers; Routing; Performance and Rendering Discipline; and Testing, Accessibility, and the Shipping Standard — synchronizing with the world outside React, fetching honestly, and shipping to a standard you can prove.
And it holds the shipping standard throughout. An interface is not done when it renders once: it is done when its loading, error, and empty faces are designed, its keyboard path has been walked, its wasted renders have been profiled rather than guessed at, and its behavior is proven by focused tests. That standard is taught concept by concept, and both capstones are judged against it.
What you will learn
- Decompose any screen into a component tree with named responsibilities, and defend each boundary you draw
- Write components in JSX that render data — not markup pasted by hand — and explain exactly when and why a component re-renders
- Pass data with props under a strict one-way flow, design a component's prop interface, and compose components with children instead of duplicating them
- Model local state with useState, derive everything derivable instead of storing it, and update state correctly from its previous value
- Render lists with stable keys, render conditionally without tangles, and build controlled forms that validate as the user types
- Place every piece of shared state with its rightful owner — lifting state up, reaching for context, or holding state in a reducer — and say why
- Use effects only for genuine synchronization with the outside world, fetch data with honest loading, error, and empty states, and cancel stale work
- Extract repeated logic into custom hooks, use refs and memoization surgically, and route a multi-view application at working depth
- Audit an interface for wasted renders, broken keyboard behavior, and missing labels — and prove your components with focused tests before you ship them
Everything in the course
- All 18 concepts of Front-End Development with React: Components, Hooks and Real Interfaces, in 2 modules
- A starting-point check first — the Coach finds where you actually stand before teaching
- Learn, Practice, Prove for every concept — no passive video watching
- A test-out on every concept: prove you know it and move on
- The Voice Coach: talk with the Coach out loud — it speaks, listens, and replies
- A personal Learner Record of your work across the course
- Two capstone exercises: The Catalogue That Holds Together and The Portal, Shipped Whole
- A printable session summary whenever you pause
- The Lighthouse Coach completion certificate (Signature Series)
- Your progress is saved as you go — stop anytime, resume where you left off
Built for developers whose pages have outgrown hand-built code
Hand-coders moving to framework work — who can already build a page by hand and now need interfaces that change: catalogues that filter, carts that total, forms that validate, dashboards that refresh; and developers joining a team whose product is a React application.
Freelancers whose clients have outgrown static pages — who need the component model as working craft, not as a feature tour.
This course assumes the fluency of Building Websites by Hand (Signature Course No. 329) or equivalent experience: you can build a page by hand, and you can read and write modern JavaScript — arrow functions, destructuring, array methods, modules, promises. It does not assume any prior framework experience, any particular editor or toolchain, or any back-end knowledge beyond knowing that a server can answer a request with data. If the JavaScript is still shaky, work No. 329 first — React will not rescue weak JavaScript; it will expose it faster.
Prefer to learn live and in person? The same material anchors Cognosco's one-day programs — browse the in-person catalog.
Start with Thinking in Components
$195 — introductory price. One payment. No subscription, no password to manage.
Here is exactly what happens when you enroll:
- Pay securely with Stripe — you are taken straight into the course
- Create your learner profile and begin the Module 1 starting-point check
- Save the access key you are given — it restores your enrollment on any device
- Learn at your pace; your progress is stored in your browser on your device
For the full voice experience, use Chrome and allow the microphone when asked. Typing your answers works everywhere, all the time. Questions before you enroll? Email hello@cognoscolearning.com.
Before you enroll
What is a Socratic coaching session?
A conversation, not a video. Your coach asks a question; you answer — out loud by voice, or by typing — and the coach responds to what you said: naming the misconception it hears, affirming what you got right, and asking the next question. You advance only when you have mastered each concept, so a finished course means the learning held.
How long does it take — and how long do I have?
About 30 minutes per concept. Learn in sittings of any length; your progress is saved as you go. You have a full year from purchase to finish, and you can revisit and retake within that year.
What does the certificate verify?
That you completed every concept and both capstones of this course. Anyone can confirm a Cognosco certificate online — enter its certificate ID on our verification page.
What if it isn't for me — what are the refunds?
If you have not started, cancel for a full refund within seven days of purchase. Once you have started, there is no cash refund — stop before finishing and we credit the full amount you paid toward any other course in the library (credit valid one year from your original purchase). Once you complete the course, no refund or credit applies.
More Signature Courses are coming
Front-End Development with React: Components, Hooks and Real Interfaces is Signature Course No. 330. Leave your email and we'll send you news of future Signature Courses and Lighthouse updates as they are announced — nothing else.