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...
Available in
days
days
after you enroll
Available in
days
days
after you enroll
Available in
days
days
after you enroll
Available in
days
days
after you enroll
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)
Available in
days
days
after you enroll
Available in
days
days
after you enroll
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)
Available in
days
days
after you enroll
- 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)
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)
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:15)
- 92 - Finishing Touches (3:20)
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)
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)
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)
Available in
days
days
after you enroll
Available in
days
days
after you enroll
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)
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)
Available in
days
days
after you enroll
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).