💲 Black Friday Special

Get an extra 35% OFF everything with coupon code BLACK_FRIDAY

0 days
00 hours
00 mins
00 secs

React Basics React Icon

84 lessons

13 hours

Star Icon Star Icon Star Icon Star Icon Star Icon

5/5 (918 ratings)

React Basics

Star Icon Star Icon Star Icon Star Icon Star Icon

5/5 (918 reviews)

Almero Steyn

with Almero Steyn

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.

10

Chapters

84

Lessons

13

Hours
Closed Captions Icon

Closed Captions in English

Free Lesson Arrow Icon
Course Thumbnail
Play Icon

Adding state with the useState hook 07:31

Star Icon Star Icon Star Icon Star Icon Star Icon
By far the best React introductory course out there, just brilliant. I've attempted many others before, but none were up-to-date and comprehensive like this.
Onome Adamu

Onome Adamu

Software Engineer
Star Icon Star Icon Star Icon Star Icon Star Icon
Loved React Basics. The content is amazing, I learnt so much on this course, can't wait to go over the next React courses!
Victor Hazbun

Victor Hazbun

CEO
Star Icon Star Icon Star Icon Star Icon Star Icon
Fantastic courses explained incredibly well. Very easy to follow and understand concepts. 10/10.
Nicolas Telfer

Nicolas Telfer

Co-founder / Engineer
Star Icon Star Icon Star Icon Star Icon Star Icon
Crystal clearly explained concepts, meticulously designed examples and projects! Fantastically valuable courses overall!
Yiling Lu

Yiling Lu

Senior Developer
Star Icon Star Icon Star Icon Star Icon Star Icon
I attempted other courses before these, and Ultimate Courses is way ahead and incomparable. Clearest explanations, easy to understand, beyond basics, fantastic value for money.
Fabrizio Masini

Fabrizio Masini

JavaScript Developer
Star Icon Star Icon Star Icon Star Icon Star Icon
Absolutely fantastic courses. Self-paced, comprehensive, real examples from beginning to end, clear and concisely brilliant.
Jacob Cheriathundam

Jacob Cheriathundam

Development Architect

Here's what's inside...

Everything you need, structured and ready to go.

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

Everything you need to start mastering React today

Google Developer Experts Icon

Expert knowledge

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

Trophy Icon

All the best practices

Design patterns, battle-tested techniques, architecture and performance.

Stream Icon

Stream or download

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

Code Terminal Icon

Level up your career

Nail that interview or promotion with skills that will set you apart.

StackBlitz Icon

StackBlitz Embeds

Access full source code, and experiment live in the browser.

Slack Icon

Private Slack Group

Exclusive access to our members-only community (7,000+ members).

React Basics

129

/user

189

Save 32%

$

ADD TO CART
MasterCard Icon PayPal Icon VISA Icon Amex Icon

EU customers: price excludes VAT

React Kickstart Bundle

199

/user

258

Save 23%

$

ADD TO CART
MasterCard Icon PayPal Icon VISA Icon Amex Icon

EU customers: price excludes VAT

Moneyback Icon

30-day money back guarantee

If you're disappointed for whatever reason, you'll get a full refund (but I'm sure you won't need it).

Discount Icon

Location discounts and students

Not-so-good exchange rate? (i.e. India/Brazil). Student?
Email us for a coupon for your country or student ID.