Skip to content

learn-co-students/se-west-031124-Phase-2-ProjectShowcase

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SENG-LIVE-000000 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. (00/00/00) Components & Props Notes Video Starter Solution
2. (00/00/00) State & Events Notes Video Starter Solution, Local variables vs state variables, SmartHome app - Passing State as Props
3. (00/00/00) Information Flow Notes Video Starter Solution, SmartHome app with clickable bulbs, SmartHome app with individually clickable bulbs
4. (00/00/00) Forms Notes Video Starter Solution, controlled form with single state object, controlled form with individual pieces of state
5. (00/00/00) Side Effects & Data Fetching Notes Video Starter Solution, useEffect cleanup demo
6. (00/00/00) PATCH & DELETE Notes Video Starter Solution
7. (00/00/00) Client-Side Routing Notes Video Starter Solution
8. (00/00/00) 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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published