📖 Link Materials to Class Agenda:
- Slides (make a copy for your program - link the copy)
- No coding exercises for students to fork. They will practice in HackerRank for this lesson.
- HackerRank Exercise
- 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 Review (10) :
- Review the concept of state in React.
- Explain the importance of state in interactive applications.
- Introduce the useState hook.
- Walk through syntax and examples of how to declare state and update it.
- Discuss how state can impact multiple components and the concept of “lifting state up”.
-
👀 HackerRank Overview (5) :
- Explain what HackerRank is and its significance in technical interviews.
- Walk students through logging into HackerRank and navigating the interface.
-
💻 Code Along (10) :
- Solve the first problem together as a class.
- Emphasize not just the coding aspect, but also navigating the HackerRank platform and online IDE.
-
💻 Code Solo (25) :
- Students work individually or in small groups to solve the next two HackerRank problems.
- Remind students to regularly check their work in the preview screen.
-
👀 Code Solo Review (5) :
- Discuss the solutions of Problem 3 specifically.
- Address any questions or concerns students might have regarding the solutions.
-
⏳ Break (10)
-
💻 Project Work Time (40) :
- Students should focus on Sections 2 and 3, covering Components, JSX, Props, Nested Components, and State.
- Remind students to push their work to GitHub upon completion.
-
👋 Exit Ticket & Closing (10) :
- Direct students to the Exit Ticket in the Class Agenda.
- Ensure they submit before leaving.