The React CLI and the React Developer Tools

Contents

• Introduction Introduction

  • Build a stellar single-page application with React

    56s
• 1. Getting Started and Setting Up 1. Getting Started and Setting Up

  • What you should know

    2m 23s
  • (Locked)
    The tools and the exercise files

    3m 35s
  • (Locked)
    The React CLI and the React Developer Tools

    6m 5s
  • (Locked)
    Project overview

    3m 16s
• 2. Start a New React Project 2. Start a New React Project

  • Add Bootstrap 5 to your single-page application

    5m 1s
  • (Locked)
    Build a responsive layout with Bootstrap 5

    4m 59s
  • (Locked)
    Build the UI and create reusable components

    5m 21s
  • (Locked)
    Pass props to child components

    2m 42s
  • (Locked)
    Challenge: Thinking in React

    1m 32s
  • (Locked)
    Solution: Breaking up the UI

    4m 41s
• 3. From Stateless to Stateful React Components 3. From Stateless to Stateful React Components

  • Introduction to Hooks API Reference

    2m 52s
  • (Locked)
    Learn event handling and updating the state

    4m 12s
  • (Locked)
    Handle conditional rendering

    3m 47s
  • (Locked)
    Work with forms

    4m 1s
  • (Locked)
    Submit the form and apply side effects: useEffect

    5m 32s
  • (Locked)
    Validate and submit forms: useMemo

    6m 11s
  • (Locked)
    Handle complex logic with useReducer

    5m 34s
  • (Locked)
    Create and dispatch actions

    4m 37s
  • (Locked)
    Compose and update the UI

    6m 1s
• 4. Manage the State of Your App with the Context API 4. Manage the State of Your App with the Context API

  • Create a context object

    2m 49s
  • (Locked)
    Set up a Provider component to encapsulate the application logic

    4m 48s
  • (Locked)
    Challenge: Manage a global state

    3m 58s
  • (Locked)
    Solution: Allow components to subscribe to context changes

    6m 25s
• 5. Add Firebase to Your React Project 5. Add Firebase to Your React Project

  • Introduction to the Firebase Google console

    1m 31s
  • (Locked)
    Create a new project and a new application

    3m 2s
  • (Locked)
    Install the Firebase services SDK

    3m 53s
• 6. Create and Connect to a Database (Firestore) 6. Create and Connect to a Database (Firestore)

  • Get started with the Cloud Firestore

    3m
  • (Locked)
    Learn to add and manage data

    5m
  • (Locked)
    Set a new document and store and sync data into the Cloud Firestore

    5m 53s
  • (Locked)
    Learn to read data from a collection

    5m 32s
  • (Locked)
    Get documents and display them in the app

    5m 18s
  • (Locked)
    Define React environment variables

    4m 39s
• 7. Create a Bucket to Store Images (Cloud Storage) 7. Create a Bucket to Store Images (Cloud Storage)

  • (Locked)
    Get started with Cloud Storage on the web

    3m 13s
  • (Locked)
    Define an async function to send a file to storage

    5m 35s
  • (Locked)
    Upload a file to the storage

    3m 17s
  • (Locked)
    Download a file URL from storage

    6m 10s
  • (Locked)
    Set documents with images: Update the UI

    5m 27s
  • (Locked)
    Set documents with images: Set the date

    4m 10s
• 8. Authenticate and Manage Users (Firebase Auth) 8. Authenticate and Manage Users (Firebase Auth)

  • (Locked)
    Start with Firebase Authentication and select the provider

    2m 57s
  • (Locked)
    Google Cloud Platform: Create new credentials

    3m 17s
  • (Locked)
    Authenticate and manage users from the application

    5m 46s
  • (Locked)
    Manage the state with the Context API: Component Provider

    5m 3s
  • (Locked)
    Manage the state with the Context API: Custom hook

    5m 34s
  • (Locked)
    Subscribe components to the context changes: User connected

    4m 59s
  • (Locked)
    Create new documents with the user connected

    5m 26s
  • (Locked)
    Secure your data in Cloud Firestore and Cloud Storage

    5m 43s
• 9. Client-Side Routing with React-Router V6 9. Client-Side Routing with React-Router V6

  • (Locked)
    Install React router DOM v6

    2m 53s
  • (Locked)
    Configure the routes and create a navigation component

    2m 51s
  • (Locked)
    Use Link component to navigate between pages

    4m 58s
  • (Locked)
    Allow navigation between multiple views

    5m 39s
  • (Locked)
    Conditional rendering and protected route

    4m 45s
  • (Locked)
    Use the React router hooks: useNavigate

    4m 58s
  • (Locked)
    Use the React router hooks: useLocation

    4m 35s
  • (Locked)
    Create the routes for "NotFound" and "Profile"

    5m 15s
  • (Locked)
    Display the active link

    3m 42s
• 10. Filtering, Searching, and Learning to Debug 10. Filtering, Searching, and Learning to Debug

  • (Locked)
    Implement a search and filter function

    3m 44s
  • (Locked)
    Create a new action to return filtered results

    4m 53s
  • (Locked)
    Subscribe to the context changes and apply side effects in the UI

    2m 40s
• 11. Deploy Your React App (Firebase Hosting) 11. Deploy Your React App (Firebase Hosting)

  • (Locked)
    Install the Firebase CLI and initialize a new project

    5m 11s
  • (Locked)
    Create a production build and deploy your site to the cloud

    4m 44s
• Conclusion Conclusion

  • (Locked)
    Last words and next steps

    28s