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?

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. 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

Part 0. Why this unit

• How API

Part 1. Why this lesson?

Part 2. Common Language

• Request/Response Cycle

CLeeBenjamin

🏙️ Mission Statement

Erase this line

---

😀 Who do we serve?

Erase this line

---

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

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

React Router Lecture with Sankofa

Slides

Review of React - 15 minutes

• Take a good look at Robodex!
• What are the features you all built out together?
• What is the component hiearchy?
• What state lives in Context? Why?
• What state doesn't live in Context? Why not?

CLeeBenjamin

Lecture 0: Unit Testing

Slides

Intro To Test Driven Development - 10 minutes

1.) What is Test Driven Developmemnt?

• development strategy.
• test first and then code.

>> 2.) Why is Test Driven Developmemnt important?

CLeeBenjamin

Lecture 1: Test Coverage

Slides

Review - 10 minutes

1.) Setting up testing for Fizzbuzz

• how to install jest
  
• setup test files
  
• red, green, refactor