React & Firebase Masterclass
This is a Net Ninja Pro Exclusive 20+ hr Course.
React is a hugely popular front-end library used to create fast, dynamic & interactive websites. In this course you'll learn how to make websites with React & Firebase from the ground-up & create 4 full applications along the way.
You'll learn about hooks, the context API, reducers, databases, authentication, file uploads & much more.
Check out the course preview at the bottom of the page to find out more.
In This Course...
Introduction & Setup
Available in
days
days
after you enroll
React Basics
Available in
days
days
after you enroll
Using Create-React-App
Available in
days
days
after you enroll
Intro to State & useState
Available in
days
days
after you enroll
Components and Props
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
User Input & Events
Available in
days
days
after you enroll
Fetching Data & useEffect
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 58 - Project Preview & Setup (5:42)
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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:16)
- 92 - Finishing Touches (3:20)
React Context & Reducers
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Building & Deploying
Available in
days
days
after you enroll
PROJECT BUILD - Project Management Site
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Extra JavaScript Help & Resources
Available in
days
days
after you enroll
Course Preview
Sign up for Net Ninja Pro
Most popular
Monthly Membership
$9/mo
- Instant access to all courses
- Early access to new courses
- Access to premium & Udemy courses
- Cancel at any time
Yearly Membership
$79/yr
- Instant access to all courses
- Early access to new courses
- Access to premium & Udemy courses
- Save over 25%!
Get your first month half price when you use the code NINJAFLEDGLING. (monthly plan only).