Build Web Apps with React & Firebase

Build Web Apps with React & Firebase

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 22.5 Hours | 10.1 GB

Learn React from the ground up to make dynamic websites (includes Context, Hooks, Reducers, Routing, Auth, Databases)

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!

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
Table of Contents

Introduction & Setup
1 Welcome to the Course
2 React at a Glance
3 What You Should Already Know
4 Environment Setup
5 Using the Course Files
6 Extra Resources & Tutorials

React Basics
7 Using React with a CDN
8 Making a React Component
9 JSX & Templates
10 Template Expressions & Variables
11 Click Events & Event Handlers

Using Create-React-App
12 Making a React Site (create-react-app)
13 Project Structure Walkthrough
14 Running the Application
15 Using Images
16 Using Stylesheets

Intro to State & useState
17 Why We Need State
18 Using the useState Hook
19 How State & Rendering Works
20 Outputting Lists
21 Using the Previous State
22 Conditional Templates
23 useState Limitations

Components & Props
24 Using Mutliple Components
25 Creating a Title Component
26 Intro to Props
27 React Fragments
28 Children Prop (Making a Modal Component)
29 Functions as Props
30 CHALLENGE – Showing the Modal
31 Portals
32 CHALLENGE – Reusable Event List Component
33 Class Components Overview

Styling React Applications
34 Using Global Stylesheets
35 Component Stylesheets
36 Using Inline Styles
37 Dynamic Inline Styles
38 Conditional CSS Classes
39 CSS Modules

User Input & Events
40 Forms & Labels in React
41 The onChange Event
42 Controlled Inputs
43 Submitting Forms (onSubmit)
44 Adding Events to the Event List
45 Using the useRef Hook
46 Select Boxes

Fetching Data & useEffect
47 New Project & JSON Server
48 Why We Need useEffect
49 Fetching Data with useEffect
50 The useEffect Dependency Array
51 useCallback for Function Dependencies
52 Creating a Custom Fetch Hook
53 Adding a LoadingPending State
54 Handling Errors
55 Why We Need a Cleanup Function
56 Aborting Fetch Requests
57 useEffect Gotcha – Infinite Loops

PROJECT BUILD – Memory Game
58 Project Preview & Setup
59 Setting up & Shuffling Cards
60 Creating a Card Grid
61 CHALLENGE – Creating a Card Component
62 Making Card Choices
63 CHALLENGE – Comparing Choices
64 Adding a ‘matched’ Property to Cards
65 Flipping Cards
66 Flipping Animation (CSS)
67 Making Cards disabled
68 Finishing Touches

The React Router
69 Multi-Page React Sites
70 React Router Setup
71 Switch & Exact Match
72 Links & Nav Links
73 Fetching Data
74 Route Parameters
75 The useParams Hook
76 Programmatic Redirects
77 Redirect Component
78 Query Parameters

PROJECT BUILD – Recipe Directory
79 Project Preview & Setup
80 Router & Pages Setup
81 Making a Navbar Component
82 Fetching Data
83 Recipe List Component
84 CHALLENGE – Fetching a Single Recipe
85 Recipe Details Template
86 Making a Create Recipe Form
87 Adding Multiple Ingredients
88 Making a POST Request
89 CHALLENGE – Redirecting the User
90 Making a Search Bar Component
91 Search Results Page
92 Finishing Touches

React Context & Reducers
93 Prop Drilling
94 What is the Context API
95 Creating a Context & Provider
96 Accessing Context Values
97 Creating a Custom Context Hook
98 Reducers & useReducer
99 Making a Color Theme Selector
100 Light & Dark Mode Selector
101 Styling Light & Dark Modes

Firebase Firestore
102 What is Firebase
103 Firestore Databases
104 Connecting to Firebase
105 Fetching a Firestore Collection
106 Fetching a Firestore Document
107 Adding Firestore Data
108 Deleting Firestore Data
109 Real-Time Collection Data
110 Updating Documents
111 Real-Time Document Data

PROJECT BUILD – Finance Tracker (with Firebase Authentication)
112 Project Preview & Setup
113 CHALLENGE – Creating Pages & Routes
114 Creating a Navbar
115 Making the Login Form
116 CHALLENGE – Making the Signup Form
117 Firebase Setup
118 Firebase Authentication Setup
119 Creating a Signup Hook
120 Using the Signup Hook
121 Creating an Auth Context
122 Dispatching a Login Action
123 Creating a Logout Hook
124 Using the Logout Hook
125 Adding Cleanup Functions
126 Creating a Login Hook
127 Using the Login Hook
128 Conditionall Showing User Content
129 Firebase Auth State Changes
130 Waiting Until Auth is Ready
131 Route Guarding
132 Making a Transaction Form
133 Creating a useFirestore Hook
134 Adding Firestore Documents
135 Firestore Timestamps
136 Using the useFirestore Hook
137 Creating a useCollection Hook
138 Listing Transactions
139 Firestore Queries
140 Ordering Firestore Queries
141 Deleting Transactions

Firestore Rules
142 What Are Firestore Rules
143 The Firebase CLI
144 Securing Collection Data
145 Deploying Firestore Rules

Building & Deploying
146 Building a React App
147 Deploying to Firebase
148 Updating the Site & Re-Deploying
149 Rolling Back Deployments

PROJECT BUILD – Project Management Site
150 Project Preview & Setup
151 Firebase Setup
152 Firebase Init (Rules, Hosting & Storage)
153 Re-using Firebase Hooks & Auth Context
154 Router & Pages Setup
155 Navbar Component
156 Sidebar Component
157 Creating a Signup Page
158 Handling File Inputs
159 Firebase Storage Setup
160 Uploading Profile Images
161 Signing a User Up
162 Creating User Documents
163 Logging Users Out
164 Making a Login Page
165 CHALLENGE – Logging Users In
166 Redirects & Route Guards
167 CHALLENGE – Conditional Navbar Links
168 User Avatar Component
169 Fetching Users
170 Showing Users Online
171 Making the Create Project Form
172 Using React-Select
173 Assigning Users
174 Setting Form Errors
175 Creating a Project Object
176 CHALLENGE – Saving New Projects
177 Fetching Projects
178 Making a Project List Grid
179 Making a useDocument Hook
180 Project Details Page (fetching a project)
181 Project Summary Component
182 Making a Comments Form
183 Updating Firestore Documents
184 Adding Comments
185 Listing Comments
186 Completing Deleting Projects
187 Making a Filter (part 1)
188 Making a Filter (part 2)
189 Making a Filter (part 3)
190 Adding Firestore Rules
191 Final Touches
192 Deploying the App

React with Firebase Version 9
193 Intro & Starter Project
194 Firebase Config File
195 Getting Documents
196 Real-Time Collection Data
197 Adding Data
198 Deleting Data
199 Setting Up Firebase Auth
200 Signing Users Up
201 Logging Users Out
202 Logging Users In
203 Adding Auth Context
204 Dispatching Actions
205 Route Guards & Redirects
206 Assigning Users to Books
207 Firestore Queries
208 Firebase Further Reading

Extra Resources & JavaScript Helper Videos
209 Extra JavaScript Lessons
210 Destructuring
211 Import & Exports
212 Filter & Map Methods
213 Spread Syntax
214 Template Strings
215 Arrow Functions
216 Fetch API & Promises
217 Async & Await
218 More Tutorials

Homepage