📖 Link Materials to Class Agenda:
- Slides (make a copy for your program - link the copy)
- Coding Exercise(s), Part 1
- Coding Exercise(s), Part 2
- Exit Ticket
-
👋 Welcome & Do Now (10) :
- Begin the session with a welcome message and a short activity to engage students.
- Have students complete the Do Now.
-
🗃️ State (15) :
- Definition: State is an object used to store data which controls the behavior of components.
- When anything changes in an app, it should be stored in state.
- Introduce the useState hook and its syntax.
- Provide examples of state using the useState function. Highlight the differences between destructuring and without destructuring.
- Show how state can update a component with the Orange example.
- Discuss how state interacts with various React events like onClick.
-
💻 Code Along (10) :
- Activity: Update the shape of a div when a user clicks a button using a state variable.
- Have students code along with the lead instructor.
-
🗄️ State w/ Multiple Comp. (10) :
- Discuss how to use state with multiple components and how to manage shared state among components.
- Introduce the concept of "lifting state up" and showcase with the Intersection example.
- Discuss the differences and relationships between Props vs. State with the Clock example.
-
💻 Code Solo (15) :
- Create a mini photo album using state.
- Create a mini photo album using state.
-
⏳ Break (10)
-
💻 Project Work Time (40) :
- Finish tasks from Section 2: Components, JSX, and Props.
- Start working on tasks from Section 3: Nested Components and State.
- Encourage students to push their work from Replit to GitHub.
-
👋 Exit Ticket & Closing (10) :
- Direct students to the Exit Ticket in the Class Agenda.
- Ensure they submit before leaving.