Toggle navigation
Net Ninja Pro
All Courses
Community
YouTube Channel
Login
Sign Up
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Build Websites with React & Firebase
Introduction & Setup
1 - Welcome to the Course (2:56)
2 - React at a Glance (4:04)
3 - What You Should Already Know (1:18)
4 - Environment Setup (3:07)
5 - Course Files (1:37)
6 - Extra Resources & JavaScript Help
React Basics
7 - Using the React CDN (5:07)
8 - Creating a React Component (4:39)
9 -JSX Templates (3:50)
10 - Template Expressions (4:45)
11 - Click Events (6:07)
Using Create-React-App
12 - Making a React Site (3:56)
13 - Project Structure (7:23)
14 - Running the Application (4:35)
15 - Using Images (3:33)
16 - Using Stylesheets (3:18)
Intro to State & useState
17 - Why We Need State (7:13)
18 - Using useState (6:51)
19 - How State & Rendering Works (4:50)
20 - Outputtung Lists (8:18)
21 - Using Previous State (9:36)
22 - Conditional Templates (6:53)
23 - Rules of useState (1:35)
Components and Props
24 - Multiple Components (1:38)
25 - Making a Title Component (5:30)
26 - props (5:51)
27 - React Fragments (3:47)
28 - Children Props (7:45)
29 - Functions as Props (4:55)
30 - CHALLENGE - Showing the Modal (2:28)
31 - Portals (3:50)
32 - CHALLENGE - Event List Component (6:53)
33 - Class Components (an Overview) (2:46)
Styling React Applications
34 - Using a Global Stylesheet (3:09)
35 - Component Stylesheets (6:37)
36 - Inline Styles (3:20)
37 - Dynamic Inline Styles (2:36)
38 - Conditional CSS Classes (2:46)
39 - CSS Modules (6:22)
User Input & Events
40 - Forms & Labels in React (7:15)
41 - The onChange Event (6:16)
42 - Controlled Inputs (5:35)
43 - Submitting a Form (6:20)
44 - Adding a New Event to the State (6:35)
45 - The useRef Hook (6:32)
46 - Select Boxes (5:21)
Fetching Data & useEffect
47 - New Project & JSON Server Setup (7:00)
48 - Why We Need useEffect (8:18)
49 - Fetching Data with useEffect (7:48)
50 - The Dependency Array (9:24)
51 - Function Dependencies & useCallback (8:29)
52 - Making a Custom Fetch Hook (14:03)
53 - Adding a Loading State (4:24)
54 - Handling Errors (8:42)
55 - Why We Need Cleanup Functions (4:39)
56 - Aborting Fetch Requests (Cleanup Function) (5:44)
57 - useEffect Gotcha (6:15)
PROJECT BUILD - Memory Game
58 - Project Preview & Setup (5:41)
59 - Shuffling Cards (8:05)
60 - Creating a Card Grid (4:18)
61 - CHALLENGE - Creating a Card Component (4:10)
62 - Making Card Choices (5:56)
63 - CHALLENGE - Comparing Card Choices (7:14)
64 - Matching Cards (5:57)
65 - Flipping Cards (8:57)
66 - Flipping Animation (2:19)
67 - Disabling Card Selections (5:03)
68 - Final Touches (3:51)
The React Router
69 - Multipage React Sites (5:39)
70 - React Router & Pages Setup (6:58)
71 - Switch & Exact Matches (6:02)
72 - Links & NavLinks (7:14)
73 - Fetching Data (7:24)
74 - Route Parameters (6:35)
75 - The useParams Hook (6:50)
76 - Programmatic Redirects (5:40)
77 - Redirect Component (2:28)
78 - Query Parameters (5:22)
PROJECT BUILD - Recipe Directory
79 - Project Preview & Setup (6:38)
80 - Pages & Routes (6:18)
81 - Navbar Component (4:53)
82 - Fetching Recipe Data (4:40)
83 - Recipe List Component (9:45)
84 - CHALLENGE - Fetching a Single Recipe (5:17)
85 - Recipe Details Template (5:03)
86 - Making a Form for Creating Recipes (8:40)
87 - Adding Ingredients (12:34)
88 - Making a POST Request (12:33)
89 - CHALLENGE - Redirecting the User (3:42)
90 - Making a Searchbar (7:12)
91 - Search Results Page (8:15)
92 - Finishing Touches (3:20)
React Context & Reducers
93 - Prop Drilling (2:35)
94 - What is the Context API (2:54)
95 - Creating a Context & Provider (7:34)
96 - Accessing Context with useContext (3:39)
97 - Creating a Custom Context Hook (5:48)
98 - Reducers & useReducer (13:57)
99 - Making a Theme Color Selector (10:36)
100 - Making a Light & Dark Mode (12:22)
101 - Styling the Light & Dark Modes (6:40)
Firebase Firestore
102 - What is Firebase (3:31)
103 - Firestore Databases (5:03)
104 - Connecting to Firebase (7:10)
105 - Fetching a Firestore Collection (11:47)
106- Fetching a Firestore Document (9:37)
107 - Adding Firestore Documents (5:52)
108 - Deleting Documents (5:35)
109 - Realtime Collection Data (7:47)
110 - Updating Documents (4:40)
111 - Realtime Document Data (4:30)
PROJECT BUILD - Finance Tracker
112 - Project Preview & Setup (3:17)
113 - CHALLENGE - Pages & Routes (5:16)
114 - Navbar Component (4:43)
115 - Login Form (7:19)
116 - CHALLENGE - Signup Form (4:54)
117 - Firebase Setup (3:48)
118 - Firebase Authentication Setup (4:02)
119 - Creating a Signup Hook (11:14)
120 - Using the useSignup Hook (9:09)
121 - Creating an Auth Context (11:39)
122 - Dispatching a Login Action (6:07)
123 - Creating a useLogin Hook (6:31)
124 - Using the useLogout Hook (4:48)
125 - Cleanup Function (8:14)
126 - Creating a useLogin Hook (4:48)
127 - Using the useLogin Hook (3:57)
128 - Conditionally Showing User Content (8:06)
129 - Firebase Auth State Changes (9:28)
130 - Wating for Auth to be Ready (4:22)
131 - Route Guards (6:00)
132 - New Transaction Form (12:14)
133 - Creating a useFirestore Hook (13:02)
134 - Adding New Documents (10:57)
135 - Firestore Timestamps (3:41)
136 - Using the useFirestore Hook (9:36)
137 - Creating a useCollection Hook (11:19)
138 - Listing Transactions (7:54)
139 - Firestore Queries (10:29)
140 - Ordering Queries (6:08)
141 - Deleting Transactions (8:35)
Firestore Rules
142 - What Are Firestore Rules (4:56)
143 - The Firebase CLI (5:43)
144 - Securing Collections (6:15)
145 - Deploying Firestore Rules (3:46)
Building & Deploying
146 - Building a React App (2:10)
147 - Deploying to Firebase (3:09)
148 - Redeploying (1:57)
149 - Rolling Back Deployments (1:21)
PROJECT BUILD - Project Management Site
150 - Project Preview & Setup (6:25)
151 - Firebase Project Setup (6:41)
152- Firebase Init (2:40)
153 - Reusing Firebase Hooks (5:53)
154 - Router & Pages Setup (6:53)
155 - Navbar Component (7:04)
156 - Sidebar Component (11:58)
157 - Making a Signup Form (7:21)
158 - Handling File Input Changes (13:46)
159 - Firebase Storage Setup (2:40)
160 - Uploading Images (10:47)
161 - Signing Users Up (4:36)
162 - Creating User Documents (10:35)
163 - Logging Users Out (6:23)
164 - Making the Login Page (4:16)
165 - CHALLENGE - Logging Users In (5:06)
166 - Auth Guards & Redirects (8:59)
167 - CHALLENGE - Conditional Navbar Links (3:44)
168 - Avatar Component (7:06)
169 - Fetching User Data (8:45)
170 - Showing Online Users (4:14)
171 - New Project Form (8:59)
172 - Using React Select (npm package) (5:31)
173- Assigning Users to Projects (11:28)
174 - Form Errors (7:27)
175 - Making a New Project (11:22)
176 - CHALLENGE - Saving New Projects (6:05)
177 - Fetching Projects (7:43)
178 - Making a Project Grid (9:38)
179 - Making a useDocument Hook (7:27)
180 - Fetching a Single Project (9:07)
181 - Project Summary Component (8:04)
182 - Making a Comments Form (10:12)
183 - Updating Documents (7:11)
184 - Adding New Comments (4:46)
185 - Listing Comments (6:57)
186 - Completing (deleting) Projects (9:32)
187 - Making a Filter Component (part 1) (10:01)
188 - Making a Filter Component (part 2) (4:59)
189 - Making a Filter Component (part 3) (10:54)
190 - Adding Firestore Rules (11:20)
191 - Formatting Comment Dates (3:47)
192 - Deploying to Firebase (4:20)
Using React with Firebase 9
193 - Intro & Starter Project (9:12)
194 - Firebase Config Setup (4:33)
195 - Getting Firestore Documents (8:15)
196 - Real-Time Data (custom hook) (8:39)
197 - Adding Documents (3:33)
198 - Deleting Documents (3:19)
199 - Setting up Firebase Auth (1:08)
200 - Signing Users Up (6:53)
201 - Logging Users Out (3:17)
202 - Logging Users In (4:07)
203 - Adding Auth Context (7:30)
204 - Dispatching Actions (6:14)
205 - Route Guards & Redirects (4:54)
206 - Assigning Users to Books (4:31)
207 - Firestore Queries (6:20)
208 - Firebase Next Steps (1:29)
React Router Version 6
Introduction (13:58)
Route Components (7:40)
Redirects & useNavigate (7:53)
Nested Routes (10:37)
Updating the Cooking Site with React Router 6 (9:34)
Updating the Dojo Sitewith React Router 6 (12:36)
Extra JavaScript Help & Resources
209 - Extra JavaScript Lessons (0:37)
210 - Destructuring (7:00)
211 - imports & exports (5:04)
212 - filter & map methods (6:22)
213 - spread syntax (2:13)
214 - template strings (2:10)
215 - arrow function syntax (2:46)
216 - async & await (3:01)
217 - fetch api & promises (5:26)
187 - Making a Filter Component (part 1)
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
