React 👩🏻‍🏫

🚗 React Roadmap The goals for Phase 2: Create a static frontend site with components and props (DOM Manipulation) Use state and events to make your site dynamic (Event Handling)

State and Events ✅ Objectives Add event handlers to elements in React Use the useState hook to create state variables Create event handler callbacks that manipulate state Trigger re-renders by setting state Distinguish between props and state 📅 Agenda Handle events and introduce state by creating a click counter Show that setState is asynchronous Using setState with value vs function Deliverables Toggle Dark Mode Button Text on click Exercise Add a ’like’ button to each project card Filter / search by project name Handling events in vanilla JS In vanilla JS, our steps for handling events looked like this: // 1.

React Information Flow ✅ Objectives Define the term “lifting state” Revisit our component hierarchy and describe the Flow of Information Decide which components should have state

React Forms 📝 ✅ Objectives Explain why we use controlled forms (vs uncontrolled forms) Implement a controlled form Use form data to update state in a parent component

Side Effects and Data Fetching ✅ Objectives 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 Deliverables Persist the new project upon the ProjectForm submission Implement useEffect in App component to load projects Demonstrate the order of operations between rendering a component and running the side effect Demonstrate the unmounting and cleanup phase of a component through useEffect What to know before discussing side effects?

Client Side Routing 🖥 💻 ✅ Objectives Understand the difference between server side routing and client side routing Create a multi-page SPA Utilize the most common react-router components to build a SPA: BrowserRouter, Routes, Route, and Link Use custom hooks like useParams and useHistory to access the state of the router Use the history object to navigate pages Create dynamic routes and use params How Does Server-Side Routing Work for Non-React Websites?