React Basics

New

The Missing Introduction to React

06:52

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

Watch lesson

Accessibility and ARIA in JSX

02:38

Watch lesson

Interpolating values in JSX

03:58

Using expressions in JSX

06:23

Introduction to Components

05:52

Pure functions

03:12

Watch lesson

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

Watch lesson

One-way Data Flow in Components

07:43

Building re-usable Components

09:43

Introduction to the React reconciler

06:12

Introduction to the React Dev Tools

08:32

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

Watch lesson

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

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

Watch lesson

Using radio buttons

08:17

Loading data into a form

09:48

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

Understanding HTTP requests

04:47

Create a basic HTTP server in Node Express

05:48

Watch lesson

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

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

Introduction to the application

07:49

Adding a header and footer

08:06

Displaying the menu

20:20

Displaying the ice cream images

10:29

Adding a loading message

25:37

Routing to an edit component

19:50

Creating the main navigation

03:49

Fetching the menu item in the edit component

18:45

Editing the data in a form

37:53

Routing accessibility

31:29

Adding a skip navigation link

07:59

Building a validation system

14:19

Displaying validation messages

10:25

Accessible validation

21:09

Deleting a menu item

07:04

Fetching the stock ice cream list

09:53

Displaying the stock list

18:37

Extracting the edit form

23:36

Creating the add page

18:59