📖 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.
-
⌨️ Event Handlers Review (10) :
- Define an event handler.
- Identify events on a given website.
- Emphasize that event handlers are crucial in making web pages interactive.
- Mention that common events include clicks, double clicks, hovering, etc.
-
💻 Code Along (10) :
- Activity: Walkthrough creating an event handler.
- Discuss callback functions and how they can be used in event handling.
-
⤵️ Functions as a Prop Review (10) :- Highlight how to pass a function as a prop in React.
- Give a quick overview the concept of Unidirectional Data Flow in React.
- Activity: Analyze a React code snippet that demonstrates passing functions as props.
-
💻 Code Solo (20) :
- Activity: Provide students with a partially completed React application.
- Challenge them to implement event handlers and pass functions as props based on the lesson.
-
⏳ Break (10)
-
💻 Project Work Time (40) :
- Students work on their personal React projects, incorporating event handlers.
- Instructors should offer guidance as needed.
-
👋 Exit Ticket & Closing (10) :
- Direct students to the Exit Ticket in the Class Agenda.
- Ensure they submit before leaving.