Ends:

00

days

00

hours

00

mins

00

secs

Mastering React

Become an expert at building apps using React.

Recommended by Teachable

You can pay for this course in 4 installments.
Click here to pay $247 for 4 months.

$

29

FREE

$

23

$

29

  • 12 hours of easy-to-understand, “no-fluff” HD videos and activities – breaks down React into easy-to-learn chunks
  • Coding exercises
  • Full lifetime access
  • Certificate of completion
  • Access on mobile and tablet friendly
Teachable Best Price Guarantee™

If you find it cheaper anywhere else, we'll refund you the difference.

Price:

$

29

FREE

$

23

Teachable Best Price Guarantee™

If you find it cheaper anywhere else, we'll refund you the difference.

Your Outcome

You will become an expert at building apps using React. You'll even learn to build a real video rental app.

Fast-track route to build and deploy fast, interactive apps

Let’s face it – all the cool kids are using React…

What else do you expect from a JavaScript library that was developed by Facebook?

But seriously, if you don’t know how to build apps with React - then you’re falling behind the curve. It has quickly become the most popular JavaScript library since its release in 2011.

Both new and seasoned developers are using it to build app front-ends that are fast, dynamic and stand out. If you want to see what React apps are like, just think of the big popular sites like Facebook, Instagram, Netflix, Yahoo, the list goes on…

Your ticket to higher earnings

Fact: employers and clients love to see React experience on your CV.

You’re pretty much guaranteed to expand your career options and make some extra money in the process.

Just consider this...

The average annual salary for a JavaScript developer is $72,500

The average annual salary for a React.js developer is $77,800 (source: www.payscale.com)

That means you can secure an extra $5k per year, just for taking the time to complete this course, at a cost of only $29. Amazing value, huh?

No more wasting time…

Don’t waste time on courses that:

  • are out-of-date with poor guidance and bad advice
  • don’t progress logically from the basics to mastery
  • you have to continually watch again and again due to poor presentation
  • are boring, bland and repetitive
  • don’t offer value for money and won’t help your career.

Instead… Try 'Mastering React' - the course for ambitious developers

I’ve designed Mastering React to cover absolutely every detail you could possibly need to take you from beginner React app builder to expert level.

I share tips from several years’ experience using React, including the do’s and don’ts, best practices, common mistakes and practical shortcuts that every professional React developer needs to know.

Why you should take this course

  • You’ll develop new and valuable skills to take your app development career to new heights
  • Flexible learning – at your own pace, on any device
  • 12 hours of easy-to-understand, “no-fluff” HD videos and activities – breaks down React into easy-to-learn chunks
  • Practical exercises that can be applied straight away
  • Tips and tricks to make you a React wizard and increase your employability
  • Course completion certificate to present to your employer or clients
  • No-questions-asked 30-day money back guarantee

You'll learn to how to build a real video rental app.

no more boring tutorials and courses that teach you how to make to-do apps!

Master React

With the Master React course, you’ll hit the ground running. You’ll build your first React app within minutes of starting! And it doesn’t stop there – each module is carefully designed to cut the B.S. focussing only on the skills and knowledge you need to make professional quality apps.


  • Modern JavaScript
  • Components
  • Tables and lists
  • Pagination, sorting and searching
  • Forms with validation
  • Routing and navigation
  • Calling HTTP services
  • Authentication and authorization
  • Handling and logging errors
  • Deployment

12

HOURS

200+

LESSONS

Bite-sized, memorable and easy-to-digest videos with zero fluff.

Build professional-quality apps with complete confidence by the end of this course.

Master more than just React…

Most courses just teach you React and nothing else. This course is different.

You’ll master:

  • how to think like a software engineer – benefit from Mosh’s 18 years’ experience in the industry
  • professional-level programming techniques
  • how to distinguish between ‘good’ and ‘bad’ code – and how to refactor it
  • shortcuts and tips to write code super-fast

What Students Say

"Completed the Mastering React course by @moshhamedani and can fully recommend it. Covers pretty much everything you need to know when starting out with react."

Alan Tucker

"Thanks @moshhamedani for you online courses! Learning #JavaScript and #ReactJs was never that easy!"

Karen ZH

"Thanks Mosh for such an amazing ReactJS course. One of the best teachers that I ever found. I have really learned a lot, this is my 9th course with @moshhamedani and not the last."

Cristhians

Course Curriculum

Getting Started (00:28)

  • 1- What is React (4:32)
  • 2- Setting Up the Development Environment (3:37)
  • 3- Your First React App (6:33)
  • 4- Hello World (5:25)
  • 5- Custom Configs (3:11)
  • 6- Full-stack Architecture (2:44)
  • 7- Course Structure (2:24)
  • Redux?

ES6 Refresher (00:48)

  • 1 - Introduction (1:43)
  • 2- Let vs Var vs Const (3:52)
  • 3- Objects (2:45)
  • 4- The this Keyword (2:49)
  • 5- Binding this (2:36)
  • 6- Arrow Functions (4:15)
  • 7- Arrow Functions and this (4:14)
  • 8- Array.map Method (3:36)
  • 9- Object Destructuring (2:29)
  • 10- Spread Operator (4:02)
  • 11- Classes (3:45)
  • 12- Inheritance (4:03)
  • 13- Modules (4:11)
  • 14- Named and Default Exports (5:15)

Components (01:17)

  • 1- Introduction (1:38)
  • 2- Setting Up the Project (2:06)
  • 3- Your First React Component (5:20)
  • 4- Specifying Children (4:16)
  • 5- Embedding Expressions (4:50)
  • 6- Setting Attributes (5:45)
  • 7- Rendering Classes Dynamically (4:18)
  • 8 - Rendering Lists (3:58)
  • 9- Conditional Rendering (6:04)
  • 10- Handling Events (2:49)
  • 11- Binding Event Handlers (4:36)
  • 12- Updating the State (2:14)
  • 13- What Happens When State Changes (2:04)
  • 14- Passing Event Arguments (3:04)
  • 15- Setting Up the Vidly Project (5:38)
  • 16- Exercises (3:25)
  • 17- Building the Movies Component (7:18)
  • 18- Deleting a Movie (5:18)
  • 19- Conditional Rendering (3:26)
  • 20 - Summary (0:36)

Composing Components (01:19)

  • 1- Introduction (0:45)
  • 2- Composing Components (3:45)
  • 3- Passing Data to Components (3:11)
  • 4- Passing Children (3:10)
  • 5 - Debugging React Apps (4:09)
  • 6- Props vs State (2:24)
  • 7 - Raising and Handling Events (4:52)
  • 8- Updating the State (4:38)
  • 9- Single Source of Truth (3:55)
  • 10- Removing the Local State (6:47)
  • 11- Multiple Components in Sync (5:53)
  • 12- Lifting the State Up (5:36)
  • 13 - Stateless Functional Components (2:29)
  • 14- Destructuring Arguments (2:00)
  • 15 - Lifecycle Hooks (1:38)
  • 16 - Mounting Phase (5:34)
  • 17- Updating Phase (4:20)
  • 18- Unmounting Phase (1:26)
  • 19- Exercise- Decrement Button (1:05)
  • 20- Solution - Decrement Button (4:53)
  • 21- Exercise- Like Component (1:44)
  • 22- Solution- Like Component (12:26)
  • 23- Summary (0:42)

Pagination, Filtering, and Sorting (01:47)

  • 1- Introduction (1:08)
  • 2- Exercise- Pagination Component (1:01)
  • 3- Pagination- Component Interface (3:47)
  • 4- Pagination- Displaying Pages (6:48)
  • 5- Pagination- Handling Page Changes (5:49)
  • 6- Pagination- Paginating Data (6:14)
  • 7- Pagination- Type Checking with PropTypes (4:56)
  • 8- Exercise- ListGroup Component (1:24)
  • 9- Filtering- Component Interface (5:32)
  • 10- Filtering- Displaying Items (3:57)
  • 11- Filtering- Default Props (2:06)
  • 12- Filtering- Handling Selection (4:20)
  • 13- Filtering- Implementing Filtering (2:59)
  • 14- Filtering- Adding All Genres (3:39)
  • 15- Sorting- Extracting MoviesTable (5:19)
  • 16- Sorting- Raising the Sort Event (3:28)
  • 17- Sorting- Implementing Sorting (5:13)
  • 18- Sorting- Moving Responsibility (5:15)
  • 19- Sorting- Extracting TableHeader (7:44)
  • 20- Sorting- Extracting TableBody (3:12)
  • 21- Sorting- Rendering Cell Content (8:02)
  • 22- Sorting- Unique Keys - Final (2:58)
  • 23- Sorting- Adding the Sort Icon (3:57)
  • 24- Sorting- Extracting Table (3:51)
  • 25- Sorting- Extracting a Method (3:18)
  • 26- Destructuring Arguments (0:58)
  • 27- Summary (0:51)
  • A Quick Note

Routing (00:53)

  • 1- Introduction (0:33)
  • 2- Setup (1:46)
  • 3- Adding Routing (4:15)
  • 4- Switch (2:26)
  • 5- Link (4:20)
  • 6- Route Props (2:10)
  • 7- Passing Props (2:35)
  • 8- Route Parameters (3:32)
  • 9- Optional Parameters (2:06)
  • 10- Query String Parameters (3:51)
  • 11- Redirects (3:06)
  • 12- Programmatic Navigation (2:20)
  • 13- Nested Routing (4:35)
  • 14- Exercises- NavBar and Routing (1:43)
  • 15- Adding React Router (1:26)
  • 16- Adding Routes (4:57)
  • 17- Adding the NavBar (4:39)
  • 18- Linking to the MovieForm (4:42)
  • 19 - Summary (0:31)

Forms (01:34)

  • 1- Introduction (0:38)
  • 2- Building a Bootstrap Form (5:34)
  • 3- Handling Form Submission (2:00)
  • 4- Refs (3:58)
  • 5- Controlled Elements (4:32)
  • 6- Handling Multiple Inputs (2:49)
  • 7- Common Errors (2:28)
  • 8- Extracting a Reusable Input (3:57)
  • 9- Validation (2:56)
  • 10- A Basic Validation Implementation (3:11)
  • 11- Displaying Validation Errors (3:42)
  • 12- Validation on Change (4:19)
  • 13- Joi (4:33)
  • 14- Validating a Form Using Joi (4:43)
  • 15- Validating a Field Using Joi (5:22)
  • 16- Disabling the Submit Button (1:11)
  • 17- Code Review (3:13)
  • 18- Extracting a Reusable Form (4:51)
  • 19- Extracting Helper Rendering Methods (8:18)
  • 20- Register Form (1:42)
  • 21- Code Review (1:10)
  • 22- Exercise 2- Movie Form (3:18)
  • 23- Code Review (8:24)
  • 24- Exercise 3- Search Movies (1:22)
  • 25- Code Review (5:12)

Calling Backend Services (01:42)

  • 1- Introduction (1:13)
  • 2- JSON Placeholder (2:54)
  • 3- Http Clients (2:56)
  • 4- Getting Data (5:26)
  • 5- Creating Data (4:52)
  • 6- Lifecycle of a Request (2:50)
  • 7- Updating Data (4:14)
  • 8- Deleting Data (1:35)
  • 9- Optimistic vs Pessimistic Updates (4:24)
  • 10- Expected vs Unexpected Errors (6:40)
  • 11- Handling Unexpected Errors Globally (7:54)
  • 12- Extracting a Reusable Http Service (3:43)
  • 13- Extracting a Config Module (1:36)
  • 14- Displaying Toast Notifications (2:56)
  • 15- Logging Errors (5:47)
  • 16- Extracting a Logger Service (4:25)
  • 17- Vidly Backend (1:50)
  • 18- Installing MongoDB on Mac (3:58)
  • 19- Installing MongoDB on Windows (5:39)
  • 20- Setting Up the Node Backend (2:44)
  • 21- Disabling Authentication (4:01)
  • 22- Exercise- Connect Movies Page to the Backend (1:56)
  • 23- Adding Http and Log Services (2:38)
  • 24- Replacing FakeGenreService (3:23)
  • 25- Replacing FakeMovieService (5:48)
  • 26- Extracting a Config File (1:54)
  • 27- Exercise- Connect Movie Form to the Backend (0:56)
  • 28- Populating the Form (3:45)
  • 29- Refactoring (2:30)
  • 30- Saving the Movie (2:40)
  • 31- Refactoring (2:36)

Authentication and Authorization (01:41)

  • 1 - Introduction (0:49)
  • 2- Registering a New User (2:37)
  • 3- Submitting the Registration Form (4:30)
  • 4- Handling Registration Errors (1:58)
  • 5- Logging in a User (1:43)
  • 6- Submitting the Login Form (2:23)
  • 7- Handling Login Errors (1:51)
  • 8- Storing the JWT (3:04)
  • 9- Logging in the User upon Registration (5:37)
  • 10- JSON Web Tokens (JWT) (3:59)
  • 11- Getting the Current User (4:18)
  • 12- Displaying the Current User on NavBar (4:48)
  • 13- Logging out a User (2:44)
  • 14- Refactoring (10:03)
  • 15- Calling Protected API Endpoints (4:10)
  • 16- Fixing Bi-directional Dependencies (2:43)
  • 17- Authorization (6:30)
  • 18- Showing or Hiding Elements based on the User (2:40)
  • 19- Protecting Routes (2:50)
  • 20- Extracting ProtectedRoute (5:55)
  • 21- Redirecting after Login (5:40)
  • 22- Exercise (0:19)
  • 23- Hiding the Delete Column (4:19)

Deployment (00:35)

  • 1- Introduction (0:38)
  • 2- Environment Variables (4:58)
  • 3- Production Builds (2:48)
  • 4- Getting Started with Heroku (2:06)
  • 5- MongoDB in the Cloud (2:35)
  • 6- Adding Code to a Git Repository (3:05)
  • 7- Deploying to Heroku (3:01)
  • 8- Viewing Logs (2:40)
  • 9- Setting Environment Variables on Heroku (4:37)
  • 10- Preparing the Font-end for Deployment (4:09)
  • 11- Deploying the Front-end (2:38)
  • 12- A Story (2:36)
  • 13- Wrap Up
  • 14- What to Learn Next

Your Instructor

Mosh Hamedani

Hi! My name is Mosh Hamedani. I'm a software engineer with almost two decades of experience and I've taught over three million people how to code or how to become a professional software engineer through my online courses and YouTube channel.

I believe coding should be fun and accessible to everyone.

Frequently asked questions

When does the course start and finish?

The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.

How long do I have access to the course?

How does lifetime access sound? After enrolling, you have unlimited access to this course for as long as you like - across any and all devices you own.

What if I am unhappy with the course?

We would never want you to be unhappy! If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.

30 Day Money Back Guarantee

It's completely risk free to buy a course on Discover.

Try any course on Teachable Discover and if after 30 days, you were not impressed, you can request a full and complete refund.