Build Web Apps with React Firebase

Build Web Apps with React Firebase

What you’ll learn

Learn how to create modern & dynamic React websites from the ground up
Learn about Components, Props, Hooks, Context, State, Reducers & the React Router
Learn how to implement a database, authentication & file uploads with React & Firebase
Create & deploy fully fledged user-based React websites

Requirements

Basic knowledge of JavaScript, HTML & CSS

Description

React is a hugely popular front-end library and React developers are always in hight demand in the web dev job market. In this course you’ll learn how to use React from the ground-up to create dynamic & interactive websites, and by the time you finish you’ll be in a great position to succeed in a job as a React developer. You’ll also have 4 full React projects under your belt too, which you can customize and use in your portfolio!Throughout the course you’ll learn exactly what React is and why it’s such a popular choice to make interactive & dynamic websites. You’ll learn how to set up a React website from scratch, how to create React components, how to use state to manage component data & how to work with interactive events such as click events & form submissions. You’ll also get hands-on practise with the React Router (which is used in React to create website with “multiple pages”) and you’ll see how these are actually known as Single Page Applications (or SPA’s for short).We’ll dive into React Hooks such as useState, useEffect, useParams & useHistory and use them to help us create 4 full React projects from scratch – a memory game, a recipe website, a finance tracker & a project management application. You’ll also learn some more avanced topics such as the React Context API to handle global state & reducers (including the useReducer hook) to help manage more complex state. Once you’ve mastered React, we’ll take our websites to the next level by integrating them with Firebase – a backend as a service. You’ll learn how to add services such as a real-time database & authentication into your React sites as well as how to allow end-users to upload files from their computers with the help of Firebase Storage. Finally, I’ll teach you how to build & deploy your React sites to the web using Firebase Hosting.By the end of the course you’ll have a solid understanding of React & be able to make your own production-ready websites!

Overview

Section 1: Introduction & Setup

Lecture 1 Welcome to the Course

Lecture 2 React at a Glance

Lecture 3 What You Should Already Know

Lecture 4 Environment Setup

Lecture 5 Using the Course Files

Lecture 6 Extra Resources & Tutorials

Section 2: React Basics

Lecture 7 Using React with a CDN

Lecture 8 Making a React Component

Lecture 9 JSX & Templates

Lecture 10 Template Expressions & Variables

Lecture 11 Click Events & Event Handlers

Section 3: Using Create-React-App

Lecture 12 Making a React Site (create-react-app)

Lecture 13 Project Structure Walkthrough

Lecture 14 Running the Application

Lecture 15 Using Images

Lecture 16 Using Stylesheets

Section 4: Intro to State & useState

Lecture 17 Why We Need State

Lecture 18 Using the useState Hook

Lecture 19 How State & Rendering Works

Lecture 20 Outputting Lists

Lecture 21 Using the Previous State

Lecture 22 Conditional Templates

Lecture 23 useState Limitations

Section 5: Components & Props

Lecture 24 Using Mutliple Components

Lecture 25 Creating a Title Component

Lecture 26 Intro to Props

Lecture 27 React Fragments

Lecture 28 Children Prop (Making a Modal Component)

Lecture 29 Functions as Props

Lecture 30 CHALLENGE – Showing the Modal

Lecture 31 Portals

Lecture 32 CHALLENGE – Reusable Event List Component

Lecture 33 Class Components Overview

Section 6: Styling React Applications

Lecture 34 Using Global Stylesheets

Lecture 35 Component Stylesheets

Lecture 36 Using Inline Styles

Lecture 37 Dynamic Inline Styles

Lecture 38 Conditional CSS Classes

Lecture 39 CSS Modules

Section 7: User Input & Events

Lecture 40 Forms & Labels in React

Lecture 41 The onChange Event

Lecture 42 Controlled Inputs

Lecture 43 Submitting Forms (onSubmit)

Lecture 44 Adding Events to the Event List

Lecture 45 Using the useRef Hook

Lecture 46 Select Boxes

Section 8: Fetching Data & useEffect

Lecture 47 New Project & JSON Server

Lecture 48 Why We Need useEffect

Lecture 49 Fetching Data with useEffect

Lecture 50 The useEffect Dependency Array

Lecture 51 useCallback for Function Dependencies

Lecture 52 Creating a Custom Fetch Hook

Lecture 53 Adding a Loading/Pending State

Lecture 54 Handling Errors

Lecture 55 Why We Need a Cleanup Function

Lecture 56 Aborting Fetch Requests

Lecture 57 useEffect Gotcha – Infinite Loops

Section 9: PROJECT BUILD – Memory Game

Lecture 58 Project Preview & Setup

Lecture 59 Setting up & Shuffling Cards

Lecture 60 Creating a Card Grid

Lecture 61 CHALLENGE – Creating a Card Component

Lecture 62 Making Card Choices

Lecture 63 CHALLENGE – Comparing Choices

Lecture 64 Adding a ‘matched’ Property to Cards

Lecture 65 Flipping Cards

Lecture 66 Flipping Animation (CSS)

Lecture 67 Making Cards “disabled”

Lecture 68 Finishing Touches

Section 10: The React Router

Lecture 69 Multi-Page React Sites

Lecture 70 React Router Setup

Lecture 71 Switch & Exact Match

Lecture 72 Links & Nav Links

Lecture 73 Fetching Data

Lecture 74 Route Parameters

Lecture 75 The useParams Hook

Lecture 76 Programmatic Redirects

Lecture 77 Redirect Component

Lecture 78 Query Parameters

Section 11: PROJECT BUILD – Recipe Directory

Lecture 79 Project Preview & Setup

Lecture 80 Router & Pages Setup

Lecture 81 Making a Navbar Component

Lecture 82 Fetching Data

Lecture 83 Recipe List Component

Lecture 84 CHALLENGE – Fetching a Single Recipe

Lecture 85 Recipe Details Template

Lecture 86 Making a “Create Recipe” Form

Lecture 87 Adding Multiple Ingredients

Lecture 88 Making a POST Request

Lecture 89 CHALLENGE – Redirecting the User

Lecture 90 Making a Search Bar Component

Lecture 91 Search Results Page

Lecture 92 Finishing Touches

Section 12: React Context & Reducers

Lecture 93 Prop Drilling

Lecture 94 What is the Context API?

Lecture 95 Creating a Context & Provider

Lecture 96 Accessing Context Values

Lecture 97 Creating a Custom Context Hook

Lecture 98 Reducers & useReducer

Lecture 99 Making a Color Theme Selector

Lecture 100 Light & Dark Mode Selector

Lecture 101 Styling Light & Dark Modes

Section 13: Firebase Firestore

Lecture 102 What is Firebase?

Lecture 103 Firestore Databases

Lecture 104 Connecting to Firebase

Lecture 105 Fetching a Firestore Collection

Lecture 106 Fetching a Firestore Document

Lecture 107 Adding Firestore Data

Lecture 108 Deleting Firestore Data

Lecture 109 Real-Time Collection Data

Lecture 110 Updating Documents

Lecture 111 Real-Time Document Data

Section 14: PROJECT BUILD – Finance Tracker (with Firebase Authentication)

Lecture 112 Project Preview & Setup

Lecture 113 CHALLENGE – Creating Pages & Routes

Lecture 114 Creating a Navbar

Lecture 115 Making the Login Form

Lecture 116 CHALLENGE – Making the Signup Form

Lecture 117 Firebase Setup

Lecture 118 Firebase Authentication Setup

Lecture 119 Creating a Signup Hook

Lecture 120 Using the Signup Hook

Lecture 121 Creating an Auth Context

Lecture 122 Dispatching a Login Action

Lecture 123 Creating a Logout Hook

Lecture 124 Using the Logout Hook

Lecture 125 Adding Cleanup Functions

Lecture 126 Creating a Login Hook

Lecture 127 Using the Login Hook

Lecture 128 Conditionall Showing User Content

Lecture 129 Firebase Auth State Changes

Lecture 130 Waiting Until Auth is Ready

Lecture 131 Route Guarding

Lecture 132 Making a Transaction Form

Lecture 133 Creating a useFirestore Hook

Lecture 134 Adding Firestore Documents

Lecture 135 Firestore Timestamps

Lecture 136 Using the useFirestore Hook

Lecture 137 Creating a useCollection Hook

Lecture 138 Listing Transactions

Lecture 139 Firestore Queries

Lecture 140 Ordering Firestore Queries

Lecture 141 Deleting Transactions

Section 15: Firestore Rules

Lecture 142 What Are Firestore Rules?

Lecture 143 The Firebase CLI

Lecture 144 Securing Collection Data

Lecture 145 Deploying Firestore Rules

Section 16: Building & Deploying

Lecture 146 Building a React App

Lecture 147 Deploying to Firebase

Lecture 148 Updating the Site & Re-Deploying

Lecture 149 Rolling Back Deployments

Section 17: PROJECT BUILD – Project Management Site

Lecture 150 Project Preview & Setup

Lecture 151 Firebase Setup

Lecture 152 Firebase Init (Rules, Hosting & Storage)

Lecture 153 Re-using Firebase Hooks & Auth Context

Lecture 154 Router & Pages Setup

Lecture 155 Navbar Component

Lecture 156 Sidebar Component

Lecture 157 Creating a Signup Page

Lecture 158 Handling File Inputs

Lecture 159 Firebase Storage Setup

Lecture 160 Uploading Profile Images

Lecture 161 Signing a User Up

Lecture 162 Creating User Documents

Lecture 163 Logging Users Out

Lecture 164 Making a Login Page

Lecture 165 CHALLENGE – Logging Users In

Lecture 166 Redirects & Route Guards

Lecture 167 CHALLENGE – Conditional Navbar Links

Lecture 168 User Avatar Component

Lecture 169 Fetching Users

Lecture 170 Showing Users Online

Lecture 171 Making the “Create Project” Form

Lecture 172 Using React-Select

Lecture 173 Assigning Users

Lecture 174 Setting Form Errors

Lecture 175 Creating a Project Object

Lecture 176 CHALLENGE – Saving New Projects

Lecture 177 Fetching Projects

Lecture 178 Making a Project List / Grid

Lecture 179 Making a useDocument Hook

Lecture 180 Project Details Page (fetching a project)

Lecture 181 Project Summary Component

Lecture 182 Making a Comments Form

Lecture 183 Updating Firestore Documents

Lecture 184 Adding Comments

Lecture 185 Listing Comments

Lecture 186 Completing / Deleting Projects

Lecture 187 Making a Filter (part 1)

Lecture 188 Making a Filter (part 2)

Lecture 189 Making a Filter (part 3)

Lecture 190 Adding Firestore Rules

Lecture 191 Final Touches

Lecture 192 Deploying the App

Section 18: React with Firebase Version 9

Lecture 193 Intro & Starter Project

Lecture 194 Firebase Config File

Lecture 195 Getting Documents

Lecture 196 Real-Time Collection Data

Lecture 197 Adding Data

Lecture 198 Deleting Data

Lecture 199 Setting Up Firebase Auth

Lecture 200 Signing Users Up

Lecture 201 Logging Users Out

Lecture 202 Logging Users In

Lecture 203 Adding Auth Context

Lecture 204 Dispatching Actions

Lecture 205 Route Guards & Redirects

Lecture 206 Assigning Users to Books

Lecture 207 Firestore Queries

Lecture 208 Firebase Further Reading

Section 19: React Router Version 6

Lecture 209 Introduction to React Router 6

Lecture 210 The Route Component

Lecture 211 Redirects & useNavigate

Lecture 212 Nested Routes

Lecture 213 Refactoring the Recipe Site

Lecture 214 Refactoring the Project Management Site

Section 20: Extra Resources & JavaScript Helper Videos

Lecture 215 Extra JavaScript Lessons

Lecture 216 Destructuring

Lecture 217 Import & Exports

Lecture 218 Filter & Map Methods

Lecture 219 Spread Syntax

Lecture 220 Template Strings

Lecture 221 Arrow Functions

Lecture 222 Fetch API and Promises

Lecture 223 Async & Await

Lecture 224 More Tutorials

Beginner developers wanting to learn a front-end framework like React,Beginner React developers wanting to further their React skills & knowledge,Intermediate & advanced React developers wanting to learn how to integrate back-end services like authentication & databases,Developers who have used other frameworks (like Vue) & want to switch to React

Course Information:

Udemy | English | 23h 32m | 10.15 GB
Created by: The Net Ninja (Shaun Pelling)

You Can See More Courses in the Developer >> Greetings from CourseDown.com