se-ntl-102824 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	Slides
1. (11/18/24) Components & Props	Notes	Video1 - Video2	Starter	Solution	Slides
2. (11/19/24) State & Events	Notes	Video	Starter	Solution, Local variables vs state variables, SmartHome app - Passing State as Props	Slides
3. (11/20/24) Information Flow	Notes	Video	Starter	Solution, SmartHome app with clickable bulbs, SmartHome app with individually clickable bulbs	Slides
4. (11/21/24) Forms	Notes	Video	Starter	Solution, controlled form with single state object, controlled form with individual pieces of state	Slides
5. (11/22/24) Side Effects & Data Fetching	Notes	Video	Starter	Solution, useEffect cleanup demo	Slides
6. (11/25/24) PATCH & DELETE	Notes	Video	Starter	Solution	Slides
7. (11/27/24) Client-Side Routing	Notes	Video	Starter	Solution	Slides
8. (12/1/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