Autoplay
Autocomplete
Previous Lesson
Complete and Continue
[LEGACY] React - The Complete Guide (incl Hooks, React Router, Redux)
This Course Got Updated!
About the Course Update & Migration Steps (11:43)
Course Update Information (Written Guide)
The Academind Pro Referral Program
Getting Started
Introduction (1:49)
What is React? (2:55)
Real-World SPAs & React Web Apps (1:44)
Writing our First React Code (15:07)
Join our Online Learning Community
Why Should we Choose React? (2:03)
React Alternatives (1:11)
Understanding Single Page Applications and Multi Page Applications (3:38)
Course Outline (7:28)
How to get the Most out of This Course (2:29)
Useful Resources & Links
Refreshing Next Generation JavaScript (Optional)
Module Introduction (1:35)
Understanding "let" and "const" (3:05)
Arrow Functions (5:27)
Exports and Imports (4:43)
Understanding Classes (4:37)
Classes, Properties and Methods (3:03)
The Spread & Rest Operator (6:30)
Destructuring (3:13)
Reference and Primitive Types Refresher (4:26)
Refreshing Array Functions (2:45)
Wrap Up (0:52)
Next-gen JavaScript Summary
JavaScript Array Functions
Understanding the Base Features & Syntax
Module Introduction (0:38)
The Build Workflow (8:00)
Using Create React App (6:09)
Understanding the Folder Structure (8:11)
Understanding Component Basics (5:32)
Understanding JSX (5:38)
JSX Restrictions (3:09)
Creating a Functional Component (8:09)
Working with Components & Re-Using Them (1:47)
Outputting Dynamic Content (3:02)
Working with Props (4:07)
Understanding the "children" Prop (2:56)
Understanding & Using State (7:17)
Props & State
Handling Events with Methods (3:45)
Manipulating the State (5:03)
Using the useState() Hook for State Manipulation (13:51)
Stateless vs Stateful Components (3:08)
Passing Method References Between Components (7:05)
Adding Two Way Binding (6:51)
Adding Styling with Stylesheets (5:28)
Working with Inline Styles (4:15)
Assignment: Basics (Problem) (4:35)
Assignment: Basics (Solution) (22:28)
Useful Resources & Links
Working with Lists and Conditionals
Module Introduction (1:03)
Rendering Content Conditionally (10:09)
Handling Dynamic Content "The JavaScript Way" (4:49)
Outputting Lists (Intro) (1:31)
Outputting Lists (5:32)
Lists & State (4:12)
Updating State Immutably (2:39)
Lists & Keys (4:14)
Flexible Lists (7:34)
Wrap Up (1:55)
Assignment: Conditional Content & Lists (Problem) (5:25)
Assignment: Conditional Content & Lists (Solution) (17:16)
Useful Resources & Links
Styling React Components & Elements
Module Introduction (1:19)
Outlining the Problem Set (1:58)
Setting Styles Dynamically (3:19)
Setting Class Names Dynamically (7:09)
Adding and Using Radium (7:00)
Using Radium for Media Queries (5:02)
Introducing Styled Components (8:16)
More on Styled Components (5:51)
Styled Components & Dynamic Styles (5:27)
Working with CSS Modules (15:21)
CSS Modules & Media Queries (3:15)
More on CSS Modules
Useful Resources & Links
Debugging React Apps
Module Introduction (0:55)
Understanding Error Messages (2:37)
Finding Logical Errors by using Dev Tools & Sourcemaps (4:17)
Working with the React Developer Tools (3:06)
Using Error Boundaries (React 16+) (8:13)
Wrap Up (0:56)
Useful Resources & Links
Diving Deeper into Components & React Internals
Module Introduction (0:42)
A Better Project Structure (7:24)
Splitting an App Into Components (15:54)
Comparing Stateless and Stateful Components (3:46)
Class-based vs Functional Components (5:15)
class Component Lifecycle Overview (5:04)
Component Creation Lifecycle in Action (6:46)
Component Update Lifecycle (for props Changes) (15:34)
Component Update Lifecycle (for state Changes) (3:49)
Using useEffect() in Functional Components (3:46)
Controlling the useEffect() Behavior (3:40)
Cleaning up with Lifecycle Hooks & useEffect() (6:48)
Cleanup Work with useEffect() - Example (1:37)
Using shouldComponentUpdate for Optimization (6:45)
Optimizing Functional Components with React.memo() (3:39)
When should you optimize? (2:18)
PureComponents instead of shouldComponentUpdate (3:35)
How React Updates the DOM (4:27)
Rendering Adjacent JSX Elements (9:00)
Must Read: Windows Users
Using React.Fragment (1:29)
Higher Order Components (HOC) - Introduction (4:20)
Another Form of HOCs (5:56)
Passing Unknown Props (4:58)
Setting State Correctly (5:13)
Using PropTypes (6:53)
Using Refs (7:37)
Refs with React Hooks (4:34)
Understanding Prop Chain Problems (4:56)
Using the Context API (10:03)
contextType & useContext() (5:33)
Wrap Up (1:21)
Useful Resources & Links
A Real App: The Burger Builder (Basic Version)
About React Hooks
Module Introduction (0:57)
Planning an App in React - Core Steps (2:32)
Planning our App - Layout and Component Tree (10:57)
Planning the State (4:13)
Setting up the Project (5:01)
Creating a Layout Component (10:01)
Starting Implementation of The Burger Builder Container (5:04)
Adding a Dynamic Ingredient Component (8:27)
Adding Prop Type Validation (2:49)
Starting the Burger Component (6:49)
Outputting Burger Ingredients Dynamically (9:44)
Calculating the Ingredient Sum Dynamically (5:10)
Adding the Build Control Component (7:26)
Outputting Multiple Build Controls (4:03)
Connecting State to Build Controls (8:22)
Removing Ingredients Safely (7:30)
Displaying and Updating the Burger Price (2:28)
Adding the Order Button (10:39)
Creating the Order Summary Modal (13:58)
Showing & Hiding the Modal (with Animation!) (6:59)
Implementing the Backdrop Component (8:22)
Adding a Custom Button Component (4:46)
Implementing the Button Component (4:54)
Adding the Price to the Order Summary (2:05)
Adding a Toolbar (9:11)
Using a Logo in our Application (6:39)
Adding Reusable Navigation Items (11:26)
Creating a Responsive Sidedrawer (7:44)
Working on Responsive Adjustments (4:34)
More about Responsive Adjustments (7:18)
Reusing the Backdrop (9:11)
Adding a Sidedrawer Toggle Button (6:27)
Adding a Hamburger Icon (2:20)
Improving the App - Introduction (1:11)
Prop Type Validation (1:17)
Improving Performance (8:48)
Using Component Lifecycle Methods (2:00)
Changing the Folder Structure (4:57)
Wrap Up (1:49)
Useful Resources & Links
Reaching out to the Web (Http / Ajax)
Module Introduction (1:03)
Understanding Http Requests in React (1:35)
Understanding our Project and Introducing Axios (4:15)
Creating a Http Request to GET Data (5:29)
Rendering Fetched Data to the Screen (3:46)
Transforming Data (2:40)
Making a Post Selectable (4:01)
Fetching Data on Update (without Creating Infinite Loops) (7:56)
POSTing Data to the Server (3:52)
Sending a DELETE Request (2:23)
Fixing a Bug (0:33)
Handling Errors Locally (3:23)
Adding Interceptors to Execute Code Globally (6:18)
Setting a Default Global Configuration for Axios (3:10)
Creating and Using Axios Instances (5:03)
Wrap Up (0:47)
Useful Resources & Links
Burger Builder Project: Accessing a Server
Module Introduction (1:52)
Creating the Firebase Project (3:26)
Creating the Axios Instance (2:42)
Sending a POST Request (7:46)
Displaying a Spinner while Sending a Request (9:20)
Handling Errors (12:04)
Retrieving Data from the Backend (11:22)
Removing Old Interceptors (8:24)
Useful Resources & Links
Multi-Page-Feeling in a Single-Page-App: Routing
Module Introduction (0:51)
Routing and SPAs (2:43)
Setting Up Links (4:22)
Setting Up the Router Package (4:46)
Preparing the Project For Routing (5:13)
Setting Up and Rendering Routes (5:18)
Rendering Components for Routes (1:57)
Switching Between Pages (2:17)
Using Links to Switch Pages (4:03)
Using Routing-Related Props (3:12)
The "withRouter" HOC & Route Props (3:44)
Absolute vs Relative Paths (2:34)
Styling the Active Route (5:55)
Passing Route Parameters (6:54)
Extracting Route Parameters (3:03)
Parsing Query Parameters & the Fragment
Using Switch to Load a Single Route (3:33)
Navigating Programmatically (3:25)
Additional Information Regarding Active Links (2:22)
Understanding Nested Routes (7:55)
Creating Dynamic Nested Routes (4:38)
Redirecting Requests (2:45)
Conditional Redirects (2:47)
Using the History Prop to Redirect (Replace) (2:49)
Working with Guards (3:46)
Handling the 404 Case (Unknown Routes) (3:02)
Loading Routes Lazily (11:49)
Lazy Loading with React Suspense (16.6) (9:47)
Routing and Server Deployment (4:19)
Assignment: Routing (Problem) (4:53)
Assignment: Routing (Solution) (29:11)
Wrap Up (0:49)
Useful Resources & Links
Adding Routing to our Burger Project
Module Introduction (1:35)
Building the Checkout Container (11:32)
Setting Up Routing & Routes (4:41)
Navigating to the Checkout Page (4:50)
Navigating Back & To Next Page (3:33)
Passing Ingredients via Query Params (5:27)
Navigating to the Contact Data Component (9:33)
Order Submission & Passing Data Between Pages (11:44)
Adding an Orders Page (5:34)
Implementing Navigation Links (5:35)
Fetching Orders (6:03)
Outputting the Orders (7:34)
Wrap Up (1:07)
Useful Resources & Links
Forms and Form Validation
Module Introduction (0:49)
Analyzing the App (1:49)
Creating a Custom Dynamic Input Component (11:30)
Setting Up a JS Config for the Form (7:34)
Dynamically Create Inputs based on JS Config (5:23)
Adding a Dropdown Component (3:52)
Handling User Input (7:43)
Handling Form Submission (4:11)
Adding Custom Form Validation (8:09)
Fixing a Common Validation Gotcha (1:18)
Adding Validation Feedback (5:12)
Improving Visual Feedback (2:18)
Handling Overall Form Validity (7:35)
Working on an Error (1:26)
Fixing a Bug (2:09)
Showing Error Messages
Useful Resources & Links
Redux
Module Introduction (1:00)
Understanding State (1:50)
The Complexity of Managing State (2:42)
Understanding the Redux Flow (5:17)
Setting Up Reducer and Store (7:09)
Dispatching Actions (6:44)
Adding Subscriptions (2:47)
Connecting React to Redux (3:39)
Connecting the Store to React (8:19)
Dispatching Actions from within the Component (5:53)
Assignment: Dispatching Actions (Problem) (1:41)
Assignment: Dispatching Actions (Solution) (4:15)
Passing and Retrieving Data with Action (4:06)
Switch-Case in the Reducer (3:00)
Updating State Immutably (13:20)
Updating Arrays Immutably (8:39)
Immutable Update Patterns
Outsourcing Action Types (5:19)
Combining Multiple Reducers (10:18)
Understanding State Types (4:50)
Assignment: Redux Basics (Problem) (1:45)
Assignment: Redux Basics (Solution) (14:23)
Combining Local UI State and Redux (7:39)
Wrap Up (1:42)
Useful Resources & Links
Adding Redux to our Project
Module Introduction (5:26)
Installing Redux and React Redux (4:08)
Basic Redux Setup (2:10)
Finishing the Reducer for Ingredients (6:35)
Connecting the Burger Builder Container to our Store (9:33)
Working on the Total Price Calculation (6:05)
Redux & UI State (4:08)
Adjusting Checkout and Contact Data (9:10)
Wrap Up (2:38)
Useful Resources & Links
Redux Advanced
Module Introduction (0:28)
Adding Middleware (7:47)
Using the Redux Devtools (7:32)
Executing Asynchronous Code - Introduction (1:52)
Introducing Action Creators (4:11)
Action Creators & Async Code (6:20)
Handling Asynchronous Code (8:13)
Restructuring Actions (6:55)
Where to Put Data Transforming Logic? (5:42)
Using Action Creators and Get State (3:27)
Using Utility Functions (7:20)
A Leaner Switch Case Statement (3:14)
An Alternative Folder Structure (2:22)
Diving Much Deeper (2:07)
Wrap Up (1:00)
Useful Resources & Links
Redux Advanced: Burger Project
Module Introduction (1:12)
Installing the Redux Devtools (2:56)
Preparing the Folder Structure (3:06)
Creating Action Creators (6:15)
Executing Asynchronous Code (4:05)
Fetching Ingredients Asynchronously (7:50)
Initializing Ingredients in the BurgerBuilder (5:18)
Changing the Order of our Ingredients Manually (2:12)
Adding Order Actions (6:40)
Connecting Contact Data Container & Actions (4:18)
The Order Reducer (5:30)
Working on Order Actions (4:28)
Redirect to Improve UX (3:08)
Combining Reducers (4:53)
Handling Purchases & Updating the UI (8:34)
Resetting the Price after Purchases (1:44)
Fetching Orders (via Redux) (13:45)
Checking our Implemented Functionalities (1:23)
Refactoring Reducers (8:11)
Refactoring Reducers Continued (7:55)
Wrap Up (0:57)
Useful Resources & Links
Adding Authentication to our Burger Project
Module Introduction (1:14)
Understanding Authentication in Single Page Applications (3:01)
Required App Adjustments (0:53)
Adding an Auth Form (13:11)
Adding Actions (6:28)
Getting a Token from the Backend (6:59)
Adding Sign-In (5:30)
Storing the Token (9:00)
Adding a Spinner (6:03)
Logging Users Out (6:50)
Accessing Protected Resources (11:17)
Updating the UI Depending on Auth State (7:32)
Adding a Logout Link (6:52)
Forwarding Unauthenticated Users (8:18)
Redirecting the User to the Checkout Page (13:12)
Persistent Auth State with localStorage (14:36)
Fixing Connect + Routing Errors (6:58)
Ensuring App Security (2:50)
Guarding Routes (5:34)
Displaying User Specific Orders (8:16)
Wrap Up (0:43)
Useful Resources & Links
Improving our Burger Project
Module Introduction (0:39)
Fixing the Redirect to the Frontpage (5:48)
Using updateObject in the Entire App (6:45)
Sharing the Validation Method (2:16)
Using Environment Variables (2:35)
Removing console.log()s (3:47)
Adding Lazy Loading (4:58)
Wrap Up (0:50)
Useful Resources & Links
Testing
Module Introduction (1:12)
What is Testing? (3:08)
Required Testing Tools (2:26)
What To Test? (2:50)
Writing our First Test (12:34)
Testing Components Continued (4:05)
Jest and Enzyme Documentations (6:28)
Testing Components Correctly (2:28)
Testing Containers (6:50)
How to Test Redux (5:09)
Wrap Up (1:27)
Useful Resources & Links
Deploying the App to the Web
Module Introduction (0:33)
Deployment Steps (2:58)
Building the Project (2:20)
Example: Deploying on Firebase (4:06)
Wrap Up (0:42)
Useful Resources & Links
Bonus: Working with Webpack
Module Introduction (1:24)
Introducing Webpack (1:14)
How Webpack works (2:39)
Basic Workflow Requirements (1:35)
Project & npm Setup (3:47)
Creating a Basic Folder & File Structure (3:12)
Creating the Basic React Application (10:55)
Installing Production Dependencies (1:10)
Setting Up the Basic Webpack Config (6:41)
Adding File Rules & Babel (7:07)
Loading CSS Files (5:01)
Loading Images & Injecting into HTML Page (5:36)
Production Workflow & Wrap Up (2:43)
Adding babel-polyfill
Useful Resources & Links
Bonus: A Brief Introduction to Redux Saga
Module Introduction (1:29)
Installing Redux Saga (2:40)
Creating our First Saga (6:06)
Hooking the Saga Up (to the Store and Actions) (4:42)
Moving Logic from the Action Creator to a Saga (5:57)
Moving More Logic Into Sagas (10:02)
Handling Authentication with a Saga (11:07)
Handling Auto-Sign-In with a Saga (5:52)
Moving the BurgerBuilder Side Effects into a Saga (7:01)
Moving the Orders Side Effects into Sagas (12:34)
Why Sagas can be Helpful (1:17)
Diving Deeper into Sagas (6:55)
Useful Resources & Links
React Hooks
Introduction (0:40)
What are "React Hooks"? (7:08)
The Starting Project (4:57)
Getting Started with useState() (9:20)
More on useState() & State Updating (11:54)
Array Destructuring (2:34)
Multiple States (3:47)
Rules of Hooks (2:20)
Passing State Data Across Components (7:56)
Assignment: Hooks Basics (Problem) (1:03)
Assignment: Hooks Basics (Solution) (2:55)
Sending Http Requests (7:16)
useEffect() & Loading Data (8:06)
Understanding useEffect() Dependencies (2:21)
More on useEffect() (9:37)
What's useCallback()? (5:28)
Working with Refs & useRef() (5:21)
Cleaning Up with useEffect() (3:20)
Deleting Ingredients (2:28)
Loading Errors & State Batching (8:48)
Understanding useReducer() (9:43)
Using useReducer() for the Http State (10:40)
Working with useContext() (8:27)
Performance Optimizations with useMemo() (10:30)
Getting Started with Custom Hooks (13:45)
Sharing Data Between Custom Hooks & Components (14:58)
Using the Custom Hook (8:11)
Wrap Up (3:05)
Useful Resources & Links
Using Hooks in the Burger Builder
Introduction (1:08)
Converting the "App" Component (3:28)
Routing with React.lazy() (3:35)
Converting the Layout Component (2:39)
Converting withErrorHandler HOC (5:26)
Adjusting the Order & Checkout Containers (4:28)
Add Hooks to ContactData (5:38)
Converting the BurgerBuilder Container (4:25)
Adjusting Auth & Logout Components (6:01)
Using React.memo() & More! (4:30)
Adding a Custom Error Handling Hook (5:40)
Setting the right useEffect() Dependencies (4:58)
Working with useSelector() and useDispatch() (11:33)
Wrap Up (1:03)
Useful Resources & Links
Bonus: Replacing Redux with React Hooks
Module Introduction (0:48)
Starting Project & Why You Would Replace Redux (4:19)
Alternative: Using the Context API (7:13)
Toggling Favorites with the Context API (5:43)
Context API Summary (and why NOT to use it instead of Redux) (2:30)
Getting Started with a Custom Hook as a Store (8:11)
Finishing the Store Hook (5:53)
Creating a Concrete Store (4:11)
Using the Custom Store (5:40)
Custom Hook Store Summary (3:13)
Optimizing the Custom Hook Store (4:04)
Bonus: Managing Multiple State Slices with the Custom Store Hook
Wrap Up (2:00)
Useful Resources & Links
Bonus: Next.js
Module Introduction (1:12)
Understanding Server Side Rendering (3:18)
Setting Up a Project (6:02)
Understanding the Basics (3:53)
Next.js & Components & Pages (2:48)
Styling our App in Next.js (2:47)
Handling (404) Errors (2:01)
A Special Lifecycle Hook (9:33)
Deploying our App (2:59)
Useful Resources & Links
Bonus: Animations in React Apps
Module Introduction (1:07)
Preparing the Demo Project (6:12)
Using CSS Transitions (4:34)
Using CSS Animations (5:32)
CSS Transition & Animations Limitations (4:04)
Using ReactTransitionGroup (12:19)
Using the Transition Component (3:24)
Wrapping the Transition Component (3:16)
Animation Timings (3:14)
Transition Events (2:33)
The CSSTransition Component (5:23)
Customizing CSS Classnames (2:30)
Animating Lists (6:53)
Alternative Animation Packages (4:28)
Wrap Up (1:57)
Useful Resources & Links
Bonus: Building the Burger CSS
Building the Burger CSS Code (24:55)
Next Steps and Course Roundup
Module Introduction (1:00)
React Rocks! Where to find more Examples (1:24)
More Inspiration: Real-World Projects Built with React (1:23)
Static React Apps with Gatsby.js (2:31)
Introducing React Native (2:17)
Component Libraries (Example: Material UI) (2:36)
Smaller Apps with Preact (3:08)
Comparing React with Preact (5:50)
Congratulations (1:16)
Transition Events
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock