React is a JavaScript library for building user interfaces. Instead of writing step-by-step instructions that change the page, you describe what the screen should look like for the current data, and React keeps the page in step with that description. This React introduction starts a track where you will learn modern React 19 from the ground up: components, props, state, events, forms, effects and finally a real project with Vite.
What is React?
React was created at Facebook (now Meta) and released as open source in 2013. Today it is maintained by Meta together with a large community of contributors. It is a library, not a full framework: it focuses on one job – turning your data into user interface – and leaves other jobs, such as routing between pages, to other tools.
The central idea in React is the component. A component is a small, reusable piece of the interface – a button, a product card, a search bar, a whole page – written as a JavaScript function. You build big screens by putting small components together, much like building a wall from bricks.
React itself does not know about browsers. A second package, React DOM, takes your components and puts them into a web page. Another project, React Native, uses the same ideas to build mobile apps. In this track we only target the web.
Why do developers use React?
In the DOM Manipulation lesson you changed the page by finding elements and updating them by hand. That works well for small pages. On a busy screen – a cart with prices, a filter panel and a list of results that all depend on each other – it is easy to forget one update and leave the page showing stale information.
- Declarative code: you describe the result for each situation and React works out which DOM changes are needed.
- Reusable components: write a
ProductCardonce and use it a hundred times with different data. - One source of truth: data lives in state, and the screen is always calculated from it, so the two cannot drift apart.
- A huge ecosystem: many libraries, learning material and job openings are built around React.
React is not the answer to every project. A simple brochure site or a blog often needs no framework at all. If you want help deciding, read React vs Plain JavaScript.
What you should know before this React introduction
React is “just JavaScript” in many places, so you will move faster if you are comfortable with HTML, CSS and these JavaScript features: const and let, arrow functions, template literals, destructuring, the spread operator, array methods such as map() and filter(), and import/export. All of them are covered in JavaScript Functions, JavaScript Arrays and Modern JavaScript (ES6+).
Your first React page
Here is the first complete page of this React introduction: it shows a single component. Press “Try it Yourself”, change the text inside the <h1>, and run it again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello React</title>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; line-height: 1.5; }
h1 { color: #0b6e99; }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-type="module">
import React from "https://esm.sh/[email protected]";
import { createRoot } from "https://esm.sh/[email protected]/client";
function App() {
return (
<div>
<h1>Vanakkam from React!</h1>
<p>This text was put on the page by a React component.</p>
</div>
);
}
createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>It looks like a lot for one heading, so let us go through it piece by piece.
| Part | What it does |
|---|---|
@babel/standalone script | Loads Babel, a compiler that turns JSX (the HTML-like code) into plain JavaScript the browser understands. |
<div id="root"> | An empty box. React will draw everything inside it. |
type="text/babel" data-type="module" | Tells Babel to compile this script and run it as an ES module, so import works. |
import React … | Loads React 19 from esm.sh, a CDN that serves npm packages as modules. Always keep the default React import in this setup, because the compiled JSX calls React.createElement. |
import { createRoot } … | Loads the part of React DOM that connects React to a real page. |
function App() | Your component. It returns JSX that describes what to show. |
createRoot(…).render(<App />) | Creates a React root inside #root and renders the App component into it. |
Watch out: This in-browser setup is only for learning. Compiling JSX in the visitor’s browser is slow and loads extra code, so never use it on a real website. Real projects use a build tool such as Vite, which compiles everything ahead of time – you will set one up in React Project with Vite. You may also hear about frameworks such as Next.js that are built on top of React; learn plain React first and they will make much more sense later.
A first taste of interactivity
React really shines when the screen changes. In the next example, clicking the button updates a number. Notice that you never touch the DOM yourself: you change a value with setCups, and React redraws the parts of the page that depend on it. You will learn exactly how useState works in React State with useState.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chai counter</title>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; line-height: 1.5; }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-type="module">
import React, { useState } from "https://esm.sh/[email protected]";
import { createRoot } from "https://esm.sh/[email protected]/client";
function App() {
const [cups, setCups] = useState(0);
return (
<div>
<p>Cups of chai today: <strong>{cups}</strong></p>
<button type="button" onClick={() => setCups(cups + 1)}>
Add a cup
</button>
</div>
);
}
createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>How React updates the page
Every time data changes, React calls your component function again to get a fresh description of the screen. It then compares the new description with the previous one and changes only the parts of the real DOM that are different. In the counter above, only the number is replaced – the paragraph and the button stay as they are. This is why you can write components as if the whole screen were redrawn every time, without paying that cost.
Tip: When you look for another React introduction online, check that it uses function components and hooks. Older material uses class components (class App extends React.Component). They still work, but new code is written with functions, and that is all this track teaches.