React Basics Course (How To)

React is a JavaScript library for building user interfaces. React makes building and maintaining your application's user interface faster and easier by breaking it up into smaller, reusable components. It also helps eliminate the complexity of updating your DOM elements when the user interacts with your application.

What you'll learn

• JSX
• Props
• useState Hook
• Components
• Events

First Steps in React

React differs from other front end libraries and frameworks because it focuses on building components and structure in JavaScript, not HTML pages or templates. In this stage, you'll learn the problems React solves and create React elements.

Chevron 6 steps

• Introducing React

  3:22

• Setting Up a React App

  4:36

• Understanding JSX

  5:52

• Embed JavaScript Expressions in JSX

  7:39

• First Steps in React Recap

  2:28

• First Steps in React Review

  6 questions

Thinking in Components

Components are at the heart of React -- they are the core building blocks of a React application. A component lets you reuse code that renders a part of your UI. Being able to split your UI code into independent, reusable pieces, and think about each piece in isolation is one of the most embraced features of React.

Chevron 9 steps

• Stage 2 Walk-through: What Is a Component

  2:30

• Create a Component

  4:15

• Use a Component with JSX

  2:23

• React Components Review

  5 questions

• Creating the Item Component

  3:20

• Nesting Components

  3:12

• React Developer Tools

  6:38

• Thinking in Components Recap

  1:54

• Thinking in Components Review

  5 questions

Introducing Props

Properties (or props) are a core concept in React. Components receive data through props, allowing them to be dynamic, customizable, and reusable. Most of the components in your UI will be configured with props.

Chevron 7 steps

• Stage 3 Walk-through: What Is Props

  3:10

• Setting and Using Props

  7:28

• Use Props to Create Reusable Components

  4:54

• Iterating and Rendering with map()

  6:19

• Use Keys to Keep Track of Elements

  3:00

• Introducing Props Recap

  2:33

• Introducing Props Review

  6 questions

Understanding State

In React, state stores information about a component that can change over time. State determines how a component renders and behaves, and is what makes components interactive, allowing them to update and react to changes by updating DOM elements.

Chevron 10 steps

• Stage 4 Walk-through: What Is State

  3:56

• Add State to a Component

  4:32

• Handling Events

  3:08

• Updating State

  2:54

• State and Event Review

  7 questions

• Update State Based on Previous State

  8:01

• Creating the Application State

  3:43

• Remove Items from State

  5:52

• Understanding State Recap

  3:38

• Understanding State Review

  6 questions