Coder Social home page Coder Social logo

seng-live-091922-phase-2's Introduction

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

seng-live-091922-phase-2's People

Contributors

viewsdevelop avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.