Build Dynamic Web Apps with React & Firebase

Drop React into an existing HTML page using a CDN, loading the React core, React DOM, and Babel to compile components in the browser.

Build and render your first React component by creating an arrow function component with a JSX template and displaying it in a div with the banner id.

Explore how JSX enables HTML-like templates inside JavaScript, how Babel compiles JSX to browser-ready code, and how to manage className, a single root element, and inline expressions in React components.

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.

Explore building a full React site using create react app, understand a single page application, install node, run commands in the terminal, and open the project in VS Code.

Walk through the project structure, including node_modules, public, and source, and see how index.js boots React into the DOM and how components live in source.

Start the local development server with npm run start to preview the React app in a browser on port 3000, where the App component renders to the root element.

Learn how to use images in React by importing from the source folder or referencing the public folder with jsx image tags, and note that css comes next.

Explore how this React app uses the global Index.css and App.css stylesheets, imports them into Index.js and App.js, and see why modular styling scales for complex web apps.

Explore the core idea of state in React, showing how component data like to-dos or a dropdown's is open state triggers re-renders, unlike plain variables.

Learn to create component state with the useState hook, import it from React, and use array destructuring to manage a changing name value that re-renders the DOM.

Learn how state changes trigger re-evaluation and efficient rendering in React, from JSX compilation to the virtual DOM and selective updates in the real DOM.

Create a state as an array of events and render each item with map, using a unique key like event.id to output the event titles.

Learn to delete an item from a React state array by wiring a delete button to an onClick handler and using setState with a function based on the previous state.

Use useState to toggle a boolean show events and conditionally render the events template with a logical and, driven by on click buttons.

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.

Learn to build a web page with multiple components nested in a root app component, creating a component tree and using props to pass data between parent and child.

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.

Learn how to pass data from a parent to a child with props in React, making components reusable by supplying different titles, subtitles, and data types.

Learn to use React fragments to wrap elements while avoiding extra DOM nodes and honoring the single parent element requirement. Explore the shorthand syntax and React.Fragment for props when needed.

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.

Pass functions as props to child components to control parent state, such as toggling a modal with a handleClose function and showModal for conditional rendering.

Control the modal with a state flag: initialize it false, add a show modal button with onClick to set show modal true, and render the modal only when true.

Learn how portals in React render a component elsewhere in the DOM using ReactDOM's createPortal, enabling modals to move to the bottom of the body while noting styling implications.

Master creating a reusable event list component in React by extracting template, passing events as props, managing deletion via callbacks, and promoting reuse across pages.

Explore class components in React, contrast them with function components, and learn why modern projects favor function components using hooks like useState, while class components use render, this.props, and this.state.

Explore how global styles in index.css apply site-wide styling for body, headings, and buttons, and note that title classes are not global and will move to a component stylesheet later.

Organize styles with component-specific stylesheets alongside global styles, import them into components, and scope rules with a parent route class to prevent global leakage, improving modularity and maintainability.

Apply inline styles in React by passing a JavaScript object to the style prop, using camelCase keys like borderColor and textAlign to style a modal div alongside global styles.

Learn to make inline styles dynamic in React by using a ternary operator to conditionally set border color based on the isSalesModal prop passed from app to modal.

Apply conditional classes to elements using a ternary operator to toggle a sales-button class based on the isSalesModal condition, revealing dynamic styles when true.

Discover how CSS modules scope styles to a React component using the event list example and eventList.module.css. Import styles, apply class names, and compare module-scoped with global rules for styling.

Learn to build forms and events in React by creating a dedicated new event form component inside a modal, wiring inputs to state, and updating the events list.

Attach the onchange event to input fields to fire a handler on every change, use e.target.value to update title and date state via useState, and render them on screen.

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.

Learn to add events to a React event list by creating an addEvent function, updating state with previous events, and passing it as a prop; close the modal after submit.

Learn how to use the useRef hook to access raw dom elements and read input values with refs, offering an alternative to controlled inputs.

Master building a select box in a React form, using state and onChange to track location with a Manchester default, and display location and date in the event list.

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 why useEffect is essential for fetching data in React, using the fetch API, managing state, and preventing infinite re-renders when data updates.

Use the useEffect hook to fetch data once on the component’s render with an empty dependency array, preventing infinite re-renders. Learn to fetch with then and render results with map.

Explore how useEffect uses a dependency array to control when it runs, and learn to re-fetch data by updating a URL state and adding it as a dependency with React.

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.

Create a reusable React data-fetching hook called useFetch that uses useEffect (and optionally useCallback) to fetch data from a URL, return data, and avoid duplicating fetch logic across components.

Implement a loading state with a custom usefetch hook by toggling is pending during data fetch, conditionally rendering a loading message, then display the data and learn to handle errors.

Learn to handle fetch errors in a useFetch hook by adding error state, using try-catch, validating response.ok, throwing custom errors on non-ok responses, and displaying error messages in the UI.

Learn why cleanup functions matter when fetching data in React: cancel ongoing fetches on unmount to prevent memory leaks and avoid state updates on unmounted components.

Implement a cleanup function in useEffect to abort ongoing fetches when the trip list component unmounts. Attach an abort controller signal to fetch and handle abort errors without updating state.

Learn how passing reference types as useEffect dependencies can trigger infinite loops, and apply strategies like wrapping objects in state or using useRef to stabilize dependencies.

Build a memory game in React by setting up a new project, using the useEffect hook for non-fetch logic, and implementing card flipping, shuffling, and a turn counter.

Create a constant card images array, duplicate to twelve cards, shuffle with random sort, assign unique IDs, and manage cards and turns in React state for a new game.

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.

Practice building a memory card game with React by selecting two cards, comparing their sources to determine a match, logging results, and resetting turns using useEffect and a reset function.

Add a matched property to each card and update the cards state with a map, setting matched to true for both selected cards when they match, so they stay revealed.

Learn to implement a memory game mechanic by flipping cards to reveal backs, match pairs, keep matched cards flipped, and add a delay before resetting unmatched turns with flip animation.

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.

Learn to implement a temporary disabled state for cards in a React and Firebase app: disable cards after two selections, then re-enable after a match or flip back.

Finish the React game by displaying the turns count, resetting choices on new games, and auto-starting the game on load by shuffling and rendering cards with useEffect.

Learn to build multi-page React sites with the React router, swapping content for home, about, and contact routes, and set up a fresh project with npm and json server data.

Set up a React app with a pages folder and three components for home, about, and contact, then configure react-router-dom to navigate between routes /, /about, and /contact.

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.

Learn to replace anchor tags with React Router Link and NavLink for client-side navigation, apply the active class with exact routing, and style current pages to improve UX.

Fetch articles with a reusable useFetch hook from json-server endpoint serving data from DB.json, display title and author on the home page, with loading and error handling and abort support.

Define dynamic article routes with a route parameter in /articles/:id, use the link component for navigation, and render a common article page that loads data by id.

Extract the article id from the url with the useParams hook, fetch the article using the useFetch hook, and render loading, error, or article content accordingly.

Redirect users on article fetch errors by using useEffect and useHistory to push to the home page after a two second delay, with error detection and history as a dependency.

Learn how to read query parameters in a React Router app by accessing the location's search string and parsing it with URLSearchParams to display the name value on a page.