theecryptoking / east-se-041023-phase-2-react

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. Components & Props	Notes	Video	Starter	Solution
2. State & Events	Notes	Video	Starter	Solution
3. Information Flow	Notes	Video	Starter	Solution
4. Forms	Notes	Video	Starter	Solution
5. Side Effects & Data Fetching	Notes	Video	Starter	Solution
6. PATCH & DELETE	Notes	Video	Starter	Solution
7. Client-Side Routing	Notes	Video	Starter	Solution

---

1: Components and Props

SWBATs:

• Explain the importance of components
• Define a component using JSX
• Explain what props are and how to create them
• Recognize destructured props and how to work with them
• Observe how to render multiple components from a list

Lecture Topics:

• JSX
• Components
• Props
• Destructuring

---

2: State & Events

SWBATs:

• Understand how to create events in React
• Understand how to define the event handler function
• 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
• Recognize destructured props and how to work with them

Lecture Topics:

• Callback functions as props
• Changing parent state

---

4. React 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
• 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 V6
• Observe how to use the react-router-dom hooks useLocation, useNavigate, and useParams

Lecture Topics:

• React Router

---

Demo Documentation

Figma Wireframes

Api Documentation via Postman