Skip to content

Latest commit

 

History

History
108 lines (91 loc) · 9.12 KB

README.md

File metadata and controls

108 lines (91 loc) · 9.12 KB
Raw

SE-WEST-042224 Phase 2 - React

Phase Level Objectives

  • Design a React component hierarchy based on a wireframe
  • Use React to create components that interact with an API
  • Incorporate client-side routing into a single-page application in React
Lecture Notes Videos Starter Solution
1. (05/13/24) Components & Props Notes Video Starter Solution
2. (05/14/24) State & Events Notes Video Starter Solution, Local variables vs state variables, SmartHome app - Passing State as Props
3. (05/15/24) Information Flow Notes Video Starter Solution, SmartHome app with clickable bulbs, SmartHome app with individually clickable bulbs
4. (05/16/24) Forms Notes Video Starter Solution, controlled form with single state object, controlled form with individual pieces of state
5. (05/17/24) Side Effects & Data Fetching Notes Video Starter Solution, useEffect cleanup demo
6. (05/20/24) PATCH & DELETE Notes Video Starter Solution
7. (05/21/24) Client-Side Routing Notes Video Starter Solution
8. (05/22/24) Styled Components Notes Video Starter Solution

1: Components and Props

SWBATs:

  • Review the benefits of React over Vanilla JS
  • Review the difference between HTML and JSX
  • Review the importance of Components
  • Review how a component is written
  • Explain what props are and how to create them
  • Recognize best practices when writing components and props
  • Observe how to render multiple components from a list

Lecture Topics:

  • JSX
  • Components
  • Props
  • Destructuring

2: State & Events

SWBATs:

  • Explain the importance of state
  • Explain the difference between state and props
  • Observe how to use the useState hook
  • Observe how to use DOM events in React

Lecture Topics:

  • Creating & Updating State
  • Events
  • Callbacks
  • useState

3: Information Flow

SWBATs:

  • Define the term “lifting state”
  • Recognize the pattern for changing state in a parent component from a child component
  • Explain the role that callback functions play in changing parent state
  • Observe how we can render reusable components that invoke different callback functions after an event
  • Recognize destructured props and how to work with them

Lecture Topics:

  • Callback functions as props
  • Changing parent state
  • Reusing components w/ different behaviors

4: Forms

SWBATs:

  • Explain the difference between a controlled and uncontrolled input
  • Explain why controlled inputs are preferred by the React community
  • Review how to use callback functions with events in React
  • Review how to change parent state from a child component

Lecture Topics:

  • Controlled vs uncontrolled inputs
  • Forms

5: Side Effects & Data Fetching

SWBATs:

  • Explain what a side effect is
  • Observe how React manages side effects with the useEffect hook
  • Observe how to use the useEffect hook to fetch data on page load
  • Observe how to send a POST request via form
  • Review changing parent state

Lecture Topics:

  • useEffect
  • Dependency array
  • fetch => GET & POST

6: PATCH & DELETE

SWBATs:

  • Observe how to send a PATCH & DELETE request
  • Review changing parent state

Lecture Topics:

  • fetch => PATCH & DELETE

7: Client Side Routing

SWBATs:

  • Review the difference between server-side and client-side routing
  • Observe a refactor to include client-side routing using React Router V5
  • Explain what a nested route is
  • Observe how to handle nested client-side routes

Lecture Topics:

  • React Router

8: (Optional) Styled Components

SWBAT:

  • Observe how styled-components are used for managing and organizing component styles
  • Observe how to pass props (i.e., as, theme) to dynamically render CSS for styled components

Lecture Topics:

  • Styled Components