learn-co-students / seng-live-080822-phase-2-react

SENG-LIVE-080822 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. (08/29/22) Components & Props	Notes	Video	Starter	Solution
2. (08/30/22) State & Events	Notes	Video	Starter	Solution, Local variables vs state variables, SmartHome app - Passing State as Props
3. (08/31/22) Information Flow	Notes	Video	Starter	Solution, SmartHome app with clickable bulbs, SmartHome app with individually clickable bulbs
4. (09/01/22) Forms	Notes	Video	Starter	Solution, Project Showcase solution with alternative approach to managing formState (multiple pieces of state instead of object) controlled form with single state object, controlled form with individual pieces of state
5. (09/06/22) Side Effects & Data Fetching	Notes	Video	Starter	Solution, useEffect cleanup demo
6. (09/07/22) PATCH & DELETE	Notes	Video	Starter	Solution
7. (09/12/22) Client-Side Routing	Notes	Video	Starter	Solution, Solution with NavLinks for projects by phase
8. (09/13/22) 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