English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 410 lectures (67h 10m) | 32.97 GB
Master modern React from beginner to advanced! Context API, React Query, Redux Toolkit, Tailwind, advanced patterns
Contains the biggest and most professional project, where we implement many common app features (see promo video!)
Super detailed explanations of all important concepts with carefully crafted and animated diagrams
A huge focus on “how to think in React” and modern best practices
A long section that explores how React actually works behind the scenes will give you the confidence to use React effectively on your own
Advanced design patterns like compound components will make you think like a senior React engineer
And these are just the highlights! Check out the full list below (+ the promo video and curriculum).
Also, make no mistake: “React course” actually means “Front-end development with React and modern libraries course”.
That’s right, besides the React library itself, you will learn and master them all: React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, and more.
This is how we plan, build, and deploy professional projects! We even use industry-standard tools such as Supabase (fully-fledged back-end), GitHub, Netlify, and Vercel.
As you expect, this course is 100% project-based. So throughout the course, you’ll start building your portfolio of 8+ beautiful and high-quality React apps, where each one will showcase a few of the new skills you will be learning.
By the end of the course, you will have all the knowledge and confidence that you need to ace your job interviews and become the professional React developer that companies are looking for.
Here are all the nerdy details of what we’ll cover:
React fundamentals [why we even need React, components, JSX, props, events, forms, state, props vs. state]
How to think about state [where to place state, guidelines, lifting state up, local vs. global state, UI vs. remote state]
How to think about components [how to split components, props as API, how to build reusable and composable components, the children prop]
Deep dive into effects and useEffect [data fetching, lifecycle vs. synchronization, when to use effects, effects vs. event handlers]
Deep dive into hooks [rules of hooks, how hooks work, useRef, building super-reusable custom hooks]
Performance optimization [wasted renders, memoization with memo, useMemo, and useCallback, optimizing Context API, code splitting + Suspense]
Advanced state management [useReducer hook, the Context API, Redux, Redux Toolkit, Thunks, React Query]
Building Single-Page Applications (SPA) [Vite, routing with React Router, URL parameters and query strings for state management, data loaders and actions (v6.4+)]
Building real-world features found in many apps [authentication and authorization, data sorting, filtering and pagination, dark mode, dashboard with charts, etc.]
Creating your own back-end with a DB and API using Supabase [gain the power to build full-stack apps on your own!]
How to style React apps [Tailwind CSS, CSS Modules, and Styled Components (CSS-in-JS)]
Advanced React patterns used by senior developers [render props, higher-order components, compound components (to build a modal, a context menu, and more)]
How React works behind the scenes [rendering, virtual DOM, reconciliation, fiber tree, key prop, events, state batching, etc.]
What you’ll learn
- Become an advanced, confident, and modern React developer from scratch
- Build 8+ beautiful projects, including one HUGE professional real-world app
- Become job-ready by working with libraries and tools used in professional projects
- Think like a senior React engineer with advanced design patterns
- React fundamentals: components, JSX, props, events, state, forms
- State management: thinking about state, where to place, local vs. global, UI vs. remote
- Build reusable, composable, and versatile components
- Master the confusing but important useEffect hook once and for all
- Build many custom hooks, reusable in your future projects
- Build single-page applications with React Router (including v6.4+ with data loading)
- Performance optimization with memo, useMemo, useCallback, and code splitting
- Advanced React features: useReducer, Context API, cloneElement, portals, etc.
- Advanced state management with Redux, Redux Toolkit, Thunks, React Query
- Build real-world app features: authentication, data sorting, filtering and pagination, dark mode, charts, etc.
- Understand how React actually works behind the scenes: virtual DOM, reconciliation, fiber tree, key prop, etc.
- Style your apps with Tailwind CSS, CSS Modules, Styled Components (CSS-in-JS)
- Practice your skills with many challenges, exercises, and practice projects
Table of Contents
Welcome, Welcome, Welcome!
1 Course Roadmap and Projects
2 Building Our First React App!
3 Watch Before You Start!
4 Read Before You Start!
5 Downloading Course Material
PART 1 REACT FUNDAMENTALS [4 PROJECTS]
6 Introduction to Part 1
7 Useful Resources for Part 1
A First Look at React
8 Section Overview
9 Why Do Front-End Frameworks Exist
10 React vs. Vanilla JavaScript
11 What is React
12 Setting Up Our Development Environment
13 Pure React
14 A Quick Look at React’s Official Documentation
15 Setting Up a New React Project The Options
16 Setting Up a Project With Create-React-App
[Optional] Review of Essential JavaScript for React
17 Section Overview
18 Destructuring Objects and Arrays
19 RestSpread Operator
20 Template Literals
21 Ternaries Instead of ifelse Statements
22 Arrow Functions
23 Short-Circuiting And Logical Operators &&, ,
24 Optional Chaining
25 The Array map Method
26 The Array filter Method
27 The Array reduce Method
28 The Array sort Method
29 Working With Immutable Arrays
30 Asynchronous JavaScript Promises
31 Asynchronous JavaScript AsyncAwait
Working With Components, Props, and JSX
32 Section Overview
33 Rendering the Root Component and Strict Mode
34 Before We Start Coding Debugging
35 Components as Building Blocks
36 Creating And Reusing a Component
37 What is JSX
38 Creating More Components
39 JavaScript Logic in Components
40 Separation of Concerns
41 Styling React Applications
42 Passing and Receiving Props
43 Props, Immutability, and One-Way Data Flow
44 CHALLENGE #1 Profile Card (v1)
45 The Rules of JSX
46 Rendering Lists
47 Conditional Rendering With &&
48 Conditional Rendering With Ternaries
49 Conditional Rendering With Multiple Returns
50 Extracting JSX Into a New Component
51 Destructuring Props
52 React Fragments
53 Setting Classes and Text Conditionally
54 Section Summary
55 CHALLENGE #2 Profile Card (v2)
State, Events, and Forms Interactive Components
56 Section Overview
57 Let’s Build a Steps Component
58 Handling Events the React Way
59 What is State in React
60 Creating a State Variable With useState
61 Don’t Set State Manually!
62 The Mechanics of State
63 Adding Another Piece of State
64 React Developer Tools
65 Updating State Based on Current State
66 More Thoughts About State + State Guidelines
67 A Vanilla JavaScript Implementation
68 CHALLENGE #1 Date Counter (v1)
69 Starting a New Project The Far Away Travel List
70 Building the Layout
71 Rendering the Items List
72 Building a Form and Handling Submissions
73 Controlled Elements
74 State vs. Props
75 EXERCISE #1 Flashcards
76 CHALLENGE #2 Date Counter (v2)
Thinking In React State Management
77 Section Overview
78 What is Thinking in React
79 Fundamentals of State Management
80 Thinking About State and Lifting State Up
81 Reviewing Lifting Up State
82 Deleting an Item More Child-to-Parent Communication!
83 Updating an Item Complex Immutable Data Operation
84 Derived State
85 Calculating Statistics as Derived State
86 Sorting Items
87 Clearing the List
88 Moving Components Into Separate Files
89 EXERCISE #1 Accordion Component (v1)
90 The children Prop Making a Reusable Button
91 More Reusability With the children Prop
92 EXERCISE #2 Accordion Component (v2)
93 CHALLENGE #1 Tip Calculator
[Optional] Practice Project Eat-‘N-Split
94 Section Overview
95 Project Setup
96 Building the Static App List of Friends
97 Building the Static App Forms
98 Displaying the New Friend Form
99 Adding a New Friend
100 Selecting a Friend
101 Creating Controlled Elements
102 Splitting a Bill
PART 2 INTERMEDIATE REACT [2 PROJECTS]
103 Introduction to Part 2
104 Useful Resources for Part 2
Thinking in React Components, Composition, and Reusability
105 Section Overview
106 Setting Up the usePopcorn Project
107 How to Split a UI Into Components
108 Splitting Components in Practice
109 Component Categories
110 Prop Drilling
111 Component Composition
112 Fixing Prop Drilling With Composition (And Building a Layout)
113 Using Composition to Make a Reusable Box
114 Passing Elements as Props (Alternative to children)
115 Building a Reusable Star Rating Component
116 Creating the Stars
117 Handling Hover Events
118 Props as a Component API
119 Improving Reusability With Props
120 PropTypes
121 CHALLENGE #1 Text Expander Component
How React Works Behind the Scenes
122 Section Overview
123 Project Setup and Walkthrough
124 Components, Instances, and Elements
125 Instances and Elements in Practice
126 How Rendering Works Overview
127 How Rendering Works The Render Phase
128 How Rendering Works The Commit Phase
129 How Diffing Works
130 Diffing Rules in Practice
131 The Key Prop
132 Resetting State With the Key Prop
133 Using the Key Prop to Fix Our Eat-‘N-Split App
134 Rules for Render Logic Pure Components
135 State Update Batching
136 State Update Batching in Practice
137 How Events Work in React
138 Libraries vs. Frameworks & The React Ecosystem
139 Section Summary Practical Takeaways
Effects and Data Fetching
140 Section Overview
141 The Component Lifecycle
142 How NOT to Fetch Data in React
143 useEffect to the Rescue
144 A First Look at Effects
145 Using an async Function
146 Adding a Loading State
147 Handling Errors
148 The useEffect Dependency Array
149 Synchronizing Queries With Movie Data
150 Selecting a Movie
151 Loading Movie Details
152 Adding a Watched Movie
153 Adding a New Effect Changing Page Title
154 The useEffect Cleanup Function
155 Cleaning Up the Title
156 Cleaning Up Data Fetching
157 One More Effect Listening to a Keypress
158 CHALLENGE #1 Currency Converter
Custom Hooks, Refs, and More State
159 Section Overview
160 React Hooks and Their Rules
161 The Rules of Hooks in Practice
162 More Details of useState
163 Initializing State With a Callback (Lazy Initial State)
164 useState Summary
165 How NOT to Select DOM Elements in React
166 Introducing Another Hook useRef
167 Refs to Select DOM Elements
168 Refs to Persist Data Between Renders
169 What are Custom Hooks When to Create One
170 Creating our First Custom Hook useMovies
171 Creating useLocalStorageState
172 Creating useKey
173 CHALLENGE #1 useGeolocate
[Optional] React Before Hooks Class-Based React
174 Section Overview
175 Our First Class Component
176 Working With Event Handlers
177 Class Components vs. Function Components
178 Starting the Classy Weather App
179 Fetching Weather Data
180 Displaying the Weather
181 Removing Boilerplate Code With Class Fields
182 Child to Parent Communication
183 Lifecycle Methods
PART 3 ADVANCED REACT + REDUX [4 PROJECTS]
184 Introduction to Part 3
185 Useful Resources for Part 3
The Advanced useReducer Hook
186 Section Overview
187 Yet Another Hook useReducer
188 Managing Related Pieces of State
189 Managing State With useReducer
190 The React Quiz App
191 Loading Questions from a Fake API
192 Handling Loading, Error, and Ready Status
193 Starting a New Quiz
194 Displaying Questions
195 Handling New Answers
196 Moving to the Next Question
197 Displaying Progress
198 Finishing a Quiz
199 Restarting a Quiz
200 Setting Up a Timer With useEffect
201 Section Summary useState vs. useReducer
202 CHALLENGE #1 Creating a Bank Account With useReducer
React Router Building Single-Page Applications (SPA)
203 Section Overview
204 Creating Our First App With Vite WorldWise
205 Routing and Single-Page Applications (SPAs)
206 Implementing Main Pages and Routes
207 Linking Between Routes With Link and NavLink
208 Styling Options For React Applications
209 Using CSS Modules
210 Building the Pages
211 Building the App Layout
212 Nested Routes and Index Route
213 Implementing the Cities List
214 Implementing the Countries List
215 Storing State in the URL
216 Dynamic Routes With URL Parameters
217 Reading and Setting a Query String
218 Programmatic Navigation with useNavigate
219 Programmatic Navigation with Navigate
Advanced State Management The Context API
220 Section Overview
221 CHALLENGE #1 Understand The Atomic Blog App
222 What is the Context API
223 Creating and Providing a Context
224 Consuming the Context
225 Advanced Pattern A Custom Provider and Hook
226 Thinking In React Advanced State Management
227 Back to WorldWise Creating a CitiesContext
228 Consuming the CitiesContext
229 Finishing the City View
230 Including a Map With the Leaflet Library
231 Displaying City Markers on Map
232 Interacting With the Map
233 Setting Map Position With Geolocation
234 Fetching City Data in the Form
235 Creating a New City
236 Deleting a City
237 Advanced State Management System Context + useReducer
238 Adding Fake Authentication Setting Up Context
239 Adding Fake Authentication Implementing Login
240 Adding Fake Authentication Protecting a Route
241 CHALLENGE #2 Refactoring React Quiz to Context API
Performance Optimization and Advanced useEffect
242 Section Overview
243 Performance Optimization and Wasted Renders
244 The Profiler Developer Tool
245 A Surprising Optimization Trick With children
246 Understanding memo
247 memo in Practice
248 Understanding useMemo and useCallback
249 useMemo in Practice
250 useCallback in Practice
251 Optimizing Context Re-Renders
252 Back to The WorldWise App
253 Optimizing Bundle Size With Code Splitting
254 Don’t Optimize Prematurely!
255 useEffect Rules and Best Practices
256 CHALLENGE #1 Fix Performance Issues in Workout Timer
257 Setting State Based on Other State Updates
258 Using Helper Functions In Effects
259 Closures in Effects
Redux and Modern Redux Toolkit (With Thunks)
260 Section Overview
261 Introduction to Redux
262 Creating a Reducer Bank Account
263 Creating a Redux Store
264 Working With Action Creators
265 Adding More State Customer
266 Professional Redux File Structure State Slices
267 Back to React! Connecting our Redux App With React
268 Dispatching Actions from Our React App
269 The Legacy Way of Connecting Components to Redux
270 Redux Middleware and Thunks
271 Making an API Call With Redux Thunks
272 The Redux DevTools
273 What is Redux Toolkit (RTK)
274 Creating the Store With RTK
275 Creating the Account Slice
276 Back to Thunks
277 Creating the Customer Slice
278 Redux vs. Context API
PART 4 PROFESSIONAL REACT DEVELOPMENT [2 PROJECTS]
279 Introduction to Part 4
280 Useful Resources for Part 4
React Router With Data Loading (v6.4+)
281 Section Overview
282 Setting Up a New Project Fast React Pizza Co.
283 Application Planning
284 Setting Up a Professional File Structure
285 A New Way Of Implementing Routes
286 Building the App Layout
287 Fetching Data With React Router Loaders Pizza Menu
288 Displaying a Loading Indicator
289 Handling Errors With Error Elements
290 Fetching Orders
291 Writing Data With React Router Actions
292 Error Handling in Form Actions
[Optional] Tailwind CSS Crash Course Styling the App
293 Section Overview
294 What is Tailwind CSS
295 Setting Up Tailwind CSS
296 Working With Color
297 Styling Text
298 The Box Model Spacing, Borders, and Display
299 Responsive Design
300 Using Flexbox
301 Using CSS Grid
302 Styling Buttons Element States and Transitions
303 Styling Form Elements
304 Reusing Styles With @apply
305 Reusing Styles With React Components
306 Absolute Positioning, z-index, and More
307 Configuring Tailwind Custom Font Family
308 Styling the Menu
309 Styling the Cart
310 Styling the Order Form
311 Styling the Order Overview
Adding Redux and Advanced React Router
312 Section Overview
313 Modeling the User State With Redux Toolkit
314 Reading and Updating the User State
315 Modeling the Cart State
316 Adding Menu Items to the Cart
317 Building the Cart Overview With Redux Selectors
318 Building the Cart Page
319 Deleting Cart Items
320 Updating Cart Quantities
321 Using the Cart for New Orders
322 Redux Thunks With createAsyncThunk
323 Integrating Geolocation
324 Fetching Data Without Navigation useFetcher
325 Updating Data Without Navigation
Setting Up Our Biggest Project + Styled Components
326 Section Overview
327 Application Planning
328 Setting Up the Project The Wild Oasis
329 Introduction to Styled Components
330 Global Styles With Styled Components
331 Styled Component Props and the css Function
332 Building More Reusable Styled Components
333 Setting Up Pages and Routes
334 Building the App Layout
335 Building the Sidebar and Main Navigation
Supabase Crash Course Building a Back-End!
336 Section Overview
337 What is Supabase
338 Creating a New Database
339 Modeling Application State
340 Creating Tables
341 Relationships Between Tables
342 Adding Security Policies (RLS)
343 Connecting Supabase With Our React App
344 Setting Up Storage Buckets
React Query Managing Remote State
345 Section Overview
346 What is React Query
347 Setting Up React Query
348 Fetching Cabin Data
349 Mutations Deleting a Cabin
350 Displaying Toasts (Notifications)
351 Introducing Another Library React Hook Form
352 Creating a New Cabin
353 Handling Form Errors
354 Uploading Images to Supabase
355 Editing a Cabin
356 Abstracting React Query Into Custom Hooks
357 Duplicating Cabins
358 Fetching Applications Settings
359 Updating Application Settings
Advanced React Patterns
360 Section Overview
361 An Overview of Reusability in React
362 Setting Up an Example
363 The Render Props Pattern
364 A Look at Higher-Order Components (HOC)
365 The Compound Component Pattern
366 Building a Modal Window Using a React Portal
367 Converting the Modal to a Compound Component
368 Detecting a Click Outside the Modal
369 Confirming Cabin Deletions
370 Building a Reusable Table
371 Applying the Render Props Pattern
372 Building a Reusable Context Menu
[Optional] Implementing More Features Authentication, Dark Mode, Dashboard, etc
373 Section Overview
374 Client-Side Filtering Filtering Cabins
375 Client-Side Sorting Sorting Cabins
376 Building the Bookings Table
377 Uploading Sample Data
378 API-Side Filtering Filtering Bookings
379 API-Side Sorting Sorting Bookings
380 Building a Reusable Pagination Component
381 API-Side Pagination Paginating Bookings
382 Prefetching With React Query
383 Building the Single Booking Page
384 Checking In a Booking
385 Adding Optional Breakfast
386 Checking Out a Booking (+ Fixing a Small Bug)
387 Deleting a Booking
388 Authentication User Login With Supabase
389 Authorization Protecting Routes
390 User Logout
391 Fixing an Important Bug
392 Building the Sign Up Form
393 User Sign Up
394 Authorization on Supabase Protecting Database (RLS)
395 Building The App Header
396 Updating User Data and Password
397 Implementing Dark Mode With CSS Variables
398 Building the Dashboard Layout
399 Computing Recent Bookings and Stays
400 Displaying Statistics
401 Displaying a Line Chart With the Recharts Library
402 Displaying a Pie Chart
403 Displaying Stays for Current Day
404 Error Boundaries
405 Final Touches + Fixing Bugs
Deployment With Netlify and Vercel
406 Section Overview
407 Deploying to Netlify
408 Setting Up a Git and GitHub Repository
409 Deploying to Vercel
The End!
410 Where to Go from Here
Resolve the captcha to access the links!