What is React?

Learning Objectives

By the end of this lesson, you will be able to:

1. Define React in simple and technical terms.
2. Explain why React is called a UI library.
3. Understand the problems React is designed to solve.
4. Explain the declarative programming model.
5. Understand React's component-based architecture.
6. Understand how state drives UI rendering.
7. Explain the relationship between React, React DOM, and the browser.
8. Understand the role of JSX.
9. Understand React's rendering and reconciliation concepts.
10. Distinguish React from frameworks such as Next.js.
11. Understand what React does not provide.
12. Understand React's role in enterprise frontend architecture.
13. Understand modern React and the React 19.x generation.
14. Identify common misconceptions about React.
15. Explain React confidently in beginner, senior, and architect-level interviews.

Introduction

If someone asks you:

"What is React?"

the common answer is:

"React is a JavaScript library for building user interfaces."

That answer is correct.

But if you're preparing to become a Senior React Developer, Technical Lead, Staff Engineer, or Frontend Architect, that answer is not enough.

You need to understand:

What is React?
       ↓
Why was it created?
       ↓
What problem does it solve?
       ↓
How does it solve that problem?
       ↓
What does React actually manage?
       ↓
What does React NOT manage?
       ↓
Where does React fit in an application?

The official React documentation currently describes React as a library for web and native user interfaces and emphasizes building interfaces from reusable components.

So let's go deeper.

What Is React?

Simple Definition

React is a JavaScript library for building user interfaces using reusable components.

For example:

function Welcome() {
  return <h1>Welcome to TechLearningPro</h1>;
}

This is a React component.

You can combine components:

function App() {
  return (
    <>
      <Header />
      <CourseList />
      <Footer />
    </>
  );
}

Conceptually:

                 App
                  │
       ┌──────────┼──────────┐
       ▼          ▼          ▼
    Header     CourseList   Footer
                   │
             ┌─────┼─────┐
             ▼     ▼     ▼
          Course Course Course
           Card   Card   Card

This component model is the foundation of React.

The Technical Definition

A more precise engineering definition is:

React is a declarative UI library that provides a component model and rendering architecture for building interactive user interfaces from application state.

There are several important words in this definition.

Declarative

You describe what the UI should look like.

Component

The UI is divided into reusable building blocks.

Rendering

React determines how the component tree should be represented in the target environment.

State

The UI can change as application data changes.

So conceptually:

                 Application State
                         │
                         ▼
                  React Components
                         │
                         ▼
                   UI Description
                         │
                         ▼

Rendering

                         │
                         ▼
                    User Interface

What Problem Does React Solve?

React was not created because HTML was incapable of creating websites.

It was created to make complex interactive user interfaces easier to reason about.

Imagine a simple e-commerce application.

The page contains:

Header
│
├── Search
├── Login
└── Cart
       │
       └── Item Count

Product List
│
├── Product
├── Product
└── Product

Checkout
│
├── Address
├── Payment
└── Order Summary

Now the user performs an action.

User adds product
       │
       ├── Cart count changes
       ├── Cart contents change
       ├── Total price changes
       ├── Checkout summary changes
       └── Notification appears

The challenge is keeping the UI consistent with the underlying data.

React provides a structured model for this.

State Changes
     │
     ▼
React Rendering
     │
     ▼
Updated UI Description
     │
     ▼
Required UI Changes

The developer primarily models state and UI relationships, instead of manually coordinating every DOM mutation.

React's Core Idea

The most useful mental model is:

UI = f(State)

In simple terms:

For a given state, the application should produce the appropriate UI.

For example:

function LoginButton({
  loggedIn
}: {
  loggedIn: boolean;
}) {
  return (
    <button>
      {loggedIn ? "Logout" : "Login"}
    </button>
  );
}

If:

loggedIn = false

the UI is:

[ Login ]

If:

loggedIn = true

the UI becomes:

[ Logout ]

We didn't manually tell the browser:

Find button
      ↓
Change text
      ↓
Update DOM

We described the UI based on state.

That's the essence of declarative UI.

Imperative vs Declarative

Understanding this difference is extremely important.

Imperative Approach

Imagine using plain DOM APIs:

const button = document.querySelector("#login");
if (loggedIn) {
  button.textContent = "Logout";
} else {
  button.textContent = "Login";
}

The code tells the browser how to change the interface.

Find DOM element
      ↓
Inspect state
      ↓
Modify DOM
      ↓
Modify another DOM element
      ↓
Modify another DOM element

As the application grows, this coordination can become difficult.

Declarative React Approach

React lets you express the relationship directly:

function LoginButton({
  loggedIn
}: {
  loggedIn: boolean;
}) {
  return (
    <button>
      {loggedIn ? "Logout" : "Login"}
    </button>
  );
}

The mental model becomes:

loggedIn
   │
   ▼
React Component
   │
   ▼
UI Description

This does not mean React eliminates complexity.

Instead, it gives developers a consistent abstraction for managing UI complexity.

React Is Component-Based

The second fundamental idea is the component.

A component represents a piece of the interface.

For example:

function Header() {
  return (
    <header>
      <h1>TechLearningPro</h1>
    </header>
  );
}

Another component:

function CourseCard() {
  return (
    <article>
      <h2>React Mastery</h2>
      <p>Learn React from fundamentals to architecture.</p>
    </article>
  );
}

Then:

function HomePage() {
  return (
    <>
      <Header />
      <CourseCard />
      <CourseCard />
      <CourseCard />
    </>
  );
}

React's own documentation describes components as the building blocks used to construct interfaces, and modern React documentation teaches function components and Hooks as the primary model.

Component Composition

The real power isn't simply creating components.

It's composing them.

For example:

Application
     │
     ▼
HomePage
     │
 ┌───┼───────────────┐
 ▼   ▼               ▼
Header Hero      CourseSection
                   │
            ┌──────┼──────┐
            ▼      ▼      ▼
        CourseCard CourseCard CourseCard

Each component has a responsibility.

This allows developers to build large interfaces from smaller pieces.

React Component Tree

A real application might look like:

App
│
├── Header
│   ├── Logo
│   ├── Navigation
│   ├── Search
│   └── UserMenu
│
├── Main
│   ├── Hero
│   ├── CourseFilters
│   └── CourseList
│       ├── CourseCard
│       ├── CourseCard
│       └── CourseCard
│
└── Footer

This is a component tree.

Understanding this tree becomes essential when we later study:

props state context rendering reconciliation performance component architecture

React and State

Components become truly powerful when they respond to changing data.

Consider a course:

React Mastery Progress: 60%

The learner completes another lesson.

Now:

Progress: 65%

React allows the UI to be represented based on that state.

For example:

function Progress({
  percentage
}: {
  percentage: number;
}) {
  return (
    <div>
      <p>{percentage}% Complete</p>
      <progress
        value={percentage}
        max={100}
      />
    </div>
  );
}

When:

percentage = 60

the component represents 60%.

When:

percentage = 65

it represents 65%.

The UI follows the data.

React and Props

Components can receive data through props.

function CourseCard({
  title,
  level
}: {
  title: string;
  level: string;
}) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{level}</p>
    </article>
  );
}

Usage:

<CourseCard
  title="React Mastery"
  level="Advanced"
/>

Conceptually:

Parent
  │
  │ props
  ▼
CourseCard
  │
  ▼
UI

This creates predictable relationships between components.

React and JSX

React applications frequently use JSX.

function Course() {
  return (
    <section>
      <h1>React Mastery</h1>
      <p>Learn modern React.</p>
    </section>
  );
}

The HTML-like syntax is JSX.

But JSX is not HTML.

It is a JavaScript syntax extension that allows developers to describe UI alongside their component logic.

The React documentation explicitly describes JSX as a JavaScript syntax extension popularized by React.

We'll cover JSX in a dedicated lesson.

React Rendering

Now we reach an important engineering concept.

Suppose:

Initial state
     │
     ▼
React component
     │
     ▼
Render
     │
     ▼
Commit
     │
     ▼
Browser DOM

Later:

User interaction
       │
       ▼
State update
       │
       ▼
React schedules work
       │
       ▼
Render
       │
       ▼
Reconciliation
       │
       ▼
Commit
       │
       ▼
Browser DOM

The React documentation describes rendering as a process involving triggering a render, rendering components, and committing changes to the DOM.

This distinction is important:

A React render does not mean the entire browser DOM is recreated.

We'll explore this deeply in the rendering and reconciliation lessons.

What Is the Virtual DOM?

You will frequently hear:

"React uses the Virtual DOM."

That's not completely wrong, but it is an oversimplification.

A better explanation is:

React maintains an internal representation of the UI and uses its rendering and reconciliation mechanisms to determine what work needs to be committed to the target environment.

Therefore, don't define React as:

React = Virtual DOM

Instead:

React
 │
 ├── Components
 ├── State
 ├── Rendering
 ├── Scheduling
 ├── Reconciliation
 └── Commit

The Virtual DOM is useful terminology, but it shouldn't become your entire mental model of React.

React and React DOM

This distinction is important.

react

Provides the core React APIs and programming model.

Components Hooks APIs Rules of React

react-dom

Provides web/browser-specific functionality.

React
  │
  ▼
React DOM
  │
  ▼
Browser DOM

The current React reference documentation explicitly separates React APIs from React DOM APIs, with react-dom/client providing client rendering APIs and react-dom/server providing server rendering APIs.

React Is Not the Same as React DOM

This is a common interview question.

If I say:

"React renders to the DOM."

that's conceptually fine.

But technically:

React
  │
  │ UI model
  ▼
React DOM
  │
  │ browser integration
  ▼
DOM

React's architecture is broader than just browser DOM manipulation.

This distinction also becomes important when studying:

React Native server rendering server components custom renderers

React Is Not a Complete Application Framework

This is one of the most important things to understand.

React gives you the UI layer.

It does not automatically prescribe:

Routing Data fetching Database Backend Authentication Authorization Deployment

The official React website explicitly describes React as a library and recommends using a full-stack React framework such as Next.js or React Router when building an entire application.

Conceptually:

                 React
                   │
           UI / Components
                   │
       ┌───────────┼───────────┐
       ▼           ▼           ▼
   Routing      Data       State
       │           │           │
       ▼           ▼           ▼
   Router       Query      State Library

These are ecosystem decisions.

React vs Next.js

Let's make the distinction very clear.

React

UI Library

Provides:

components hooks rendering model state-related primitives UI APIs

Next.js

React Framework

Can provide broader application capabilities such as:

routing server rendering server components server-side functionality caching application conventions

Therefore:

React

   │
   └── UI foundation

Next.js

   │
   └── Application framework built around React

Never say:

"React is a framework like Angular."

A stronger answer is:

"React is primarily a UI library, while Angular is a more opinionated application framework. React applications commonly rely on additional libraries or frameworks for routing, data fetching, and other application concerns."

React and the Browser

React doesn't replace the web platform.

A production React application still depends on:

HTML CSS JavaScript DOM Browser APIs HTTP Accessibility APIs Storage Web Workers WebSockets

Conceptually:

                  Browser
                     │
       ┌─────────────┼─────────────┐
       ▼             ▼             ▼
     HTML           CSS       JavaScript
       │             │             │
       └─────────────┼─────────────┘
                     ▼
                   React
                     │
                     ▼
              Application UI

A strong React developer must understand JavaScript and the browser—not just React APIs.

React and TypeScript

React works very well with TypeScript.

For example:

interface Course {
  id: string;
  title: string;
  level: "Beginner" | "Intermediate" | "Advanced";
}

interface CourseCardProps {
  course: Course;
}

function CourseCard({
  course
}: CourseCardProps) {
  return (
    <article>
      <h2>{course.title}</h2>
      <p>{course.level}</p>
    </article>
  );
}

The component now has a clear contract.

Course
   │
   ▼
CourseCardProps
   │
   ▼
CourseCard

This becomes increasingly valuable as applications and teams grow.

Modern React

React is continuously evolving.

The current stable React release is React 19.2. The React team released React 19.2 on October 1, 2025.

React 19 introduced features including Actions and improvements around forms and asynchronous workflows.

React 19.2 added capabilities including:

<Activity /> useEffectEvent cacheSignal React Performance Tracks Partial Pre-rendering in React DOM

Therefore, this course should use modern React practices rather than treating older React patterns as the default.

React Compiler

Modern React also includes another important development: the React Compiler.

The official React documentation describes React Compiler as a build-time optimization tool that can automatically memoize components and values.

This is important because traditional React performance discussions often focus heavily on:

React.memo useMemo useCallback

But modern React development is increasingly moving toward compiler-assisted optimization.

That does not mean:

"You never need to understand memoization."

You still need to understand:

rendering state boundaries component design expensive calculations referential equality performance measurement

The compiler changes how some optimizations can be applied; it doesn't remove the need for architectural thinking.

React's Core Architecture

A simplified React architecture looks like:

                     Application
                         │
                         ▼
                  React Components
                         │
              ┌──────────┴──────────┐
              ▼                     ▼
             Props                State
              │                     │
              └──────────┬──────────┘
                         ▼
                    Render Output
                         │
                         ▼
                  React Rendering
                         │
                         ▼
                    Reconciliation
                         │
                         ▼
                       Commit
                         │
                         ▼
                   Host Environment
                         │
                         ▼
                       Browser

This is a conceptual architecture, not an implementation diagram.

The exact internals are more sophisticated.

But this model gives you the correct foundation.

Real-World Example — TechLearningPro

Suppose a learner opens:

https://techlearningpro.com/react/course

The user sees:

React Mastery
────────────────────────────

Progress: 72%

[Continue Learning]

Modules
├── Fundamentals       ✓
├── Components         ✓
├── Hooks              ✓
├── Routing            ✓
├── State Management   60%
└── Architecture       0%

Internally, we can think of:

Server Data
     │
     ▼
Course Information
     │
     ▼
React Components
     │
 ┌───┼────────────────┐
 ▼   ▼                ▼
Header Progress     Modules
        │               │
        ▼               ▼
     State          Course Data
        │               │
        └───────┬───────┘
                ▼
             UI

If the learner completes a lesson:

Lesson Completed
       │
       ▼
API Request
       │
       ▼
Server Updates Progress
       │
       ▼
Client Receives Updated Data
       │
       ▼
React State/Data Changes
       │
       ▼
Components Render
       │
       ▼
UI Reflects New Progress

This is the type of problem React is designed to make easier.

What React Does Well

React is particularly strong at:

1. Component composition

Building large interfaces from reusable pieces.

2. Declarative UI

Describing UI based on application data.

3. Interactive applications

Handling changing UI state.

4. Incremental adoption

React can be introduced into an existing page rather than requiring an entire application to be rewritten. The official installation documentation explicitly supports adding React to existing projects.

5. Ecosystem flexibility

Teams can choose supporting technologies according to application requirements.

6. Large-scale development

React's component model can work across applications with many developers and teams.

The React homepage specifically highlights that components can be combined across independent people, teams, and organizations.

What React Does Not Solve

React does not automatically solve:

Database design
       ✗

Backend architecture
       ✗

Business logic
       ✗

Authentication
       ✗

Authorization
       ✗

Network architecture
       ✗

Deployment
       ✗

Observability
       ✗

You need additional architectural decisions.

For example:

React
  │
  ├── Router
  ├── State Management
  ├── Data Fetching
  ├── Form Library
  ├── Validation
  ├── Testing
  └── Framework

A good engineer understands where each responsibility belongs.

Performance Considerations

React is not automatically fast.

Consider:

10,000 course cards
        │
        ▼
Large component tree
        │
        ▼
Expensive rendering
        │
        ▼
Poor user experience

The solution may involve:

Pagination Virtualization Code splitting Lazy loading Better state placement Caching Memoization Server-side strategies

But don't immediately apply all of them.

The professional approach is:

Measure
   ↓
Identify bottleneck
   ↓
Understand root cause
   ↓
Optimize
   ↓
Measure again

Security Considerations

React does not make your application secure automatically.

For example:

{user.isAdmin && (
  <button>Delete Course</button>
)}

This controls the UI.

It does not protect the API.

A malicious user could still call:

DELETE /api/courses/123

Therefore:

UI Permission
      ≠
API Authorization

The backend must enforce authorization.

Other security concerns include:

XSS CSRF CORS authentication token storage secure cookies Content Security Policy dependency vulnerabilities

These will be addressed in the security section of the course.

Accessibility

React applications should use the capabilities of the web platform correctly.

Good:

<button onClick={handleSave}>
  Save
</button>

Less appropriate:

<div onClick={handleSave}>
  Save
</div>

The semantic element provides better:

keyboard behavior accessibility semantics browser integration screen-reader support

React does not remove the responsibility of building accessible web applications.

Common Mistakes

Mistake 1: Saying "React is a framework"

Better:

React is a UI library.

Mistake 2: Saying "React is the Virtual DOM"

Better:

React provides a declarative component and rendering model; the Virtual DOM is only one part of the traditional mental model used to explain its rendering approach.

Mistake 3: Thinking React replaces JavaScript

React is built on JavaScript.

Strong React developers need strong JavaScript fundamentals.

Mistake 4: Putting every value into state

Not every value needs state.

Derived values should usually be calculated.

Mistake 5: Using global state for everything

Global state adds complexity.

Keep state local when possible.

Mistake 6: Assuming React handles backend security

It doesn't.

Backend authorization remains mandatory.

Mistake 7: Optimizing without measuring

Don't automatically add:

useMemo useCallback React.memo

without understanding whether they solve an actual problem.

Mistake 8: Treating Next.js as React

Next.js is a framework built around React.

Mistake 9: Learning only JSX

Knowing JSX does not mean knowing React.

You also need to understand:

State Props Rendering Effects Data flow Architecture Performance Testing Security

Mistake 10: Learning only old React

Modern React has evolved significantly.

The official React documentation now teaches modern function components and Hooks, while legacy APIs are explicitly identified as APIs not recommended for newly written code.

Best Practices

For production React development:

• Think in components.
• Keep components focused.
• Prefer declarative UI.
• Keep state close to where it belongs.
• Avoid unnecessary global state.
• Separate server state from client state.
• Prefer TypeScript for large applications.
• Use semantic HTML.
• Design for accessibility.
• Avoid unnecessary effects.
• Measure performance before optimizing.
• Understand the browser platform.
• Keep API logic appropriately separated from presentation.
• Organize large applications around features or domains.
• Establish clear dependency boundaries.
• Avoid premature abstraction.
• Avoid giant components.
• Keep business rules out of presentation code where appropriate.
• Understand the React version used by your project.
• Keep React and related dependencies updated.

Enterprise Architecture Example

Imagine TechLearningPro eventually has:

                     TechLearningPro
                            │
             ┌──────────────┼──────────────┐
             ▼              ▼              ▼
          Learning        Commerce       Identity
             │              │              │
             ▼              ▼              ▼
          Courses        Payments        Users
             │              │              │
             └──────────────┼──────────────┘
                            ▼
                      React Platform
                            │
          ┌─────────────────┼──────────────────┐
          ▼                 ▼                  ▼
      Components          State             Routing
          │                 │                  │
          ▼                 ▼                  ▼
      Design System    Client/Server       Navigation
                            State
          │                 │
          └─────────────────┘
                    │
                    ▼
                 APIs
                    │
                    ▼
              Backend Services

At this level, React is no longer simply about writing:

function Button() {}

It becomes an architectural platform for building a large frontend.

Senior Engineer Perspective

A junior developer might ask:

"How do I create a component?"

A mid-level developer might ask:

"How should I pass data between components?"

A senior developer might ask:

"Where should this state live?"

A Staff Engineer might ask:

"How should we establish frontend boundaries so multiple teams can work independently?"

An architect might ask:

"How will this frontend architecture scale over the next five years?"

Same technology.

Different level of thinking.

Interview questions & answers

Final Mental Model

If someone asks you:

"What is React?"

you should not think only:

React = JavaScript Library

Think:

                         REACT
                           │
            ┌──────────────┼──────────────┐
            ▼              ▼              ▼
       Components       State         Rendering
            │              │              │
            └──────────────┼──────────────┘
                           ▼
                    Declarative UI
                           │
                           ▼
                  Interactive Application

And around React:

                       React
                         │
       ┌─────────────────┼─────────────────┐
       ▼                 ▼                 ▼
    Routing         Data Fetching      State
       │                 │                 │
 React Router       Query Library     State Library
       │                 │                 │
       └─────────────────┼─────────────────┘
                         ▼
                  Application Architecture
                         │
                         ▼
                       APIs
                         │
                         ▼
                    Backend

That is the real picture.

Next Lesson

Next: React Installation / Getting Started

Now that we understand what React is, the next logical question is:

How do we actually start a modern React project?

We will cover:

React
  │
  ├── Installation
  ├── Node.js
  ├── Package Manager
  ├── Project Creation
  ├── Vite
  ├── React Frameworks
  ├── Project Structure
  ├── Entry Point
  ├── React Root
  └── First Component

We will also explain the modern approach to starting React applications, including why Create React App is deprecated and when you should choose a framework versus building a React application from scratch.