React Basics Course (How To)

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.

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

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

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

• 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