Introduction to React

React is a JavaScript library for building user interfaces.

A user interface is everything a person sees and clicks: buttons, forms, lists, pages.

React does not replace JavaScript. It sits on top of JavaScript and helps you describe the screen as small pieces called components.

If JavaScript is still new, take the JavaScript course first. React will feel much easier.

The big idea

Old-style pages mix HTML, then hunt for nodes with querySelector, then change them by hand.

That gets messy when a list, a form, and a badge all depend on the same data.

React flips the model. You describe what the screen should look like for the current data. React updates the real DOM for you.

A component is a function that returns markup

Here is the smallest useful React component.

It is a function. Its name starts with a capital letter. It returns JSX, which looks like HTML inside JavaScript.

React will turn that return value into real elements in the browser.

You can render Hello many times. Each time is a separate instance on the page.

Data in, UI out

Give the component data through props. The UI follows.

First call shows Hello, Ada. Second shows Hello, Sam.

Same component. Different data. That is the whole game.

What React is not

React is not a full framework by itself.

It does not pick your router, your CSS tool, or your backend.

Vite, Next.js, and Remix wrap React with those extras.

This course teaches React itself, so you can use it in any of those.

What you will learn

JSX, components, and props come first.

Then events, state, lists, and forms.

Then effects, data fetching, context, and custom hooks.

At the end you build a small scoreboard that uses most of these ideas together.

Tip: React rewards small functions. If a component does three jobs, split it.