The Complete React Bootcamp 2023 (w/ React Hooks, Firebase)

Explore the tools, theory, and other things you need before starting React development to set you up for success in the course.

Install Git and Git Bash on Windows, configure installer options, set the path, and enable mintty as the terminal. Verify installation and set your user name and email for commits.

Change the git bash prompt on Windows by editing the git-prompt.sh to remove mingw64 and user@host, bracket the current path, and set the prompt to an arrow.

Learn to install git on macOS using Homebrew. Follow steps to locate the official site, download, install Homebrew, and run terminal commands, with password prompts and Xcode checks.

Install and set up Visual Studio Code for JavaScript projects, covering Windows, Linux, and macOS with a focus on the download docs, installation steps, and basic configuration for plugins.

Install VS Code on macOS by downloading the installer, opening it, dragging the VS Code icon to applications, then launching and verifying everything works.

Explore configuring VS Code for React development by editing settings.json, bypassing the security trust window, and installing extensions such as Preacher, a bracket highlighting extension, NPM IntelliSense, and Bash integration.

Learn the basics of git for project history and collaboration. Initialize a repo, stage changes, commit work, view history with git commands, and use VS Code integration to visualize changes.

Shows how to host git projects on GitHub, push changes to a remote repository, clone or download, and view full history and commits to enable collaboration and portability.

Learn to use git branches to isolate features, push to GitHub, and create pull requests to merge changes into the master branch.

Install Node.js on Windows to set up a React development environment, choosing the stable version, installing tools for native modules, and verifying with node -v.

Install Node.js on macOS by downloading from the official site, running the installer, and verifying node -v and npm -v in the terminal to complete the setup.

Node.js lets you run JavaScript outside the browser and work with modules. Use CommonJS with require and module.exports, then explore import and export via AMD modules.

Explore how npm and Node.js manage project dependencies, including initializing a package.json, installing local and global packages, understanding dependencies and peer dependencies, and using npm scripts to automate tasks.

Discover how ESLint and Prettier keep code readable and error-free by enforcing style rules and formatting, with config files, npm scripts, and editor extensions.

Explore how servers handle requests and return data in JSON or XML, compare REST APIs with GraphQL, and learn how endpoints, queries, and schemas shape data retrieval.

explore server side rendering, client side rendering, and the hybrid approach, comparing static versus dynamic HTML, skeletons, and the impact on SEO and app-like user experience.

Explore the most common JavaScript syntax features, skip the very basics, and tackle advanced and common patterns to feel comfortable during JavaScript development.

Compare var, let, and const in JavaScript, highlighting function scope versus block scope, and explain when to reassign with let, when to use const, and how objects can be mutated.

Learn how array.map iterates over each element with a callback (value, index, array) to transform items into a new array; used in React to render mapped data.

Learn how array.reduce compresses array elements into a single value using an accumulator, callback, and optional initial value, including examples for summing numbers and building objects.

Compare function declaration and function expression in JavaScript, including hoisting and initialization behavior. Function declarations are hoisted, while expressions stay at their definition and cannot be accessed before initialization.

Master arrow functions and default function arguments in JavaScript, comparing them to function declarations, mastering short syntax, return behavior, and returning objects with parentheses for clarity.

Learn string templates (template literals) to interpolate dynamic values with backticks and ${...}, preserve spaces, and use expressions, including the ternary operator, in modern JavaScript.

Explore object destructuring and array destructuring in JavaScript, learn how to extract keys like color and gears, rename variables, apply default values, and use in React code.

Explore how the rest operator accumulates the remaining arguments into a single variable and how the spread operator unfolds values to merge objects and arrays.

Delve into how JavaScript uses the call stack, event loop, and web APIs to manage synchronous and asynchronous code, with promises and callbacks driving non-blocking behavior in browsers and Node.

Explore promises, their states, then, catch, and chaining; learn fetch with set timeout, response.json, and async/await for non-blocking, readable code.

Explore ECMAScript modules, including named exports, default exports, and import patterns, and learn how to import, export, and use modules in Node.js and browser environments.

Explain how ActionScript serves as a specification that JavaScript implements, revealing that ActionScript and JavaScript are essentially the same language.

Explore React, a library for building user interfaces with components across web, mobile, and desktop apps, and clarify its view-layer role (not a framework).

Learn how component-based approach builds apps from reusable html blocks with state. See the tree of components, React app root, and parent and child relationships, with a color button example.

Compare class based and function based components, explain how React hooks make function based components simpler and more lightweight, and emphasize future use and seamless transitions between functions and classes.

Discover how React uses a virtual DOM and the fiber algorithm to efficiently render a component tree, with one-direction data flow from parent to children.

Explore boilerplates and project bundlers like webpack, rollup, and parcel for building a React app. Compare three paths—manual setup, template boilerplates, or a framework such as Next.js or Gatsby.

Preview the tic tac toe project, learn React concepts through playing, highlight the winner, apply active effects, and manage game history with move overrides as a foundation for React knowledge.

Scaffold a new React project with Vite and JavaScript, ensuring Node version 14 or higher. Install dependencies, configure Prettier and ESLint, initialize Git, and push to GitHub.

Install the eslint and prettier extensions in vscode, then configure settings.json to enable editor format on save and set the editor and javascript default formatters to Prettier.

Explore how React components and props power an app, from index.html entry and mounting with root to using props and children to render dynamic content in JSX.

Build a tic tac toe board in a React app by creating board and square components, rendering a 3x3 grid with zero-based indexes, and styling with SAS.

Explore how to build interactivity in a React app by using the useState hook to manage state and respond to events like on click with a counter example.

Learn to manage a React game board using a nine-element null array, update state with setSquares, and render squares with a renderSquare helper and onClick that assigns X or zero.

Display X or zero in a clicked square using isXNext to track the next player. Toggle after each move and prevent overwriting by checking the square’s current value.

Lift the game state to the app component to display next player and winner messages, and calculate the winner with a helper while passing data via props.

Build a status message component that displays draw when no winner and all squares are filled, using props, conditional rendering, and derived state for the next player.

Implement a React game history by modeling moves as a history array of board states, enabling travel to past moves, highlighting the active move, and overwriting history when revisiting.

Add a reset button that restarts the game by updating history with a game state and resetting the current move, and apply an active class when there is a winner.

Highlight the winning combination in a tic tac toe app by coloring winning squares with dynamic class names and passing winning squares from board to each square for highlighting.

Polish the React app by loading the Roboto font from Google Fonts via index.html and applying inline styles with a style object to control font weight and title appearance.

deploy a React app to surge for free by building to dist with npm run build, then deploying via surge and sharing a https link with a unique subdomain.

Summarize the tic tac toe project by detailing React 18 usage, state management, derived values, state updaters, props, conditional rendering, array mapping with keys, and free static hosting.

Add an empty div with the bg bowls class to render the background circles, then redeploy the app with the npm run deploy script after committing the change.

Search movies and actors with an external API, save favorites in browser storage, and view detailed show information with seasons and cast in a progressive web app.

Create and scaffold a box office web app using Create React App. Explore a progressive web app template and configure ESLint and Prettier while understanding public and source structure.

Clean up the initial Create React App by removing testing library dependencies. Rename g six files and adjust service worker and iOS lint, then run npm install.

Install react-router-dom and set up v6 routing to create home, start, and contact pages with not-found handling. Use Link for navigation and understand client-side routing in a single-page app.

Learn to implement reusable layouts with React Router using a main layout and outlet to render content for home and start pages, plus a navigation component and default props.

Learn how to manage text inputs in React using the useState hook, handle onChange events, and implement one-way and two-way data binding to synchronize input values with state.

Learn how to submit forms in a React app, prevent page refresh, and fetch shows data from the TV Maze API using fetch with async/await and a dynamic search string.

Build a reusable TV Maze API wrapper, implement search shows with async fetch, map results to show names, and handle null data and errors for robust rendering.

Fix Prettier not working by correcting a misnamed config file and using the CLI to format all source files, plus adding a format script in package.json.

Add radio buttons to the home page search form to toggle between shows and actors, wiring a search option state to tv maze api requests and render by data shape.

Move the form state from the home component into a dedicated search form component, exposing an on search prop and preserving shows and actors search functionality.

Refactor the home view into show and actor grid components, pass TV Maze API data via props, and render show and actor cards with images and trimmed summaries.

Create dynamic show pages with React Router DOM by turning show IDs into URL segments, using useParams to read the show ID, and updating the read more link to navigate.

Explore how the useEffect hook controls the component lifecycle to fetch data only once on mount. Understand cleanups and dependency arrays to run effects on changes and before unmount.

Fetch TVMaze show data by ID with useEffect and useParams, manage state for data and errors, and handle async calls inside the effect to render loading and errors.

Learn to create and reuse custom React hooks that wrap built-in hooks like use state and use effect, including a use show by ID hook.

Discover how to fetch data in React with data fetching libraries like React Query, using the useQuery hook to fetch a show by id and reuse logic.

replace home page data fetching with a single useQuery hook, using search filters and pause logic, guided by React Query docs and lazy query patterns.

Explore using React Query's useQuery on the home page to fetch data conditionally with filters and an enabled option, manage query keys, and control refetch on focus.

Show how to render a complete show page by composing show main data and details, display image, html summary, and embed seasons and cast via the use query hook.

Add a go back to home button on the show page and open the show in a new tab with an anchor tag; compare link component and use navigate.

Explore use reducer as an alternative to use state, using dispatch and actions to manage state via a reducer, and apply it to implement start shows.

Manage a starred shows list of IDs with useReducer by dispatching star and unstar actions, and persist the state via a use persisted reducer hook that syncs to local storage.

Extract and reuse the starred shows logic with a persistent reducer and local storage synchronization, building a reusable use start shows hook and updating the UI to reflect starred status.

Finish the slide show page by fetching multiple starred shows in parallel with React Query and Promise.all, shaping data to the Show Grid, and implementing loading, empty, and error states.

Implement a custom usePersistedState hook atop useState to persist the search box state, using session storage as an alternative to local storage for the React bootcamp assignment.

Implement a custom hook usePersistedState that mirrors useState and persists a search string to session storage via a key, syncing on state changes for page refresh resilience.

Explore how styled components enable CSS-in-JS in React, covering installation, building styled elements, dynamic styling with props, and theming. Compare to static CSS and learn runtime injection.

Style the app with styled components, set a global theme and Roboto font, and apply active navigation with nav link; build a custom radio component with props spreading.

Style the app with styled components, applying dynamic styles based on props and reusing shared components to build a fully responsive, polished interface.

Add a fade-in animation for cards in the flex grid with a CSS approach, and use the useRef hook to animate the star button when a show starts.

Deploy a React app to GitHub Pages by configuring the homepage in package.json, installing gh-pages, and deploying the build. Resolve client-side routing with hash router and Link from react-router-dom.

Explains how a service worker turns a web app into a progressive web app by intercepting requests, caching assets with workbox, enabling offline use and installability, guided by Lighthouse checks.

Fix base URL issues for images on github pages by importing the not found image as a module, then redeploy and clear cache to apply base64 inline optimization.

Create and integrate favicons for the box office app, generate a targeted icon set, update manifest.json for installable progressive web app icons, fix maskable icons, deploy, and commit changes.

Build a progressive web app with React, using Create React App, React Router, fetch data, and React Query. Employ custom hooks, browser storage, dynamic pages, and styling choices.

Discover how Firebase provides a backend abstraction layer that replaces API calls with predefined library functions, enabling real time, fast database queries on Google Cloud Platform with well documented features.

Explore Firebase services and the multi-app dashboard, covering authentication, Firestore and Realtime Database differences, storage, hosting, Cloud Functions, Analytics, and Cloud Messaging.

Explore how Firebase security controls client-side data access with security rules, preventing unauthorized access, and how cloud functions and storage rules enforce server-side validation and protected data.

Compare Firebase's Spark free plan with Blaze pay-as-you-go, noting cloud functions require Blaze. Check the pricing page for details as you begin building your project.

Explore the final project: sign in with Google or linked Facebook, manage profile with nickname and avatar, chat with rooms, send messages and attachments, and use admin controls and notifications.

Discover upcoming chat-app updates and follow a VS Code guided setup from the chat app starter template, install dependencies with npm, and launch with npm run start.

Scaffold a React project with create-react-app, clean starter files, and install dependencies. Configure react-router and react-router-dom, style with a sass-based UI library, and push to GitHub.

Create and configure a Firebase project with a web app, set real-time database and storage, enable Google and Facebook authentication, and initialize Firebase in code.

Implement private and public routes in a React app using a private and public route wrapper, with redirects based on a profile flag and sign-in and home pages.

Build a sign-in page with Firebase authentication using Google and Facebook providers, manage sign-ins via popup, and store user profiles in a database with security rules and alerts.

Learn how to use the context API for global state management by creating a profile context and provider, avoiding prop drilling and enabling use context across the app.

Learn to manage user profiles with Context API using Firebase auth state changes and real-time database subscriptions, track loading with a spinner, and clean up listeners to keep state synchronized.

Build the home page layout with a left sidebar, grid-based columns, and a chatroom list, then implement a dashboard toggle via a custom use model state hook.

Make the drawer responsive by using a use media query hook to enable the full mode on mobile and keep a static drawer on desktop.

Create a dashboard with a sidebar and header, show the user from a profile context, and implement a Firebase sign-out flow with a memoized handler and redirection on auth changes.

Build a reusable editable input component for a React dashboard, supporting initial value, label, placeholder, and empty message, with edit and save actions that update data in the database.

Create a dashboard feature to update a user's nickname in the Firebase real-time database, using precise references, a nickname-only update, error handling, and real-time listeners to refresh the UI.

Learn to build a dashboard that links a user to multiple sign-in providers, such as Google and Facebook, and manage provider data with Firebase in a React app.

Add and manage user profile avatars in a dashboard by selecting a file, uploading to Firebase, previewing with the React Avatar Editor, and controlling the modal state.

Implement an avatar upload workflow: use on upload click, access avatar editor via useRef, convert canvas to blob, upload to Firebase storage, save URL to database, with loading feedback.

Display the avatar or show name initials when missing, using a profile avatar wrapper and a get name initials helper to derive initials from the user name, including two-word names.

Add a create new chat room button that opens a modal form for name and description, validates input, saves the room to Firebase with a timestamp, and updates database rules.

Create chat room lists in the sidebar with React components, including a chat room list and room item, featuring scrolling and a relative time display.

Define a rooms context with the React context API, manage real-time room data via useState and useEffect, transform it to an array, and expose the rooms array to home page.

Display chat rooms stored in the database using a rooms context with a useRooms hook, show a loading state, and render each room as a react-router-dom link to chat/roomId.

Create a nested home layout with a sidebar and chat panel, implementing responsive behavior that hides the sidebar on mobile and shows the chat area when a chatroom is selected.

Create a chat page layout by building a chat window with top, messages, and bottom components, wiring imports, and using a rooms hook to load the current room.

Explore the context API’s rendering pitfalls and practical solutions, including splitting context into multiple providers and using a context selector to partially consume values, with redux comparison.

Learn to implement a dedicated current room context with use context selector in a React app, improving performance by memoizing components and narrowing updates to only the current room data.

Create the chat top bar with a back link and mobile left-arrow icon, display the room name, and add a bottom area that opens a room-info modal using context.

Demonstrates denormalizing data for chat by building the chat bottom user interface, handling input and send actions, and performing atomic updates to messages and rooms in Firebase Realtime Database.

Display the last message in each chatroom list using the room item component, with avatar, author name, and time, and fall back to no messages yet when absent.

Learn to manage denormalized data by updating all duplicated references (messages and rooms) atomically with a helper function that propagates nickname and avatar changes.

Display chat messages in the chat page by listening to real-time updates for the current room and rendering each message with a MessageItem showing author, text, avatar, and time ago.

Display user profile data in a clickable modal by building a profile info component that shows avatar, full name, and member since, using the profile prop and modal state.

Implement real-time presence in a React app with Firebase real-time database, handle online/offline status via info connected and onDisconnect, and enforce security rules for authenticated users.

Display real-time presence for chat by rendering a colored dot beside avatars, using a custom hook with Firebase to fetch each user’s online status and last online.

Add a right-hand edit room drawer to modify a room's name and description, update the database on save, and ensure responsive behavior for mobile devices.

Implement role based security rules for rooms in a Firebase real time database. Define admins as an object keyed by user IDs and enforce read and write access with auth.

Implement role-based access management by adding a button on user profiles to grant or revoke admin permissions, using context to check admin status and firebase real-time database transactions.

Learn to implement programmatic hover for chat elements using a custom useHover hook, apply a dynamic class to change background on hover, and integrate it into the chat item.

Develop an IconControl component that acts as a wrapper around an icon button for likes, with props for visibility, name, tooltip, onClick, color, and badge content in a message item.

Add a like count and a likes object to each message, implement a handleLike function to toggle likes in the database, and update the ui to show red when liked.

Master handling delete operation for chat messages in a React app, with author-based visibility, confirmation prompts, and atomic updates to messages and room last message in Firebase.

Add a file upload feature with an attachment button that opens a modal and uses an uploader component, enforcing up to five files under five megabytes to firebase storage.

Implement an after upload handler using useCallback to upload multiple files to the database, updating is uploading state, last message, and file metadata such as content type and name.

Display all uploaded files using conditional rendering to show text messages or file previews, and render non-images links or image thumbnails with view original and download options.

Record and upload audio messages directly in a React app using the react-mic library, and store them in Firebase as MP3 files for chat integration.

Display uploaded user audio records and fix file upload issues by rendering audio elements for audio files, enabling playback with controls, and deleting associated storage files when messages are removed.

Group chat messages by date using a reusable group-by function built with array reduce and a grouping key, then render the dated message sections in the chat feed.

Master real-time chat pagination with Firebase by loading messages in pages, handling subscriptions, and preserving scroll position, including a 30 percent bottom threshold when typing.

Deploy your chat app to firebase hosting using firebase deploy after configuring predeploy and build scripts, publish hosting, and monitor deployment history, while testing login flows and updating privacy policy.

Upgrade the Firebase project to the Blaze plan to enable Cloud Functions and real-time notifications with Firebase Cloud Messaging, and prepare for a discussion on serverless architecture.

Discover serverless on-demand execution with no actual server, see how containers power each function in its own container, scale automatically, and understand cold starts and pricing.

Explore Firebase Cloud Messaging core concepts: send real-time web and mobile notifications using private device tokens stored in a database, and a service worker with the browser push API.

Retrieve the current registration token with Firebase Cloud Messaging, store it in the database under tokens, handle token refresh, and enforce access with security rules.

Add a Firebase messaging service worker in the public folder, copy rules from the previous FC M tokens, and align the config with the app SDK version.

Set up cloud functions in a Firebase project, configure a service account for local development, and use node version manager (nvm) to run and test functions locally.

Explain the notifications flow in a React app using Firebase cloud functions, focusing on callable functions that fetch device tokens and send notifications, and trigger functions for database events.

Create an on-call Firebase cloud function to send FCM notifications by authenticating users, fetching room data, gathering device tokens, and broadcasting a multicast message with the Firebase Admin SDK.

Fix cloud function errors by correcting room data access from roomSnapshot.value, rename FGM users to FGM user, replace registration tokens with tokens, and ensure sign-in before saving and committing changes.

Learn to send and display notifications by calling a cloud function from the client, configure europe west three region, use the emulator, and toast-display messages to room users.

Develop a modal window to manage FCM users by asking if they want to receive notifications, showing subscription status, checking browser notification permissions, and updating Firebase data for room chats.

Explore essential React features used in production-ready apps, apply them to our final project Chad application to help with the code, and consult Bekerman station for official React references.

Explore how React portals render content outside the main component tree to build modals, tooltips, and overlays, using ReactDOM.createPortal and a dedicated modal root.

Wrap your app with a global error boundary to render a fallback UI when rendering errors occur. Use multiple boundaries per page or component to isolate failures.

Discover how code splitting uses lazy loading and suspense in React to load components only when needed, reducing the initial bundle size.

Practice more to master everything we've covered and read the React documentation to explore topics you haven't heard about, uncovering subtle details that build production-ready React application.