React Icon Get 73% off the React Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

Introduction to React

1 lesson

  • Play Icon The Missing Introduction to React

    06:52

Rendering view in React

10 lessons

  • Play Icon Rendering view with HTML

    01:57

  • Play Icon Bootstrapping React in HTML

    02:07

  • Play Icon Render an element with React.createElement

    03:30

  • Play Icon Rendering nested elements with React.createElement

    04:34

  • Play Icon What is JSX?

    03:34

  • Play Icon Creating view with JSX

    04:49

  • Play Icon The relation between HTML and JSX

    04:15

  • Play Icon Accessibility and ARIA in JSX

    02:38

  • Play Icon Interpolating values in JSX

    03:58

  • Play Icon Using expressions in JSX

    06:23

Introduction to Components

11 lessons

  • Play Icon Introduction to Components

    05:52

  • Play Icon Pure functions

    03:12

  • Play Icon Components as functions returning view

    04:11

  • Play Icon Passing props to Components

    05:15

  • Play Icon The children prop

    06:43

  • Play Icon Setting up a dev environment with create-react-app

    11:07

  • Play Icon Isolating Components as exports and imports

    04:26

  • Play Icon Adding an event handler to an element

    07:12

  • Play Icon Adding state with the useState hook

    07:31

  • Play Icon One-way Data Flow in Components

    07:43

  • Play Icon Building re-usable Components

    09:43

The React virtual DOM vs the browser DOM

2 lessons

  • Play Icon Introduction to the React reconciler

    06:12

  • Play Icon Introduction to the React Dev Tools

    08:32

A deeper dive into Components

14 lessons

  • Play Icon Conditional rendering with an if statement

    12:02

  • Play Icon Conditional rendering with the ternary operator

    01:27

  • Play Icon Conditional rendering with the boolean AND operator

    03:59

  • Play Icon Interpolating Arrays in JSX

    03:14

  • Play Icon Exploring Array.map

    04:04

  • Play Icon Using Array.map to render an Array

    02:56

  • Play Icon Understanding the key prop

    12:11

  • Play Icon Filtering collections client side with Array.filter

    08:20

  • Play Icon Mapping an Object to view

    04:07

  • Play Icon Handling basic side effects

    13:40

  • Play Icon Understanding shallow dependency checks

    05:29

  • Play Icon Using the empty dependency Array in useEffects

    07:31

  • Play Icon Cleaning up after side effects

    11:05

  • Play Icon JavaScript closures and the useEffect hook

    17:11

Forms in React

10 lessons

  • Play Icon Creating controlled Components

    10:29

  • Play Icon Binding multiple form controls to Component State

    08:54

  • Play Icon Submitting form data

    05:51

  • Play Icon Updating form State from code

    03:31

  • Play Icon Using a textarea

    03:56

  • Play Icon Using a select

    04:55

  • Play Icon Using a checkbox

    04:35

  • Play Icon Grouping checkboxes together

    06:52

  • Play Icon Using radio buttons

    08:17

  • Play Icon Loading data into a form

    09:48

Thinking in Components

5 lessons

  • Play Icon From design to rough Component outline

    04:09

  • Play Icon Building a static React view from the design

    21:27

  • Play Icon From static view to statefull app

    15:48

  • Play Icon Making sure the app is accessible

    06:55

  • Play Icon Identifying re-usable code

    15:48

HTTP Requests

7 lessons

  • Play Icon Understanding HTTP requests

    04:47

  • Play Icon Create a basic HTTP server in Node Express

    05:48

  • Play Icon Fetching data from the server

    15:00

  • Play Icon Sending data to the server

    09:44

  • Play Icon Avoiding State changes on unmounted Components

    04:51

  • Play Icon Using async/await

    03:36

  • Play Icon Setting custom HTTP headers

    03:21

Routing

5 lessons

  • Play Icon Adding React Router to your application

    11:29

  • Play Icon Navigating with the router’s Link Component

    06:36

  • Play Icon Understanding route parameters

    13:53

  • Play Icon Updating the browser title

    09:49

  • Play Icon Making routing accessible

    09:29

Application Build

19 lessons

  • Play Icon Introduction to the application

    07:49

  • Play Icon Adding a header and footer

    08:06

  • Play Icon Displaying the menu

    20:20

  • Play Icon Displaying the ice cream images

    10:29

  • Play Icon Adding a loading message

    25:37

  • Play Icon Routing to an edit component

    19:50

  • Play Icon Creating the main navigation

    03:49

  • Play Icon Fetching the menu item in the edit component

    18:45

  • Play Icon Editing the data in a form

    37:53

  • Play Icon Routing accessibility

    31:29

  • Play Icon Adding a skip navigation link

    07:59

  • Play Icon Building a validation system

    14:19

  • Play Icon Displaying validation messages

    10:25

  • Play Icon Accessible validation

    21:09

  • Play Icon Deleting a menu item

    07:04

  • Play Icon Fetching the stock ice cream list

    09:53

  • Play Icon Displaying the stock list

    18:37

  • Play Icon Extracting the edit form

    23:36

  • Play Icon Creating the add page

    18:59

Get the complete bundle...

Everything you need to start mastering React today

Terminal Icon Job-ready training

Nail that interview with your new skills that will set you apart.

Trophy Icon All the best practices

Best practices, design patterns, performance and architecture.

Rocket Logo Stream or download

Learn at home at your own pace, download for offline viewing.

Google Developer Expert Logo Expert knowledge

Built by Google Developer Experts, there's no better place to learn web.

Stackblitz Logo StackBlitz examples

Access full course source code and experiment in the browser too!

Slack Logo Slack community

Exclusive access to our members-only community (6,500+ members).

MasterCard Icon PayPal Icon VISA Icon Amex Icon

Secure SSL encrypted payments

Moneyback Icon

30-day money back guarantee

These courses are empowering thousands with expert knowledge - they will you too. If you're disappointed for whatever reason, you'll get a full refund.

Discount Icon

Location + Student discounts

Not-so-good exchange rate (i.e. India/Brazil)? Are you a student? Contact us for a coupon with your location or student details.

🎉 Get the complete bundle and save $658!

Sold separately = $907 💰

  • React Icon

    React Basics

    85 lessons
  • React Icon

    React Styling

    9 lessons
  • React Icon

    React State Management

    23 lessons
  • React-router Icon

    React Router v6

    Almost ready
  • React Icon

    React Masterclass

    Almost ready
  • React Icon

    React Universal

    Almost ready
React Icon