Part 1.1Course introduction

React is a JavaScript library for building user interfaces from small, reusable components. You describe what the page should look like for the current data; React keeps the browser's DOM in step when that data changes.

What React is

A React component is a JavaScript function that returns markup. Components can represent a button, a product card or an entire page, and can be combined to form an application.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

The mental model

Think of the interface as a function of data: the same props and state should produce the same description of the screen. Avoid changing the DOM yourself. Change the data, let React render again and keep rendering logic predictable.

This course

This course assumes you know JavaScript functions, arrays, objects, modules and the DOM. You will build a task-list interface while learning JSX, components, props, state, events, effects, forms and application structure. Type each example, change it and observe the result; React becomes clear through iteration.

How to use the examples

Each filename above a code sample tells you where that code belongs. A file ending in .jsx may contain JSX as well as JavaScript. When a sample shows only one component, assume it is imported and rendered by a parent as later lessons demonstrate.

Read each example from the outside in: identify the component function, its inputs, any state it owns and the JSX it returns. Change one value and predict the result before looking at the browser.