Introduction to React

By Syncfusion®, Inc. · Last updated November 6, 2026

What React is and why developers use it, its main features, React versus plain JavaScript, Single Page Applications, the Virtual DOM, the React ecosystem, how an app is put together, and how to install Node.js, create a Vite project, read its files and run it.

React Introduction

React is a JavaScript library. A library is a collection of ready-made code that you can use in your own project.

React has one job. It helps you build the user interface. The user interface is everything a person sees and clicks on a web page.

Who Made React?

React was created at Facebook (now Meta). It was released to the public in 2013. Today it is free and open source, and thousands of companies use it.

Real-World Example

A bookshop website shows a header, a search box, a list of books and a cart. The team builds each part as a component: Header, SearchBox, BookList and CartBadge.

When a user adds a book, React updates only the number in CartBadge. The rest of the page stays as it is, and the browser never reloads the page.

Your First React Component

A component is a function that returns what should appear on the screen. A React app starts with two files:

• The App file holds your first component, App. It describes what the page shows: here, a heading and a paragraph.
• The main file is the starting point of the app. It finds the empty box on the page (<div id="root">) and tells React to show the App component inside it.

You write most of your code in the App file. The main file runs once, when the app starts.

The main file shows App inside the page, so the heading and the paragraph appear in the preview on the right.

The code inside return ( ... ) looks like HTML. It is called JSX. JSX lets you describe the page in a shape you already know. You will learn JSX in detail in a later lesson.

Why React?

Before React, developers changed web pages by hand, one element at a time. On a big page, this becomes hard to follow. React solves three common problems:

• Messy code — You describe how the page should look, and React works out what to change.
• Repeated code — You build a piece once, such as a product card, and reuse it everywhere.
• Slow updates — React changes only the parts of the page that really changed.

Features of React

These are the main features you will learn in this course.

• Components. Build the page from small, reusable pieces, such as a book card or a menu.
• TSX. Write HTML-like code inside TypeScript to describe what the page shows.
• Props. Pass data from one component to another.
• State. Store data that can change. When it changes, the page updates by itself.
• Declarative code. Describe what the page should look like, and React works out the steps.
• Virtual DOM. React finds the smallest change and updates only that part of the page.
• One-way data flow. Data moves from a parent component down to its children, so it is easy to find where a value came from.
• Hooks. Functions such as useState that add features to a component.
• Large community. Millions of developers use React, so help and ready-made tools are easy to find.

React vs Traditional JavaScript

The best way to see the difference is to build the same thing twice.

The app below has a text box and a Like button. Type your name in the box first. Then press Like.

The Traditional Way

This version uses plain JavaScript. Every time you press Like, it rebuilds the whole box with innerHTML.

Type a name, then press Like. The count goes up, but your name disappears.

This happens because innerHTML throws away the old text box and builds a new, empty one. To keep the name, you would need extra code to save it and put it back.

The React Way

This version uses React. You describe the page once. React updates only what changed.

Type a name, then press Like. The count goes up, and your name stays.

React saw that only the button text changed. So it changed only the button text. The text box was left alone.

useState gives a component a value it can remember, such as the number of likes. You will learn useState in a later lesson.

Side by Side

Single Page Applications (SPA)

The Old Way: Many Pages

On a traditional website, each page is a separate file. When you click a link, the browser asks the server for a new page. The screen goes blank for a moment, and the whole page loads again.

The SPA Way: One Page

A Single Page Application loads one page only once. After that, when you click a link, JavaScript swaps the content inside that same page. Nothing reloads.

Gmail, Google Maps and YouTube work this way.

Try It

Press the buttons below. The content changes, but the page does not reload. The console message "Book Corner loaded" appears only once, which proves the page loaded only once.

React is very good at building SPAs. Real apps use a library called a router to do this switching. You will learn routing later in the course.

Virtual DOM

What Is the DOM?

The DOM (Document Object Model) is how the browser sees your web page. Each part of the page, such as a heading or a button, is stored as an object.

When the DOM changes, the browser updates the screen.

What Is the Virtual DOM?

The Virtual DOM is a copy of the DOM that React keeps. React changes this copy first, because it is fast.

Then React updates only the parts of the real page that changed.

How It Works

When something changes, React follows three steps:

1. Render — React builds a new Virtual DOM with the change.
2. Compare — React compares the new Virtual DOM with the old one. This step is called diffing.
3. Update — React changes only the parts of the Real DOM that are different.

Animation: React builds a new Virtual DOM, compares it with the old one, and updates only the changed button in the Real DOM

Old Virtual DOM New Virtual DOM Real DOM (page)

div h1 Post Likes: 0

div h1 Post Likes: 1

different!

divh1 Post

Likes: 0 Likes: 1

only this changes

1. Render: the user clicks Like, React builds a new Virtual DOM 2. Compare (diffing): only the Likes button is different 3. Update: React changes only that button on the page

React builds a new Virtual DOM, compares it with the old one, and updates only what changed.

You already saw this in the Like button example. Only the button text was different, so only the button text was updated.

Real DOM vs Virtual DOM

React Ecosystem Overview

React itself only builds the user interface. The ecosystem is the set of tools that work with React. You do not need to learn them now; it helps to know their names.

React Application Architecture Overview

A React app is a tree of components. One component sits at the top. Other components sit inside it.

For Book Corner, the tree could look like this:

App
├── Header
│   └── NavBar
├── BookList
│   ├── BookCard
│   ├── BookCard
│   └── BookCard
└── Footer

How the Pieces Connect

The app starts from one HTML page with one empty box:

<div id="root"></div>

Then four steps happen:

1. index.html loads main.tsx.
2. main.tsx finds the empty root box.
3. main.tsx shows the App component inside that box.
4. App shows all the other components.

Installing Node.js

Node.js lets JavaScript run outside the browser. React tools need it. It also installs npm (Node Package Manager), which downloads libraries such as React.

• Go to nodejs.org and download the LTS (Long Term Support) version.
• Run the installer and keep the default options.
• Open a new terminal (Command Prompt or PowerShell on Windows, Terminal on Mac).
• Check the install by running these commands:

node -v
npm -v

Each command prints a version number, such as v22.12.0. Your number may be different. If you see a version, Node.js is installed.

Creating a React Application

This course uses Vite to create React projects. Vite sets up everything for you.

Open a terminal in the folder where you keep your projects. Then run:

npm create vite@latest book-corner -- --template react-ts

Here is what each part means:

• npm create vite@latest — use the newest Vite project creator.
• book-corner — the name of your project folder.
• --template react-ts — make a React project that uses TypeScript.

If Vite asks you a question, keep the default answer by pressing Enter.

Next, move into the new folder and download the libraries the project needs:

cd book-corner
npm install

npm install reads the list of libraries in package.json and downloads them into a folder called node_modules. It can take a minute.

Understanding Project Structure

Open the book-corner folder in your code editor. You will see files like these:

book-corner/
├── node_modules/      libraries downloaded by npm install
├── public/            files copied as they are, such as icons
├── src/
│   ├── assets/        images used by your components
│   ├── App.css        styles for the App component
│   ├── App.tsx        the main component
│   ├── index.css      styles for the whole page
│   └── main.tsx       the starting point of the app
├── index.html         the one HTML page
├── package.json       the project's name, scripts and libraries
├── tsconfig.json      TypeScript settings
└── vite.config.ts     Vite settings

The exact list can change a little between Vite versions. The important files are always there.

The Files You Will Edit Most

• src/App.tsx — your main component. You will spend most of your time here.
• src/main.tsx — starts React and shows App inside the root box.
• index.html — the single page. It holds the empty root box.

The Files You Will Rarely Touch

• package.json — lists libraries and commands.
• tsconfig.json and vite.config.ts — settings files.
• node_modules — never edit this folder. npm manages it.

The lab below has the same main files as a new Vite project. Click each tab to see how they connect.

StrictMode is a helper that warns you about common problems while you develop. It does not change what users see.

Running a React Application

Inside the book-corner folder, run:

npm run dev

This starts a development server. It is a small web server that runs on your own computer. The terminal shows something like this:

  VITE ready in 350 ms

  ➜  Local:   http://localhost:5173/

Open http://localhost:5173/ in your browser. You will see the starter React page.

Live Updates

Keep the server running. Open src/App.tsx, change some text and save the file. The browser updates on its own, without a refresh.

This is called Hot Module Replacement, or HMR.

Stopping the Server

Click inside the terminal and press Ctrl + C. The server stops, and the page stops working until you run npm run dev again.

Common mistakes

Check Yourself

Exercises

What to Remember

• React is a JavaScript library for building user interfaces from small, reusable components.
• React updates only what changed, using the Virtual DOM to find the differences.
• To start a project: npm create vite@latest, then npm install, then npm run dev.

Next: TSX Fundamentals