Build Websites with React and Firebase

ToIT

0 (0)

Duration

0m

Students

0

Level

Intermediate

Last Updated

October 30, 2024

Build Websites with React and Firebase

Overview
Curriculum
Reviews

This course covers the integration of React, a powerful front-end library, with Firebase, a comprehensive app development platform by Google. It emphasizes creating dynamic websites using React’s component-based architecture while leveraging Firebase for backend infrastructure, including real-time databases, authentication, and hosting services. The course demonstrates how to harness Firebase’s suite of tools to manage serverless application development, from setting up real-time data syncing with Firestore to implementing user authentication systems. Participants learn to utilize Firebase functions to extend their applications and integrate with cloud services, combining the robust user interface capabilities of React with the scalable backend solutions offered by Firebase for a full-stack development experience.

17 Sections
157 Lessons
0 Quizzes
0m Duration

Expand All

Introduction & Setup

6 Lessons 0 Quizzes

Welcome to the Course
React at a Glance
What You Should Already Know
Environment Setup
Course Files
Extra Resources & JavaScript Help

React Basics

5 Lessons 0 Quizzes

Using the React CDN
Creating a React Component
JSX Templates
Template Expressions
Click Events

Using Create-React-App

5 Lessons 0 Quizzes

Making a React Site
Project Structure
Running the Application
Using Images
Using Stylesheets

Intro to State & useState

7 Lessons 0 Quizzes

Why We Need State
Using useState
How State & Rendering Works
Outputting Lists
Using Previous State
Conditional Templates
Rules of useState

Components and Props

10 Lessons 0 Quizzes

Multiple Components
Making a Title Component
Props
React Fragments
Children Props
Functions as Props
CHALLENGE – Showing the Modal
Portals
CHALLENGE – Event List Component
Class Components (an Overview)

Styling React Applications

6 Lessons 0 Quizzes

Using a Global Stylesheet
Component Stylesheets
Inline Styles
Dynamic Inline Styles
Conditional CSS Classes
CSS Modules

User Input & Events

7 Lessons 0 Quizzes

Forms & Labels in React
The onChange Event
Controlled Inputs
Submitting a Form
Adding a New Event to the State
The useRef Hook
Select Boxes

Fetching Data & useEffect

11 Lessons 0 Quizzes

New Project & JSON Server Setup
Why We Need useEffect
Fetching Data with useEffect
The Dependency Array
Function Dependencies & useCallback
Making a Custom Fetch Hook
Adding a Loading State
Handling Errors
Why We Need Cleanup Functions
Aborting Fetch Requests (Cleanup Function)
useEffect Gotcha

PROJECT BUILD - Memory Game

11 Lessons 0 Quizzes

Project Preview & Setup
Shuffling Cards
Creating a Card Grid
CHALLENGE – Creating a Card Component
Making Card Choices
CHALLENGE – Comparing Card Choices
Matching Cards
Flipping Cards
Flipping Animation
Disabling Card Selections
Final Touches

The React Router

9 Lessons 0 Quizzes

Multipage React Sites
React Router & Pages Setup
Switch & Exact Matches
Links & NavLinks
Fetching Data
Route Parameters
The useParams Hook
Programmatic Redirects
Query Parameters

PROJECT BUILD - Recipe Directory

14 Lessons 0 Quizzes

Project Preview & Setup
Pages & Routes
Navbar Component
Fetching Recipe Data
Recipe List Component
CHALLENGE – Fetching a Single Recipe
Recipe Details Template
Making a Form for Creating Recipes
Adding Ingredients
Making a POST Request
CHALLENGE – Redirecting the User
Making a Searchbar
Search Results Page
Finishing Touches

React Context & Reducers

9 Lessons 0 Quizzes

Prop Drilling
What is the Context API
Creating a Context & Provider
Accessing Context with useContext
Creating a Custom Context Hook
Reducers & useReducer
Making a Theme Color Selector
Making a Light & Dark Mode
Styling the Light & Dark Modes

Firebase Firestore

10 Lessons 0 Quizzes

What is Firebase
Firestore Databases
Connecting to Firebase
Fetching a Firestore Collection
Fetching a Firestore Document
Adding Firestore Documents
Deleting Documents
Realtime Collection Data
Updating Documents
Realtime Document Data

PROJECT BUILD - Finance Tracker

28 Lessons 0 Quizzes

CHALLENGE – Pages & Routes
Login Form
CHALLENGE – Signup Form
Firebase Setup
Firebase Authentication Setup
Creating a Signup Hook
Using the useSignup Hook
Creating an Auth Context
Dispatching a Login Action
Creating a useLogin Hook
Using the useLogout Hook
Cleanup Function
Creating a useLogin Hook
Using the useLogin Hook
Conditionally Showing User Content
Firebase Auth State Changes
Waiting for Auth to be Ready
Route Guards
New Transaction Form
Creating a useFirestore Hook
Adding New Documents
Firestore Timestamps
Using the useFirestore Hook
Creating a useCollection Hook
Listing Transactions
Firestore Queries
Ordering Queries
Deleting Transactions

Firestore Rules

4 Lessons 0 Quizzes

What Are Firestore Rules
The Firebase CLI
Securing Collections
Deploying Firestore Rules

Building & Deploying

4 Lessons 0 Quizzes

Building a React App
Deploying to Firebase
Redeploying
Rolling Back Deployments

PROJECT BUILD - Project Management Site

11 Lessons 0 Quizzes

Project Preview & Setup
Firebase Project Setup
Firebase Init
Reusing Firebase Hooks
Router & Pages Setup
Navbar Component
Sidebar Component
Making a Signup Form
Handling File Input Changes
Firebase Storage Setup
Uploading Images

0

0 Ratings

5 Star 0%

4 Star 0%

3 Star 0%

2 Star 0%

1 Star 0%

Reviews

Free

Course Includes

Understand React basics and setup
Create and render React components
Utilize JSX for templates and expressions
Handle events in React (eg, click events)
Manage state with the useState hook
Implement conditional rendering in React
Build multi-component hierarchies
Pass and receive props in components
Style components using various methods in React
Manage forms, inputs, and events
Fetch data and use the useEffect hook
Configure and use React Router for navigation