React Basics New

The Missing Introduction to React

Introduction to Components

Pure functions

Watch lesson

Components as functions returning view

Passing props to Components

The children prop

Setting up a dev environment with create-react-app

Isolating Components as exports and imports

Adding an event handler to an element

Adding state with the useState hook

Watch lesson

One-way Data Flow in Components

Building re-usable Components

Introduction to the React reconciler

Introduction to the React Dev Tools

Conditional rendering with an if statement

Conditional rendering with the ternary operator

Conditional rendering with the boolean AND operator

Interpolating Arrays in JSX

Exploring Array.map

Using Array.map to render an Array

Understanding the key prop

Filtering collections client side with Array.filter

Watch lesson

Mapping an Object to view

Handling basic side effects

Understanding shallow dependency checks

Using the empty dependency Array in useEffects

Cleaning up after side effects

JavaScript closures and the useEffect hook

Creating controlled Components

Binding multiple form controls to Component State

Submitting form data

Updating form State from code

Using a textarea

Using a select

Using a checkbox

Grouping checkboxes together

Watch lesson

Using radio buttons

Loading data into a form

From design to rough Component outline

Building a static React view from the design

From static view to statefull app

Making sure the app is accessible

Identifying re-usable code

Understanding HTTP requests

Create a basic HTTP server in Node Express

Watch lesson

Fetching data from the server

Sending data to the server

Avoiding State changes on unmounted Components

Using async/await

Setting custom HTTP headers

Adding React Router to your application

Navigating with the router’s Link Component

Understanding route parameters

Updating the browser title

Making routing accessible