Build Dynamic Web Apps with React & Firebase

Learn how to implement click events in React with onClick, handling events with named and inline arrow functions, and accessing the event object for dynamic logging and debugging.

Master the top-level rules for using hooks in React, including that useState runs at the top level of a component and within its scope.

Create a simple title component in a components folder for a React app. Export and nest it in the app using JSX and className, and style the title and subtitle.

Explore building a reusable modal component in React using the children prop, structuring a modal with a backdrop and CSS, and nesting content inside the app for flexible, varied modals.

Bind inputs to React state to create controlled inputs with onChange and value. The lecture demonstrates a reset function that clears title and date, updating the inputs accordingly.

Submit a form in React using onSubmit, prevent default, and build a new event object with title, date, and a unique id, then reset the form.

Create a blank React project and set up json server globally to simulate a database, adding a data/DB.json with a trips resource and API endpoints for fetch.

Learn how to manage function dependencies in React by using useCallback to memoize a fetch trips function and trigger useEffect only when the URL changes.

Map through the shuffled cards state to render a four-column grid, displaying each card’s front and back images with a unique key and styling via the card-grid class.

Extract the card template into a reusable single card component in components folder, map cards to the component with a card prop, and style with a single card css file.

Learn to build a memory-style card matching feature in React by managing two card choices with state, handling back-side clicks, and updating choice one or two.

Implement a CSS card flip with back and front rotations, 0.2s transitions, and a front-face delay to create a realistic flip effect in a React web app.

Wrap routes in a switch to render only one component at a time. Use the exact prop to ensure exact matches and prevent home from showing with about or contact.