Description
There is almost no React curriculum built for classrooms. This is it.
This 50-minute lesson introduces high school students to React JS through a hands-on shop-building project. Students go from zero React knowledge to building a functional component, passing props, and rendering dynamic UI — all inside CodeSandbox, no installation required.
What's included (4 files):
- Slide deck (25 slides) with warmup, concept delivery, guided activities, CFUs, and wrap-up
- Student coding lab — step-by-step instructions, full code samples, vocabulary reference, and reflection prompts
- Exit ticket — 4 multiple-choice + 1 short answer
- Teacher lesson plan — lesson flow with timing, differentiation, common errors, and answer key
What students build: A product shop page using a reusable React component. They hardcode it first, feel the problem, then solve it with props. The "what if we have 20 items?" question is left open as the hook into Lesson 2.
Who this is for: High school CS teachers and college intro CS instructors. Students should have some familiarity with HTML/CSS and basic JavaScript. No prior React experience needed — for students or teachers.
Platform: CodeSandbox (browser-based, free, no installation).
EDUCATION STANDARDS CSTA (Computer Science Teachers Association) — these are what CS teachers filter by:
- 3A-AP-13 — Create prototypes that use algorithms to solve computational problems
- 3A-AP-16 — Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal need
- 3A-AP-17 — Decompose problems into smaller components through systematic analysis
- 3B-AP-14 — Construct solutions to problems using student-created components
Intro to React JS | Components & Props | High School CS Coding Lesson
Highlights
Description
There is almost no React curriculum built for classrooms. This is it.
This 50-minute lesson introduces high school students to React JS through a hands-on shop-building project. Students go from zero React knowledge to building a functional component, passing props, and rendering dynamic UI — all inside CodeSandbox, no installation required.
What's included (4 files):
- Slide deck (25 slides) with warmup, concept delivery, guided activities, CFUs, and wrap-up
- Student coding lab — step-by-step instructions, full code samples, vocabulary reference, and reflection prompts
- Exit ticket — 4 multiple-choice + 1 short answer
- Teacher lesson plan — lesson flow with timing, differentiation, common errors, and answer key
What students build: A product shop page using a reusable React component. They hardcode it first, feel the problem, then solve it with props. The "what if we have 20 items?" question is left open as the hook into Lesson 2.
Who this is for: High school CS teachers and college intro CS instructors. Students should have some familiarity with HTML/CSS and basic JavaScript. No prior React experience needed — for students or teachers.
Platform: CodeSandbox (browser-based, free, no installation).
EDUCATION STANDARDS CSTA (Computer Science Teachers Association) — these are what CS teachers filter by:
- 3A-AP-13 — Create prototypes that use algorithms to solve computational problems
- 3A-AP-16 — Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal need
- 3A-AP-17 — Decompose problems into smaller components through systematic analysis
- 3B-AP-14 — Construct solutions to problems using student-created components
