📖 Link Materials to Class Agenda:
- Slides (make a copy for your program - link the copy)
- State Example
- Coding Exercise(s)
- Project Submission Form
-
👋 Welcome & Do Now (10) :
- Briefly welcome students and introduce the day's objectives.
- Conduct an icebreaker activity (details to be added by the lead volunteer).
- Create a short Do Now activity that meets students' needs. (optional)
-
🗃️ State Review (15) :
- Introduce the concept of state in React, explaining it as an object used to store data that influences component behavior.
- Highlight the importance of state in dynamic applications.
- Use simple components (e.g., Location Component, Traffic Signal Component) to illustrate how state is structured and its role in defining component behavior.
- Encourage students to discuss why state is essential and how it helps describe the application's current condition.
- Explain how user interactions affect state changes and necessitate component re-renders.
- Clarify the difference between props and state, emphasizing that props are passed to components and immutable, whereas state is managed within components and mutable.
-
💻 Practice with State (20) :
- Dive deeper into managing local state using the useState hook, explaining syntax, functionality, and usage through examples.
- Guide students through coding exercises to reinforce their understanding of state management in React.
- Consider varying the format based on class size and student preferences (individual vs. group work).
-
⏳ Break (10)
-
💻 Project Work Time (60) :
- Start with a team scrum to discuss goals and tasks.
- Allocate time for coding, with periodic check-ins to reassess progress.
- Emphasize the use of documentation and online resources for troubleshooting and learning.
-
👋 Closing (5) :
- Direct students to the Exit Ticket in the Class Agenda.
- Ensure they submit before leaving.