React Basics Course

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
• State
• 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, add React to your project, and create React elements.

Chevron 8 steps

• Introducing React

  3:13

• Add React to a Project

  3:43

• Create a React Element

  4:37

• Render an Element

  6:18

• Introduction to React Review

  6 questions

• Understanding JSX

  4:08

• Embed JavaScript Expressions in JSX

  6:47

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

• What is a Component?

  2:53

• Create a Component

  2:25

• Use a Component with JSX

  2:38

• React Components Review

  5 questions

• Components as Arrow Functions

  0:55

• Create the Player Component

  3:21

• Composing Components

  3:19

• React Developer Tools

  3:49

• 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 6 steps

• Setting and Using Props

  7:24

• instruction

  Components and Props

• Use Props to Create Reusable Components

  4:45

• Iterating and Rendering with map()

  4:41

• Use Keys to Keep Track of Elements

  3:58

• Introducing Props

  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 11 steps

• What is State?

  4:15

• Create a Component as a Class

  4:00

• Create a Stateful Component

  4:21

• Handling Events

  2:56

• Updating State

  2:14

• Bind Event Handlers to Components

  5:08

• State and Events Review

  7 questions

• Update State Based on Previous State

  3:30

• Creating the Application State

  4:34

• Remove Items From State

  6:49

• Understanding State Review

  6 questions