Introduction

React is a JavaScript library for building user interfaces out of small, reusable pieces called components. Instead of manually finding and updating DOM elements one at a time — the way the DOM Basics lesson in the JavaScript course does — you describe what the interface should look like for a given piece of data, and React takes care of updating the actual page to match.

The problem React solves

Plain DOM manipulation works fine for small changes, but it gets tangled fast once a page has many interdependent pieces: change one value, and you have to remember every place on the page that value affects, then go update each one by hand. React flips this around — you write a function that says "given this data, here's what the UI looks like," and React figures out what actually needs to change on the page when that data changes.

A first component

A React component is just a JavaScript function that returns markup written in JSX — HTML-like syntax that lives directly inside your JavaScript:

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

A page containing a single <h1> heading that reads:
Hello, React!

Welcome is a function component — a plain JavaScript function whose name starts with a capital letter (React uses the capitalization to tell your own components apart from regular HTML tags like div or h1). Whatever it returns is what gets rendered to the page.

Getting set up

You don't need to install anything to read this course — every lesson is just code and its result, the way the PHP and C# courses on this site work. When you're ready to actually run React locally, the standard way to start a new project today is npm create vite@latest my-app -- --template react, which gives you a working project with a build tool already configured.