Angular icon Get $100 off the 7-Courses Angular Master Bundle!

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

days
hours
mins
secs

React icon React Basics
New

Star rating Star rating Star rating Star rating Star rating

4.7/5 (421 ratings)

Take a dive into the React world, complete with the brand new Hooks API. Learn how to “think” in components, dataflow and master JSX to build React applications the modern way.

React

React

Compatible with v16.x

Course duration icon

Duration

65 lessons 8 hours

What you'll learn

Starting from the beginning you’ll learn all the main concepts of React, the best practices and comprehensive chapters will allow you to deep dive. Then, put your new knowledge together by building a real-world React application.

Requirements

  • HTML/CSS experience
  • JavaScript basic knowledge
  • HTTP (Ajax) experience
  • Understanding of DOM APIs

Here’s what’s covered...

Introduction to React

1 lesson

  • The Missing Introduction to React

    06:52

Rendering view in React

10 lessons

  • Rendering view with HTML

    01:57

  • Bootstrapping React in HTML

    02:07

  • Render an element with React.createElement

    03:30

  • Rendering nested elements with React.createElement

    04:34

  • What is JSX?

    03:34

  • Creating view with JSX

    04:49

  • The relation between HTML and JSX

    04:15

  • Accessibility and ARIA in JSX

    02:38

  • Interpolating values in JSX

    03:58

  • Using expressions in JSX

    06:23

Introduction to Components

11 lessons

  • Introduction to Components

    05:52

  • Pure functions

    03:12

  • Components as functions returning view

    04:11

  • Passing props to Components

    05:15

  • The children prop

    06:43

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

    11:07

  • Isolating Components as exports and imports

    04:26

  • Adding an event handler to an element

    07:12

  • Adding state with the useState hook

    07:31

  • One-way Data Flow in Components

    07:43

  • Building re-usable Components

    09:43

The React virtual DOM vs the browser DOM

2 lessons

  • Introduction to the React reconciler

    06:12

  • Introduction to the React Dev Tools

    08:32

A deeper dive into Components

14 lessons

  • Conditional rendering with an if statement

    12:02

  • Conditional rendering with the ternary operator

    01:27

  • Conditional rendering with the boolean AND operator

    03:59

  • Interpolating Arrays in JSX

    03:14

  • Exploring Array.map

    04:04

  • Using Array.map to render an Array

    02:56

  • Understanding the key prop

    12:11

  • Filtering collections client side with Array.filter

    08:20

  • Mapping an Object to view

    04:07

  • Handling basic side effects

    13:40

  • Understanding shallow dependency checks

    05:29

  • Using the empty dependency Array in useEffects

    07:31

  • Cleaning up after side effects

    11:05

  • JavaScript closures and the useEffect hook

    17:11

Forms in React

10 lessons

  • Creating controlled Components

    10:29

  • Binding multiple form controls to Component State

    08:54

  • Submitting form data

    05:51

  • Updating form State from code

    03:31

  • Using a textarea

    03:56

  • Using a select

    04:55

  • Using a checkbox

    04:35

  • Grouping checkboxes together

    06:52

  • Using radio buttons

    08:17

  • Loading data into a form

    09:48

Thinking in Components

5 lessons

  • From design to rough Component outline

    04:09

  • Building a static React view from the design

    21:27

  • From static view to statefull app

    15:48

  • Making sure the app is accessible

    06:55

  • Identifying re-usable code

    15:48

HTTP Requests

7 lessons

  • Understanding HTTP requests

    04:47

  • Create a basic HTTP server in Node Express

    05:48

  • Fetching data from the server

    15:00

  • Sending data to the server

    09:44

  • Avoiding State changes on unmounted Components

    04:51

  • Using async/await

    03:36

  • Setting custom HTTP headers

    03:21

Routing

5 lessons

  • Adding React Router to your application

    11:29

  • Navigating with the router’s Link Component

    06:36

  • Understanding route parameters

    13:53

  • Updating the browser title

    09:49

  • Making routing accessible

    09:29

The Missing Introduction to React 6:52

Almero Steyn

Almero Steyn

Course Author

$ 129 Save 32% /per user

189 Total: $

Add to Cart

EU customers: price excludes VAT

Accepting MasterCard Accepting PayPal Accepting VISA Accepting Amex

Secure SSL encrypted payments

If you're looking for a step-by-step guide for learning Angular and TypeScript, you'll find no better resource than Ultimate Courses.

David East

David East

Developer Advocate, Firebase

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

After the RxJS courses I know much more than before about RxJS. I've learnt in a practical way how and when to use the powerful operators the library provides taking advantage from them in the daily work. Amazing!

Attilio Urbani

Attilio Urbani

Software Engineer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Todd's courses lead the way in the Angular world. We also worked together on a very successful live Angular performance training session to hundreds of developers.

Peter Cooper

Peter Cooper

CooperPress, JavaScript Weekly

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

A must have for anyone wanting to become an Angular developer. Lots of best practices to help you architect big apps. I learned incredible amounts from this course!

Mohammad Aljaber

Mohammad Aljaber

Solutions Architect

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Todd's materials are always fantastic! The courses have helped me far better grasp real architecture of Angular apps - and the way it should really be done. A+.

Ritik Rishu

Ritik Rishu

Senior Engineer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Wow! I've achieved a great level of understanding on how to build real applications with Angular. Todd's indepth knowledge of Angular was fantastic, and the explanations on Typescript are superb.

Hung Bui

Hung Bui

Senior Front-End Developer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Angular Fundamentals is the clearest, and best produced Angular course on the market! Clear, concise, packed with best practices and skilled me up very quickly!

Kyle Hebert

Kyle Hebert

JavaScript Developer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Hands down the best courses available for Angular! Just follow along, you'll fall in love with Angular. Daunting concepts aren't scary anymore, they're a breeze.

Vatsal Pande

Vatsal Pande

Full-Stack Engineer, eBay

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Or get the complete bundle...

Everything you need to start mastering React today

React Kickstart Bundle

2 courses

Accepting MasterCard Accepting PayPal Accepting VISA Accepting Amex

Secure SSL encrypted payments

100% 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 every cent back.

Student/Location discounts

Not-so-good exchange rate? (i.e. India/Brazil) Get in touch for a coupon. Student? Email us from your student email or attach your student ID.

Get the full React bundle

I've created the best 6 course bundle on the internet. It will teach you everything you need to know about React.

  • Course category icon React Basics 65 lessons, 8 hours
  • Course category icon React Styling 9 lessons, 2 hours
  • Course category icon React Advanced Est. Coming soon
  • Course category icon React Router Est. Coming soon
  • Course category icon React State Management Est. 6 weeks
  • Course category icon React Universal Est. Coming soon

Get the entire collection, 5 more courses, for just $120 extra!