Live Instruction · React · JavaScript · Masterschool
React Fundamentals Review —
Virtual DOM, JSX, Props, and Component Design
A review week session using breakout rooms and full-group debrief to cover core React concepts — virtual DOM, composition, one-way data flow, JSX, Babel, and declarative vs imperative code, with fill-in-the-blank exercises on props, conditional rendering, list keys, and className, and a live React 18 API discovery mid-session.
The Session
Group work, then debrief
Review weeks work best when students do the thinking, not just receive more content. This session opened with breakout rooms — students worked in groups on a set of concept questions covering the React fundamentals they'd been introduced to, and then each group brought their answers back to the full session for debrief.
The debrief format meant students heard their peers' explanations first, which are often the most useful. When Nico's group described the virtual DOM as a parallel copy of the DOM that React uses to compare and patch only what changed, that framing was ready to build on — the GitHub diff analogy landed because the concept was already in the room.
The second half of the session moved into fill-in-the-blank syntax exercises covering JSX, props, conditional rendering, list keys, and className. A student flagged mid-session that ReactDOM.render had been deprecated in React 18 — that turned into a live look at the updated API, a good reminder that staying current is part of the job.
7
core concepts reviewed
Masterschool Coding Bootcamp
React · JSX · Component Design · Udacity Curriculum
International cohort · Review week · Breakout rooms
The Content
What the session covered
Seven core React concepts reviewed through student-led group work, full-group debrief, and syntax exercises.
Virtual DOM
Students defined the virtual DOM as a parallel JavaScript copy of the real DOM that React uses to compare versions and patch only what changed — keeping the UI fast without re-rendering the entire browser. Expanded with the GitHub diff analogy and connected it to why React was built at Facebook's scale.
Composition
Covered composition as the pattern of building an application from small, reusable components — each with a single purpose — that get assembled together. Connected it to the practical value of building a personal component library that travels across projects and jobs.
Component-Based Design
Defined components as modular, reusable pieces of UI — contrasting with the older model of separate HTML, CSS, and JavaScript files. Introduced the idea of 'thinking in React': designing the UI as a tree of components first, then building each one.
Imperative vs Declarative
Walked through the distinction between imperative code (step-by-step instructions — addEventListener, which function to run) and declarative code (tell the system what you want, let it handle the steps). Placed React, HTML, and CSS on the declarative side, and noted that JavaScript can be both depending on how you use it.
One-Way Data Flow
Dominic's group answered cleanly: data flows from parent to child via props, not the other direction. Connected it to the function/parameter analogy students already knew, contrasted it with Angular's two-way binding, and previewed 'lifting state up' and the Context API as the tools for sharing state across siblings.
JSX and Babel
Covered JSX as HTML-like syntax that lives inside JavaScript files — allowing components to return markup directly without separating concerns across files. Nico explained why Babel is necessary: JSX is not valid JavaScript that browsers can read, so Babel transpiles it. Babel ships bundled inside create-react-app.
Fill-in-the-Blank Exercises
Worked through syntax exercises covering: ReactDOM.render, array destructuring with the comma-comma pattern to skip elements, React.createElement for rendering without JSX, curly braces for JavaScript expressions inside JSX, className instead of class, passing and accessing props, and the key prop in list rendering.
Conditional Rendering
Covered short-circuit evaluation with && as the React pattern for conditional rendering — if the left side is falsy, the right side never evaluates and nothing renders. Used the isLoggedIn && Profile example to show how it maps to real UI logic without needing a full if/else.
React 18 API Discovery
A student flagged mid-session that ReactDOM.render was showing a deprecation warning in React 18. Pulled up the React docs live and walked through the updated API — ReactDOM.createRoot(element).render() — noting that the docs themselves were still in the middle of being updated, a real example of how fast the ecosystem moves.
The Approach
Students present, then instructor contextualizes
The breakout room format puts the cognitive work on students before the debrief begins. Rather than hearing a definition and being asked to confirm it, students had to construct their own answers in groups first. That process surfaces real gaps and produces better questions — by the time the full group came back together, the concepts had already been wrestled with once.
The debrief structure kept things efficient: call on a group, let them present, then add what's missing or give the concept somewhere further to go. When Dominic's group had the one-way data flow answer down cold, there was no need to re-explain it — just connect it to what's coming next. Lifting state up, Context, sibling communication — all of that has a cleaner landing when the foundation is already student-built.
The React 18 deprecation moment is worth noting as an instructional choice: rather than glossing over the student's flag, pulling up the docs live and walking through the updated API modeled something important. The ecosystem changes, the docs lag sometimes, and staying current is a skill in itself.
The session closed with a preview of Epic React — the next phase of the curriculum — and a Friday setup session to get everyone onboarded before the first exercise. Ending with what comes next keeps the momentum going rather than leaving students with just a review.
Breakout Rooms
Groups work through concept questions · ~30 minutes
Full-Group Debrief
Each group presents answers live
Add Context
Analogies · connections to prior content · what comes next
Syntax Exercises
Fill-in-the-blank · JSX · props · rendering · keys
Epic React Preview
Friday setup session · Epic React onboarding
Session Recording
Watch the Session
Review week React fundamentals — breakout rooms, full-group debrief, and fill-in-the-blank syntax exercises.
Reflection
Let students answer first
Review weeks are easy to run as re-lectures — the same content, delivered again, to students who already heard it once. The breakout format avoids that by making students do the work before the debrief starts. The quality of the answers that came back confirmed what was solid and pointed directly at what still needed reinforcement.
The fill-in-the-blank exercises in the second half of the session served a different purpose than the concept questions. Knowing what JSX is conceptually and knowing that className replaces class in JSX syntax are two different things. The exercises pushed students to recall specific syntax rather than general descriptions, which is closer to what they'll actually be doing in the next project.
2
formats · one session
Breakout rooms · full-group debrief
Concept review · syntax exercises
Student-led answers · instructor context
Keep Exploring
Related Case Studies
Interested in working together?
I'm open to remote opportunities in technical learning experience design, developer education, and customer enablement.