Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

React Basics Course

via Treehouse

Overview

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

What you'll learn

  • JSX
  • Props
  • State
  • Components
  • Events

Syllabus

First Steps in React

React differs from other front end libraries and frameworks in that it focuses on building components and structure in JavaScript, and not in HTML pages or templates. In this stage, you'll learn the problems React solves, adding React to your project, and creating 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

Taught by

Guil Hernandez

Reviews

Start your review of React Basics Course

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.