7 minutes·Lesson 1 of 6

What is React and Why Use It

What is React?

React is a JavaScript library for building user interfaces (UIs). It was created by engineers at Facebook (now Meta) in 2013 and is now maintained as an open-source project. React is the most widely used frontend library in the world and is a core skill for frontend developers in 2026.

React is not a framework — it is focused on one thing: building UI components. Everything else (routing, state management, data fetching) is handled by companion libraries.

The Problem React Solves

Imagine building a dashboard with vanilla JavaScript. When data changes, you manually find the right DOM (Document Object Model) elements and update them:

// Vanilla JS — you manage updates manually
function updateUserCount(count) {
  document.getElementById("user-count").textContent = count;
  document.querySelector(".badge").textContent = count > 99 ? "99+" : count;
  document.title = `(${count}) Dashboard`;
  // Miss one element and it's out of sync
}

This becomes unmanageable as the app grows. React solves this by letting you describe what the UI should look like for any given state, and React handles updating the DOM automatically and efficiently.

The Virtual DOM

React uses a virtual DOM — an in-memory representation of the real DOM. When your application state changes:

React creates a new virtual DOM tree
React compares it to the previous virtual DOM tree (a process called reconciliation or "diffing")
React calculates the minimal set of changes needed
React applies only those changes to the real DOM

This makes updates fast, especially for complex UIs with many interactive elements.

Component-Based Architecture

React applications are built from components — self-contained, reusable pieces of UI. Think of them like LEGO bricks: each has a defined shape and purpose, and you compose them to build larger structures.

App
├── Navbar
│   ├── Logo
│   └── NavLinks
├── Dashboard
│   ├── StatsCard
│   ├── StatsCard
│   └── ProgressChart
└── Footer

Each component manages its own appearance and behaviour. You can reuse StatsCard many times with different data, without duplicating code.

React vs Vanilla JavaScript

	Vanilla JavaScript	React
UI updates	Manual DOM manipulation	Automatic, state-driven
Code organisation	Functions and modules	Components
Reusability	Functions (limited)	Components (powerful)
Data flow	Manual synchronisation	Predictable, one-directional
Ecosystem	Browser APIs only	Rich library ecosystem

When to Use React

React is a great choice when:

Your UI has many interactive elements that change based on data
You need reusable UI components across multiple pages
Multiple parts of the UI need to stay in sync with shared data
You are joining a professional team (React is widely used in industry)

Vanilla JavaScript is fine for:

Simple landing pages with minimal interactivity
Small scripts and one-off interactions
Situations where load time is critical and no build step is desired

A Simple React Example (with CDN)

You can try React directly in a browser without any build tools:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function Greeting({ name }) {
      return <h1>Hello, {name}!</h1>;
    }

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(<Greeting name="Amara" />);
  </script>
</body>
</html>

In real projects, you use a build tool like Vite (which you will learn in Module 7) to set up a proper React development environment.

Key Takeaways

React is a JavaScript library for building user interfaces through reusable components
The virtual DOM makes updates efficient by calculating and applying only the minimum necessary changes
Component-based architecture makes large UIs manageable, testable, and reusable
React is state-driven — you describe what the UI should look like, and React handles the DOM updates
React excels at complex, interactive applications; vanilla JS is sufficient for simple pages

Practice Exercise

Look at the starter code and identify the two parts: the component function and the render call
Change the name prop passed to Greeting to your own name
Add a second paragraph inside Greeting that says "Welcome to CareerEx"
Create a second component called AppHeader that renders an <h1> with "CareerEx Learning Platform" and use it in the render call alongside Greeting

Try it yourself

Preview

Key Takeaways

React is a JavaScript library for building user interfaces using reusable components
The virtual DOM makes UI updates efficient by calculating the minimum changes before touching the real DOM
Components are the core building block — self-contained, reusable pieces of UI composed together to build complex pages
React is state-driven: you describe what the UI should look like and React handles updating the DOM automatically
React is best for complex interactive apps; vanilla JS is sufficient for simple static pages

Quick Quiz

1.What is the virtual DOM in React?

2.What is a React component?

3.Which statement best describes how React updates the UI when state changes?

4.In which scenario is React most beneficial over vanilla JavaScript?

← Local Storage, Session Storage, and Cookies Next: Components and JSX →

Ready to go further?

CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.

Join CareerEx

7 minutes·Lesson 1 of 6

What is React and Why Use It

What is React?

React is not a framework — it is focused on one thing: building UI components. Everything else (routing, state management, data fetching) is handled by companion libraries.

The Problem React Solves

Imagine building a dashboard with vanilla JavaScript. When data changes, you manually find the right DOM (Document Object Model) elements and update them:

// Vanilla JS — you manage updates manually
function updateUserCount(count) {
  document.getElementById("user-count").textContent = count;
  document.querySelector(".badge").textContent = count > 99 ? "99+" : count;
  document.title = `(${count}) Dashboard`;
  // Miss one element and it's out of sync
}

The Virtual DOM

React uses a virtual DOM — an in-memory representation of the real DOM. When your application state changes:

React creates a new virtual DOM tree
React compares it to the previous virtual DOM tree (a process called reconciliation or "diffing")
React calculates the minimal set of changes needed
React applies only those changes to the real DOM

This makes updates fast, especially for complex UIs with many interactive elements.

Component-Based Architecture

App
├── Navbar
│   ├── Logo
│   └── NavLinks
├── Dashboard
│   ├── StatsCard
│   ├── StatsCard
│   └── ProgressChart
└── Footer

Each component manages its own appearance and behaviour. You can reuse StatsCard many times with different data, without duplicating code.

React vs Vanilla JavaScript

	Vanilla JavaScript	React
UI updates	Manual DOM manipulation	Automatic, state-driven
Code organisation	Functions and modules	Components
Reusability	Functions (limited)	Components (powerful)
Data flow	Manual synchronisation	Predictable, one-directional
Ecosystem	Browser APIs only	Rich library ecosystem

When to Use React

React is a great choice when:

Your UI has many interactive elements that change based on data
You need reusable UI components across multiple pages
Multiple parts of the UI need to stay in sync with shared data
You are joining a professional team (React is widely used in industry)

Vanilla JavaScript is fine for:

Simple landing pages with minimal interactivity
Small scripts and one-off interactions
Situations where load time is critical and no build step is desired

A Simple React Example (with CDN)

You can try React directly in a browser without any build tools:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function Greeting({ name }) {
      return <h1>Hello, {name}!</h1>;
    }

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(<Greeting name="Amara" />);
  </script>
</body>
</html>

In real projects, you use a build tool like Vite (which you will learn in Module 7) to set up a proper React development environment.

Key Takeaways

React is a JavaScript library for building user interfaces through reusable components
The virtual DOM makes updates efficient by calculating and applying only the minimum necessary changes
Component-based architecture makes large UIs manageable, testable, and reusable
React is state-driven — you describe what the UI should look like, and React handles the DOM updates
React excels at complex, interactive applications; vanilla JS is sufficient for simple pages

Practice Exercise

Look at the starter code and identify the two parts: the component function and the render call
Change the name prop passed to Greeting to your own name
Add a second paragraph inside Greeting that says "Welcome to CareerEx"
Create a second component called AppHeader that renders an <h1> with "CareerEx Learning Platform" and use it in the render call alongside Greeting

Try it yourself

Preview

Key Takeaways

React is a JavaScript library for building user interfaces using reusable components
The virtual DOM makes UI updates efficient by calculating the minimum changes before touching the real DOM
Components are the core building block — self-contained, reusable pieces of UI composed together to build complex pages
React is state-driven: you describe what the UI should look like and React handles updating the DOM automatically
React is best for complex interactive apps; vanilla JS is sufficient for simple static pages

Quick Quiz

1.What is the virtual DOM in React?

2.What is a React component?

3.Which statement best describes how React updates the UI when state changes?

4.In which scenario is React most beneficial over vanilla JavaScript?

← Local Storage, Session Storage, and Cookies Next: Components and JSX →

Ready to go further?

CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.

Join CareerEx