Build a stellar single-page application with React

The React CLI and the React Developer Tools

What you should know

Project overview

The tools and the exercise files

Add Bootstrap 5 to your single-page application

Build the UI and create reusable components

Build a responsive layout with Bootstrap 5

Pass props to child components

Challenge Thinking in React

Solution Breaking up the UI

Introduction to Hooks API Reference

Learn event handling and updating the state

Handle conditional rendering

Work with forms

Validate and submit forms useMemo

Submit the form and apply side effects useEffect

Compose and update the UI

Create and dispatch actions

Create a context object

Challenge Manage a global state

Set up a Provider component to encapsulate the application logic

Solution Allow components to subscribe to context changes

Create a new project and a new application

Introduction to the Firebase Google console

Install the Firebase services SDK

Get started with the Cloud Firestore

Learn to add and manage data

Set a new document and store and sync data into the Cloud Firestore

Learn to read data from a collection

Define React environment variables

Get documents and display them in the app

Get started with Cloud Storage on the web

Define an async function to send a file to storage

Upload a file to the storage

Set documents with images Update the UI

Download a file URL from storage

Set documents with images Set the date

Start with Firebase Authentication and select the provider

Google Cloud Platform Create new credentials

Manage the state with the Context API Component Provider

Manage the state with the Context API Custom hook

Subscribe components to the context changes User connected

Authenticate and manage users from the application

Create new documents with the user connected

Secure your data in Cloud Firestore and Cloud Storage

Configure the routes and create a navigation component

Use Link component to navigate between pages

Install React router DOM v6

Allow navigation between multiple views

Conditional rendering and protected route

Use the React router hooks useNavigate

Use the React router hooks useLocation

Create the routes for NotFound and Profile

Display the active link

Implement a search and filter function

Subscribe to the context changes and apply side effects in the UI

Create a new action to return filtered results

Last words and next steps

Create a production build and deploy your site to the cloud

Install the Firebase CLI and initialize a new project