CLeeBenjamin

Today's Topics:

• Part 1: Life without context
• Part 2: Why context?
• Part 3: Using context

Part 0. Review

Quick Review: Turn and Talk (5 mins)

1. What purpose does context hook serve? >> Context allows you to share data that can be used by multiple components without having to explicitly pass it as props.

CLeeBenjamin

🥅 Purpose : This page will be the first page seen when using our app

🔖 Requirements: Page requires the following components to be created:

• Navigation Bar at the top of the page
• A main section
• A footer

❓ How: Using react, we'll create components for each section and have separate files. This will then be imported to our App.js

CLeeBenjamin

🏙️ Mission Statement

Erase this line

---

😀 Who do we serve?

Erase this line

---

CLeeBenjamin

Part 0. Why this unit

• How API

Part 1. Why this lesson?

Part 2. Common Language

• Request/Response Cycle

CLeeBenjamin

Part 0. Why

We have learned so far:

• DOM, Events, Forms -> basic components for creating interactive websites
• Seeing these components together

Part 1. Understanding The Game

Take 5 minutes with your partner to understand the game. Questions we will answers when we come back whole group:

CLeeBenjamin

/// DOM Elements
const headerDiv = document.createElement("div");
const h1 = document.createElement("h1");
const h4 = document.createElement("h4");
const sportsDiv = document.createElement("div");
const sportDivH1 = document.createElement("h2");
const sportsList = document.createElement("ul");
const soccerLi = document.createElement("li");
const footballLi = document.createElement("li");
const campingLi = document.createElement("li");

CLeeBenjamin

Part 0. Intro

This is what we've talked about so far...

• DOM API -> Creating Interactive Websites
• Events -> A user interacts, how should our application respond?

Today's Topics:

• Part 1: Forms -> Allow us to receive data from users
• Part 2: Callback Function -> Function sequence, change in sequence with call back
• Part 3: Event Object -> What is an event object? Why it's useful in web applications?