- 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. (12/12/22) Components & Props | Notes | Video | Starter | Solution |
2. (12/13/22) State & Events | Notes | Video | Starter | Solution, Local variables vs state variables, SmartHome app - Passing State as Props |
3. (12/14/22) Information Flow | Notes | Video | Starter | Solution, SmartHome app with clickable bulbs, SmartHome app with individually clickable bulbs |
4. (12/16/22) Forms | Notes | Video | Starter | Solution, controlled form with single state object, controlled form with individual pieces of state |
5. (12/19/22) Side Effects & Data Fetching | Notes | Video | Starter | Solution, useEffect cleanup demo |
6. (12/20/22) PATCH & DELETE | Notes | Video | Starter | Solution |
7. (12/23/22) Client-Side Routing | Notes | Video | Starter | Solution |
- 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
- JSX
- Components
- Props
- Destructuring
- 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
- Creating & Updating State
- Events
- Callbacks
- useState
- 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
- Callback functions as props
- Changing parent state
- Reusing components w/ different behaviors
- 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
- Controlled vs uncontrolled inputs
- Forms
- 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
- useEffect
- Dependency array
- fetch => GET & POST
- Observe how to send a PATCH & DELETE request
- Review changing parent state
- fetch => PATCH & DELETE
- 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
- React Router