Introduction

React is a free, open-source JavaScript library for building user interfaces out of reusable, self-contained components that update automatically when your data changes.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll understand what React is and why it exists, read and write JSX, explain how the Virtual DOM makes updates fast, recognise a component as a function that returns UI, and spin up a brand-new React project with Vite.

1️⃣ What React Is (and Why It Exists)

React is a JavaScript library for building user interfaces , created by Facebook (now Meta) in 2013. It powers Netflix, Instagram, Airbnb, Discord, and a huge slice of the modern web. It's a library , not a full framework — it focuses purely on the UI layer, which makes it flexible.

The big idea is being declarative . With plain JavaScript you write imperative code: you grab elements and manually change them step by step — find this element, set its text, add this class, remove that node. As an app grows, those hand-written DOM updates become a tangle of bugs.

React flips it around. You describe what the UI should look like for the current data , and React figures out the DOM changes for you. Change the data, and the UI updates to match — automatically. You stop micromanaging the page and start describing the result.

Imperative (vanilla JS) vs Declarative (React) — same goal:

2️⃣ Components Are Functions That Return UI

In React, everything is a component . A component is simply a JavaScript function that returns some UI. You build a page by nesting and reusing these functions — exactly like snapping LEGO bricks together. Here's a real one (read-only — it needs a build step to run):

📄 Read-only worked example — real React (does not run in the editor):

To prove a component is "just a function that takes inputs and returns UI", here's the same idea in plain runnable JavaScript — we return strings instead of JSX, but the shape is identical. Run it and change the names:

3️⃣ JSX — HTML-like Syntax in JavaScript

JSX stands for JavaScript XML . It lets you write HTML-like markup directly inside your JavaScript. The magic is the {' curly braces '} : anything inside them is treated as a JavaScript expression and its value is dropped into the UI. So {' Hello, ! '} inserts the value of name .

A couple of rules to know up front: a component must return a single root element (wrap siblings in a or an empty fragment), and HTML's class attribute becomes className because class is a reserved word in JavaScript.

📄 Read-only worked example — embedding expressions in JSX:

4️⃣ The Virtual DOM — Why React Is Fast

Touching the real browser DOM is slow, and doing it constantly is the main cause of sluggish web apps. React's trick is the Virtual DOM : a lightweight copy of your UI kept in memory as plain JavaScript objects. JSX compiles down to calls that build these objects.

When your data changes, React builds a new virtual tree, compares it to the previous one (a process called "diffing"), and then updates only the few real DOM nodes that actually changed — not the whole page. You never write those updates yourself. The runnable demo below shows what a JSX tag actually becomes: a plain object.

This is real JSX, so it's read-only — fill in the blanks in your head (or in a real Vite project) and check yourself against the ✅ answer in the comments.

5️⃣ Rendering a List (the logic behind it)

React renders lists by mapping over an array of data and returning one element per item. This runnable exercise builds that exact logic in plain JS. Fill in the two blanks, run it, and match the expected output:

6️⃣ Setting Up a React Project with Vite

The modern way to start a React project is with Vite — a build tool that's extremely fast and gives you instant Hot Module Replacement (your changes appear in the browser the moment you save). The React team now recommends a real build tool like Vite over the older Create React App. You'll need Node.js installed first.

📁 What Vite creates (the parts that matter):

Open src/App.jsx , replace its contents with the worked example from section 2, save, and your browser updates instantly. That's the full loop: write a component → save → see it live .

'} ) errors. Wrap them in one or a fragment . Using class instead of className : in JSX the attribute is className (and for becomes htmlFor ), because class is a reserved JS word. Pro Tips 💡 One component, one job. If a component is getting big, it's probably several LEGO bricks pretending to be one — split it. 💡 Install React Developer Tools (Chrome/Firefox extension) to inspect your component tree, props, and state live in the browser. 💡 Name files after the component: ProfileCard.jsx exports ProfileCard . Future-you will thank you. 📋 Quick Reference — React Basics Concept Syntax Note Function component {'function App() '} Capital name; must return JSX Embed a value {'

Neither — it's a JavaScript library focused on the UI layer. You still write JavaScript; React gives you components, JSX, and the Virtual DOM. Because it does less than a full framework (like Angular), it's flexible and easy to add to a project.

Technically no — JSX compiles to React.createElement() calls you could write by hand — but in practice everyone uses JSX because it's far more readable. It's the standard way to write React.

Q: Why can't I run the JSX examples in the editor here?

JSX isn't valid plain JavaScript — a build tool (Vite/Babel) must compile it first. The editor on this page only runs plain JS, so the real React lives in read-only boxes. Set up Vite (section 6) to run JSX for real.

Use Vite . It's dramatically faster to start and reload, and it's the current recommendation. Create React App is older and effectively retired.

No blanks this time — just a brief and an outline. Build it, run it, and check your output against the example in the comments. This is the same "function takes props, returns UI" pattern you'll use for every real React component.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary