What React is and why it exists

You've built interactive pages with plain JavaScript — selecting elements, handling events, updating the DOM by hand. That works for small things, but as apps grow, manually keeping the page in sync with your data becomes a tangled mess. React is a library that solves this: you describe what the UI should look like for your data, and React keeps the actual page in sync for you. It's the most popular way to build user interfaces, and a hugely valuable skill.

The problem React solves

In plain JavaScript, you manually update the DOM whenever data changes — find the element, change its text, add/remove classes, insert nodes. With many pieces of data and UI, this becomes error-prone: you forget to update something, the page and data drift out of sync, and the code turns into spaghetti.

React flips this around. You write components that describe the UI for the current data, and when the data changes, React figures out what to update and does it for you. You stop writing "find this element and change it" and start writing "here's what the UI is, given this data." React handles the rest.

Your first React component

That's a real, running React component. Welcome is a function that returns what looks like HTML (it's JSX — next lesson). The last line renders it to the page. Edit the text and see it update. This tiny example shows React's shape: components are functions that return UI.

What makes React powerful

• Components — you build your UI from reusable, self-contained pieces (a button, a card, a whole page), and compose them together. Write once, reuse everywhere.
• Declarative — you describe the UI for your data; React updates the DOM to match. No manual DOM juggling.
• Automatic updates — when your data (state) changes, React re-renders and efficiently updates only what changed.
• Huge ecosystem — React is everywhere, with vast community support, tools, and jobs. It's the industry standard for front-end.

How this course works

You'll learn React by running real components right here — every example is live and editable. We'll build up: JSX (writing UI), components and props (reusable pieces with data), state (interactivity), effects (fetching data), and then real projects. By the end, you'll build actual React apps.

One note: these examples load React directly in the browser for learning. Real React projects use a build tool (like Vite) that sets everything up — but the React code you write is the same. Focus on the components; the setup is handled.

The mistake beginners make

Thinking React replaces HTML/CSS/JavaScript — it doesn't; it's built on them. React is JavaScript, JSX is mostly HTML, and you still style with CSS. Everything you've learned still applies. Also, expecting to manipulate the DOM directly (document.querySelector) as before — in React, you don't; you change data and let React update the DOM. That shift — from "update the DOM" to "describe the UI for the data" — is the core mental change. Embrace it and React becomes powerful.

Your turn

Your turn

1. Understand React as a library for building UIs from components that describe what the UI should be for your data.
2. See the declarative model: you describe the UI, React keeps the DOM in sync (no manual DOM updates).
3. Run and edit your first component — a function that returns JSX, rendered to the page.

Key points

• React is a library for building user interfaces from reusable COMPONENTS (functions that return UI).
• It's DECLARATIVE: you describe what the UI should be for your data, and React updates the DOM to match automatically.
• This replaces manual DOM manipulation — you change DATA (state), and React efficiently re-renders.
• React is built on HTML/CSS/JavaScript (it IS JavaScript) — everything you know still applies; it's the industry standard.