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