React Basics icon React Basics

65 lessons 8 hours
New

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. 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.

Online Course with Almero Steyn

Author: Almero Steyn

Play Angular featured video The Missing Introduction to React 6:52

  • Job-ready training
  • Skill up your team
  • Expert knowledge
  • Certificate of completion
  • Stream or download
  • Best practices included
  • Closed Captions (subtitles)
  • 30-day guarantee
  • Slack community access

Introduction to React

1 lessons

  • 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

Or get the complete bundle...

Everything you need to start mastering today

Preorder special

React Master Bundle

8 hours 72 lessons

React Ultimate Bundle

8 hours 69 lessons

React Kickstart Bundle

8 hours 66 lessons

Perfect for Teams

Skill up your development team quickly. It's easy to get your team onboard with us! Get special team discounts, progress reports, team upgrades and much more.

100% money back guarantee

We’re proud to be empowering thousands of developers, beginners and experienced pros. If you’re anything less than 110% satisfied, let us know within 30 days and we’ll refund you in full.

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.

Powering the world's best developers and teams

Walmart logo
Amazon logo
Apple logo
Netflix logo
Google logo
Microsoft logo
TMobile logo
Shell logo
Canon logo
Samsung logo
Disney logo
MasterCard logo
Tesla logo
NASA logo
google Logo

I can't think of any Angular course training that I trust to be more accurate, and promote the best practices, than Ultimate Courses.

Jules Kremer Picture

Jules Kremer

Angular Developer Relations, Google

San Francisco, California

revolution-prep Logo

Ultimate Courses is fantastic. My engineering team is building apps better than ever. In-depth training that pushes new standards.

Jordan Epps Picture

Jordan Epps

Director of Engineering, Revolution Prep

Santa Monica, California

I've spent $1,500 dollars in the last 6 months trying to learn what you gave me in a single course.

Chris Milford photo

Chris Milford

Senior Engineer

The clearest and best produced courses on the market! Clear, concise, packed with best practices.

Kyle Hebert photo

Kyle Hebert

JavaScript Developer

An immense job breaking things down into simple concepts. I would strongly recommend Ultimate Courses.

Houssein Djirdeh photo

Houssein Djirdeh

JavaScript Engineer

Self-paced, comprehensive, real examples from beginning to end, clear and concisely brilliant.

Jacob Cheriathundam photo

Jacob Cheriathundam

Development Architect

Todd's Angular courses are one of the best online trainings that can be found. A+.

John Oswalt  photo

John Oswalt

Technology Expert

I’ve achieved the structure and organisation that is difficult to get on your own. Excellent.

Sergio Sorrentino photo

Sergio Sorrentino

JavaScript Developer

The courses are incredible. You've opened the door for me to build real Angular apps.

Juan Henriquez photo

Juan Henriquez

Full Stack Engineer

I've learned and understood so much in such a short amount of time, it's unreal!

Christian Eckenrode  photo

Christian Eckenrode

Senior Engineer

A fast track to becoming a super solid Angular developer. Detailed, easy to understand, brilliant.

Mag Leahy photo

Mag Leahy

Angular Developer

This course is the best resource for learning Angular. The Angular Pro course is incredible.

Victor Hazbun photo

Victor Hazbun

CEO

Fantastic courses explained incredibly well. Very easy to follow and understand concepts. 10/10.

Nicolas Telfer photo

Nicolas Telfer

Co-founder

Landed my first job after taking these courses, not sure I'd have made it otherwise.

Mateusz Sapielak photo

Mateusz Sapielak

Systems Developer

A must have for anyone wanting to become an Angular developer. I learned incredible amounts!

Mohammad Aljaber  photo

Mohammad Aljaber

Solutions Architect

You've helped me grasp architecture of Angular apps, and the way it should really be done.

Ritik Rishu photo

Ritik Rishu

Senior Engineer

Todd condenses all his hard earned knowledge into a time-saving learning process.

Sharon DiOrio  photo

Sharon DiOrio

Lead UI Engineer

The best place to get started with Angular, and go straight to the advanced material.

Zhentain Wan photo

Zhentain Wan

Javascript Developer

Todd's in depth knowledge of Angular was fantastic, and the TypeScript explanations are superb.

Hung Bui photo

Hung Bui

Senior Front-End Developer

Extremely helpful in breaking down concepts into something beginners can understand.

Dustin Downs photo

Dustin Downs

JavaScript Developer

Goodbye books and lectures, hello Ultimate Courses. Intuitive, enlightening, and refreshing.

Chris Cooley photo

Chris Cooley

Senior Engineer

The best resource for anyone wanting to get started with Angular, and go way beyond.

Anish Benjamin photo

Anish Benjamin

JavaScript Developer

The content has been well thought out, everything fits together perfectly.

Pranava Balugari photo

Pranava Balugari

JavaScript Developer

Everything you could to learn for Angular. The courses ask "why?", and responds with the answers!

Ryan Woodcox photo

Ryan Woodcox

JavaScript Developer

I've come up to speed immediately. I was lost and confused before this course, a brilliant job.

Joe Kahl photo

Joe Kahl

Senior Engineer

I attempted other courses before these, and Ultimate Courses is way ahead and incomparable.

Fabrizio Masini  photo

Fabrizio Masini

JavaScript Developer

Hands down the best courses available. Daunting concepts aren't scary anymore, they're a breeze.

Vatsal Pande  photo

Vatsal Pande

Full-Stack Engineer

Ultimate Courses is a fantastic way for you and your team to start writing quality code.

Nate Murray  photo

Nate Murray

Author of ng-book

Very few break down concepts in such a digestable way. Full of vital real-world techniques.

Chris Sevilleja  photo

Chris Sevilleja

Co-founder, Scotch.io

Ultimate Courses gives you an edge. Bursts of knowledge that really step up your game.

Simon Dufour photo

Simon Dufour

JavaScript Developer

Crystal clear concepts, meticulously designed examples and projects. Fantastically valuable.

Yiling Lu  photo

Yiling Lu

Senior Developer

The best Angular instructors out there with unrivalled knowledge. First-class Angular courses.

Sebastien Pelletier  photo

Sebastien Pelletier

Technical Team Lead

The essentials of architecture, combined with organisation and advanced tricks.

Johan Chouquet photo

Johan Chouquet

CTO

If you want to finally understand Angular and TypeScript, you're in the right place.

Ryan Chenkie  photo

Ryan Chenkie

Product Owner

The Angular courses are the best you'll find. They've taken our skills to the next level.

Ben Brown photo

Ben Brown

Lead Engineer

Absolutely love these courses, I've built my first proper app. Recommended to all.

Simon Lewis  photo

Simon Lewis

JavaScript Engineer

The real ultimate guide to Angular. Thank you for all your contributions to the community.

Sherry List photo

Sherry List

JavaScript

The Angular courses have been indispensable for me getting things done, the right way.

Stephen Smith photo

Stephen Smith

Founder

Hands down best start to finish NGRX course available. 10/10.

Alexander Torres photo

Alexander Torres

IT Specialist

The first course I've ever watch to the end. I've immediately grasped NGRX Store and Effects!

Ben Dalton photo

Ben Dalton

Front-End Engineer

This course is incredible and laid everything out for me in a few hours. I've fallen in love with NGRX!

Jan van Braeckel photo

Jan van Braeckel

Full-Stack Developer

There's no material available like this online all in one place, fantastic.

Dick Swart photo

Dick Swart

Senior Developer