Description
Ready-to-teach React mini-project with zero prep — just post the starter link and go.
Students build a fully functional Employee Directory using React — choosing their own company narrative, designing their data schema, and rendering a dynamic list of employee cards. This is the project that makes props and .map() click.
What's included (2 files):
- Slide deck (12 slides) — warm-up, objectives, requirements, and four scaffolded project phases: Define, Prepare, Code, Reflect
- Exit ticket — project documentation + 4 reflection prompts + CodeSandbox link submission
What students build: A React app with a reusable EmployeeCard component, a data.js file storing employee objects, and .map() rendering the full list dynamically. Students choose their own company type — startup, creative studio, school, sports org, or their own idea — so every directory looks different even though the code structure is the same.
The learning arc: The warm-up shows students three hardcoded components and asks what 200 of them would look like. By the end of class, they've answered their own question with real working code.
Who this is for: High school CS teachers and college intro CS instructors. Students should have completed Lesson 1 (Introduction to React JS) or have basic familiarity with components and props.
No additional React experience required.
Platform: CodeSandbox (browser-based, free, no installation)
EDUCATION STANDARDS
- CSTA 3A-AP-13
- CSTA 3A-AP-16
- CSTA 3A-AP-17
- CSTA 3B-AP-14
React JS Mini-Project | Employee Directory | Components, Props & .map()
Highlights
Description
Ready-to-teach React mini-project with zero prep — just post the starter link and go.
Students build a fully functional Employee Directory using React — choosing their own company narrative, designing their data schema, and rendering a dynamic list of employee cards. This is the project that makes props and .map() click.
What's included (2 files):
- Slide deck (12 slides) — warm-up, objectives, requirements, and four scaffolded project phases: Define, Prepare, Code, Reflect
- Exit ticket — project documentation + 4 reflection prompts + CodeSandbox link submission
What students build: A React app with a reusable EmployeeCard component, a data.js file storing employee objects, and .map() rendering the full list dynamically. Students choose their own company type — startup, creative studio, school, sports org, or their own idea — so every directory looks different even though the code structure is the same.
The learning arc: The warm-up shows students three hardcoded components and asks what 200 of them would look like. By the end of class, they've answered their own question with real working code.
Who this is for: High school CS teachers and college intro CS instructors. Students should have completed Lesson 1 (Introduction to React JS) or have basic familiarity with components and props.
No additional React experience required.
Platform: CodeSandbox (browser-based, free, no installation)
EDUCATION STANDARDS
- CSTA 3A-AP-13
- CSTA 3A-AP-16
- CSTA 3A-AP-17
- CSTA 3B-AP-14
