Mosh Hamedani – Mastering React

What You’l Learn…

Unlike other courses teaching you how to build to-do apps, I’m going to show you how to build a real video rental app. You’ll master all the essential skills you need to build professional quality apps.

• Modern JavaScript features
• Build reusable components
• Build tables and lists with pagination, sorting and searching
• Build forms with validation
• Implement routing with React Router
• Call HTTP services with Axios
• Implement authentication and authorization
• Handle and log errors effectively
• All about Function Components and Hooks
• Share data using React Context
• Deploy your React apps to Heroku
• Write clean, maintainable code like a pro
• Shortcuts to write more code in less time

And much, much more!

Who is this course for?

React is the most popular front-end library in the world. That’s why employers and clients are looking for developers who know React well. Very well! So, having React on your resume helps you find more jobs and make more money. This course is for:

• Anyone wanting to learn front-end development with React
• Front-end developers familiar with other libraries and frameworks such as Angular or Vue who want to add React to their toolbox
• Back-end developers who want to transition to full-stack development

Course Curriculum

Getting Started (00:28)
Start1- What is React (4:32)
Start2- Setting Up the Development Environment (3:37)
Start3- Your First React App (6:33)
Start4- Hello World (5:25)
Start5- Custom Configs (3:11)
Start6- Full-stack Architecture (2:44)
Start7- Course Structure (2:24)
StartRedux?
ES6 Refresher (00:48)
Start1 – Introduction (1:43)
Start2- Let vs Var vs Const (3:52)
Start3- Objects (2:45)
Start4- The this Keyword (2:49)
Start5- Binding this (2:36)
Start6- Arrow Functions (4:15)
Start7- Arrow Functions and this (4:14)
Start8- Array.map Method (3:36)
Start9- Object Destructuring (2:29)
Start10- Spread Operator (4:02)
Start11- Classes (3:45)
Start12- Inheritance (4:03)
Start13- Modules (4:11)
Start14- Named and Default Exports (5:15)
Components (01:17)
Start1- Introduction (1:38)
Start2- Setting Up the Project (2:06)
Start3- Your First React Component (5:20)
Start4- Specifying Children (4:16)
Start5- Embedding Expressions (4:50)
Start6- Setting Attributes (5:45)
Start7- Rendering Classes Dynamically (4:18)
Start8 – Rendering Lists (3:58)
Start9- Conditional Rendering (6:04)
Start10- Handling Events (2:49)
Start11- Binding Event Handlers (4:36)
Start12- Updating the State (2:14)
Start13- What Happens When State Changes (2:04)
Start14- Passing Event Arguments (3:04)
Start15- Setting Up the Vidly Project (5:38)
Start16- Exercises (3:25)
Start17- Building the Movies Component (7:18)
Start18- Deleting a Movie (5:18)
Start19- Conditional Rendering (3:26)
Start20 – Summary (0:36)
Composing Components (01:19)
Start1- Introduction (0:45)
Start2- Composing Components (3:45)
Start3- Passing Data to Components (3:11)
Start4- Passing Children (3:10)
Start5 – Debugging React Apps (4:09)
Start6- Props vs State (2:24)
Start7 – Raising and Handling Events (4:52)
Start8- Updating the State (4:38)
Start9- Single Source of Truth (3:55)
Start10- Removing the Local State (6:47)
Start11- Multiple Components in Sync (5:53)
Start12- Lifting the State Up (5:36)
Start13 – Stateless Functional Components (2:29)
Start14- Destructuring Arguments (2:00)
Start15 – Lifecycle Hooks (1:38)
Start16 – Mounting Phase (5:34)
Start17- Updating Phase (4:20)
Start18- Unmounting Phase (1:26)
Start19- Exercise- Decrement Button (1:05)
Start20- Solution – Decrement Button (4:53)
Start21- Exercise- Like Component (1:44)
Start22- Solution- Like Component (12:26)
Start23- Summary (0:42)
Pagination, Filtering, and Sorting (01:47)
Start1- Introduction (1:08)
Start2- Exercise- Pagination Component (1:01)
Start3- Pagination- Component Interface (3:47)
Start4- Pagination- Displaying Pages (6:48)
Start5- Pagination- Handling Page Changes (5:49)
Start6- Pagination- Paginating Data (6:14)
Start7- Pagination- Type Checking with PropTypes (4:56)
Start8- Exercise- ListGroup Component (1:24)
Start9- Filtering- Component Interface (5:32)
Start10- Filtering- Displaying Items (3:57)
Start11- Filtering- Default Props (2:06)
Start12- Filtering- Handling Selection (4:20)
Start13- Filtering- Implementing Filtering (2:59)
Start14- Filtering- Adding All Genres (3:39)
Start15- Sorting- Extracting MoviesTable (5:19)
Start16- Sorting- Raising the Sort Event (3:28)
Start17- Sorting- Implementing Sorting (5:13)
Start18- Sorting- Moving Responsibility (5:15)
Start19- Sorting- Extracting TableHeader (7:44)
Start20- Sorting- Extracting TableBody (3:12)
Start21- Sorting- Rendering Cell Content (8:02)
Start22- Sorting- Unique Keys – Final (2:58)
Start23- Sorting- Adding the Sort Icon (3:57)
Start24- Sorting- Extracting Table (3:51)
Start25- Sorting- Extracting a Method (3:18)
Start26- Destructuring Arguments (0:58)
Start27- Summary (0:51)
StartA Quick Note
Routing (00:53)
Start1- Introduction (0:33)
Start2- Setup (1:46)
Start3- Adding Routing (4:15)
Start4- Switch (2:26)
Start5- Link (4:20)
Start6- Route Props (2:10)
Start7- Passing Props (2:35)
Start8- Route Parameters (3:32)
Start9- Optional Parameters (2:06)
Start10- Query String Parameters (3:51)
Start11- Redirects (3:06)
Start12- Programmatic Navigation (2:20)
Start13- Nested Routing (4:35)
Start14- Exercises- NavBar and Routing (1:43)
Start15- Adding React Router (1:26)
Start16- Adding Routes (4:57)
Start17- Adding the NavBar (4:39)
Start18- Linking to the MovieForm (4:42)
Start19 – Summary (0:31)
Forms (01:34)
Start1- Introduction (0:38)
Start2- Building a Bootstrap Form (5:34)
Start3- Handling Form Submission (2:00)
Start4- Refs (3:58)
Start5- Controlled Elements (4:32)
Start6- Handling Multiple Inputs (2:49)
Start7- Common Errors (2:28)
Start8- Extracting a Reusable Input (3:57)
Start9- Validation (2:56)
Start10- A Basic Validation Implementation (3:11)
Start11- Displaying Validation Errors (3:42)
Start12- Validation on Change (4:19)
Start13- Joi (4:33)
Start14- Validating a Form Using Joi (4:43)
Start15- Validating a Field Using Joi (5:22)
Start16- Disabling the Submit Button (1:11)
Start17- Code Review (3:13)
Start18- Extracting a Reusable Form (4:51)
Start19- Extracting Helper Rendering Methods (8:18)
Start20- Register Form (1:42)
Start21- Code Review (1:10)
Start22- Exercise 2- Movie Form (3:18)
Start23- Code Review (8:24)
Start24- Exercise 3- Search Movies (1:22)
Start25- Code Review (5:12)
Calling Backend Services (01:42)
Start1- Introduction (1:13)
Start2- JSON Placeholder (2:54)
Start3- Http Clients (2:56)
Start4- Getting Data (5:26)
Start5- Creating Data (4:52)
Start6- Lifecycle of a Request (2:50)
Start7- Updating Data (4:14)
Start8- Deleting Data (1:35)
Start9- Optimistic vs Pessimistic Updates (4:24)
Start10- Expected vs Unexpected Errors (6:40)
Start11- Handling Unexpected Errors Globally (7:54)
Start12- Extracting a Reusable Http Service (3:43)
Start13- Extracting a Config Module (1:36)
Start14- Displaying Toast Notifications (2:56)
Start15- Logging Errors (5:47)
Start16- Extracting a Logger Service (4:25)
Start17- Vidly Backend (1:50)
Start18- Installing MongoDB on Mac (3:58)
Start19- Installing MongoDB on Windows (5:39)
Start20- Setting Up the Node Backend (2:44)
Start21- Disabling Authentication (4:01)
Start22- Exercise- Connect Movies Page to the Backend (1:56)
Start23- Adding Http and Log Services (2:38)
Start24- Replacing FakeGenreService (3:23)
Start25- Replacing FakeMovieService (5:48)
Start26- Extracting a Config File (1:54)
Start27- Exercise- Connect Movie Form to the Backend (0:56)
Start28- Populating the Form (3:45)
Start29- Refactoring (2:30)
Start30- Saving the Movie (2:40)
Start31- Refactoring (2:36)
Authentication and Authorization (01:41)
Start1 – Introduction (0:49)
Start2- Registering a New User (2:37)
Start3- Submitting the Registration Form (4:30)
Start4- Handling Registration Errors (1:58)
Start5- Logging in a User (1:43)
Start6- Submitting the Login Form (2:23)
Start7- Handling Login Errors (1:51)
Start8- Storing the JWT (3:04)
Start9- Logging in the User upon Registration (5:37)
Start10- JSON Web Tokens (JWT) (3:59)
Start11- Getting the Current User (4:18)
Start12- Displaying the Current User on NavBar (4:48)
Start13- Logging out a User (2:44)
Start14- Refactoring (10:03)
Start15- Calling Protected API Endpoints (4:10)
Start16- Fixing Bi-directional Dependencies (2:43)
Start17- Authorization (6:30)
Start18- Showing or Hiding Elements based on the User (2:40)
Start19- Protecting Routes (2:50)
Start20- Extracting ProtectedRoute (5:55)
Start21- Redirecting after Login (5:40)
Start22- Exercise (0:19)
Start23- Hiding the Delete Column (4:19)
Deployment (00:35)
Start1- Introduction (0:38)
Start2- Environment Variables (4:58)
Start3- Production Builds (2:48)
Start4- Getting Started with Heroku (2:06)
Start5- MongoDB in the Cloud (2:35)
Start6- Adding Code to a Git Repository (3:05)
Start7- Deploying to Heroku (3:01)
Start8- Viewing Logs (2:40)
Start9- Setting Environment Variables on Heroku (4:37)
Start10- Preparing the Font-end for Deployment (4:09)
Start11- Deploying the Front-end (2:38)
Advanced Topics (01:04)
Start1- Introduction (0:31)
Start2- Source Code
Start3- Setting Up the Development Environment (3:13)
Start4- Higher Order Components (2:04)
Start5- Implementing a Higher Order Component (8:35)
Start6- Hooks (3:06)
Start7- The useState Hook (8:30)
Start8- The useEffect Hook (5:46)
Start9- Custom Hooks (3:04)
Start10- Fetching Data with Hooks (4:37)
Start11- Context (2:10)
Start12- Context in Class Components (9:46)
Start13- Context in Functional Components (3:33)
Start14- Updating the Context (7:06)
Start15- Consuming Multiple Contexts (2:24)
Start16- Thank You!
Start17- What to Learn Next