# Introduction to React
Course: [React](https://www.devtutorials.ai/learn/react) · Section: React Fundamentals
Source: https://www.devtutorials.ai/learn/react/react-fundamentals/introduction-to-react
> 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.
React is a JavaScript library for building user interfaces out of small, reusable pieces called components.
## 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 (`
`) 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.
Welcome to Book Corner
Your friendly little bookshop.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
// Find the empty
and show App inside it.
createRoot(document.getElementById("root")!).render();
`,
}}
/>
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.
Change the text inside the `
` and press ▶ Run. The preview updates with your new text. Press Restore code to go back.
## 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.
You do not need to learn these features now. Each one has its own lesson later in this course.
## 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`.
\`;
document.getElementById("like")!.addEventListener("click", () => {
likes = likes + 1;
draw();
});
}
draw();
`,
}}
/>
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.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
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
| | Traditional JavaScript | React |
|---|---|---|
| How you work | You change the page step by step | You describe how the page should look |
| Updates | You decide what to change | React works out what to change |
| Reuse | Copy and paste HTML | Write a component once, use it many times |
| Big apps | Gets hard to follow | Stays organised in small components |
## 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.
{page === "home" &&
Welcome to Book Corner
}
{page === "books" &&
Our Books
}
{page === "about" &&
About Us
}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
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.
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.
React changes the Virtual DOM first. Then it changes only the parts of the real page that are different.
## Real DOM vs Virtual DOM
| | Real DOM | Virtual DOM |
|---|---|---|
| What it is | The real page the browser shows | A light copy React keeps in memory |
| Who uses it | The browser | React |
| Speed of a change | Slower, because the screen is redrawn | Fast, because it is only an object in memory |
| On every update | Can be rebuilt by hand, like the `innerHTML` example | Compared first, then only the differences are applied |
| Can you see it? | Yes, it is on the screen | No, it lives only in memory |
## 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.
| Area | Tool | What it does |
|---|---|---|
| Build tool | Vite | Creates a new project and runs it on your computer (used in this course) |
| Framework | Next.js | Adds pages, routing and server features on top of React |
| Navigation | React Router | Moves between screens without reloading the page |
| Shared data | Redux Toolkit, Zustand | Store data that many components use |
| Styling | Tailwind CSS, CSS Modules | Style components with ready-made classes or separate CSS files |
| Server data | TanStack Query | Loads data from a server and keeps it up to date |
| Testing | React Testing Library | Checks that components work |
| Mobile | React Native | Builds phone apps with the same React ideas |
## 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:
```text
App
├── Header
│ └── NavBar
├── BookList
│ ├── BookCard
│ ├── BookCard
│ └── BookCard
└── Footer
```
### How the Pieces Connect
The app starts from one HTML page with one empty box:
```html
```
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:
```bash
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.
If the terminal says "not recognized", close it and open a new one.
## 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:
```bash
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:
```bash
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.
You may see older guides use `create-react-app`. That tool is no longer recommended. Use Vite for new projects.
## Understanding Project Structure
Open the `book-corner` folder in your code editor. You will see files like these:
```text
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.
);
`,
"App.tsx": `import "./App.css";
return (
Book Corner
Edit App.tsx and press Run to see your change.
);
}
`,
"App.css": `.app {
text-align: center;
padding: 16px;
}
`,
"index.css": `body {
background: #f8fafc;
}
`,
}}
/>
`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:
```bash
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:
```text
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.
Easy Way to Remember: **install** once (`npm install`), **dev** every day (`npm run dev`), **Ctrl + C** to stop.
## Common mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Running `npm run dev` before `npm install` | An error such as `vite: not found` or `'vite' is not recognized` | Run `npm install` first, then `npm run dev` |
| Running commands outside the project folder | An error that mentions `package.json` | Run `cd book-corner` first |
| Starting a component name with a small letter, such as `` | The component shows nothing | Start the name with a capital letter: `` |
| Closing the terminal while the app is running | The page stops loading in the browser | Run `npm run dev` again |
| Using a terminal that was open before Node.js was installed | `node` is not recognized | Close the terminal and open a new one |
| Editing files inside `node_modules` | Your changes disappear after the next `npm install` | Edit only the files inside `src/` |
## 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