Introduction to React

Introduction

Modern web applications need to update the screen constantly — showing a new chat message, updating a shopping cart total, or reacting to a button click — all without reloading the whole page. Before React, keeping the on-screen HTML in sync with your data was something you had to manage by hand, and it got messy fast as applications grew.

React is a JavaScript library built specifically to make this kind of dynamic, constantly-changing UI manageable. It has become the most widely used tool for building user interfaces on the web, and this lesson introduces exactly what it is, the core ideas behind it, and why so many companies and developers rely on it.

What is React?

React is a JavaScript library for building user interfaces, created by Jordan Walke at Facebook (now Meta) and open-sourced in 2013. It is deliberately not a full framework — it does not ship with built-in routing, HTTP requests, or a specific project structure. Instead, React focuses on one job: letting you build UIs out of small, reusable, composable pieces called components.

Because React only handles the "view" layer, it is commonly paired with other tools — a router, a data-fetching library, and sometimes a state-management library — to build a complete application. This flexibility is one reason React has stayed popular across so many different kinds of projects.

Declarative vs Imperative UI

Before React, updating the DOM with plain JavaScript or jQuery usually meant writing imperative code: step-by-step instructions describing exactly how to find an element and change it. React instead encourages a declarative style: you describe the end result, and React works out the steps.

Notice the React version never manually selects an element or reassigns textContent. It simply says "the button's text is Count: {count}" — and whenever count changes, React takes care of updating the real DOM for you.

The Virtual DOM

Directly manipulating the browser's real DOM is relatively slow, especially when many things change at once. React keeps a lightweight, in-memory copy of the UI called the Virtual DOM. Whenever your data changes, React builds a new Virtual DOM tree, compares ("diffs") it against the previous one, and updates only the specific parts of the real DOM that actually changed.

State changes (e.g. setCount is called)
        ↓
React builds a new Virtual DOM tree
        ↓
React "diffs" it against the previous Virtual DOM
        ↓
React calculates the minimal set of real DOM changes
        ↓
Only the changed parts are updated in the browser

Why Components Matter

Instead of writing one giant HTML file, React encourages you to break the UI into independent, reusable components — a button, a card, a navbar, a whole page — each managing its own logic, data, and appearance.

Where React Is Used

React was built at Facebook to solve real problems at massive scale, and it has since spread far beyond social media.

Example: A First Look at React Code

You do not need to understand every detail yet — this is just a preview. Notice how the markup (JSX) and the logic (JavaScript) live together in one function.

function App() {
  const framework = "React";

  return (
    <div>
      <h1>Hello from {framework}!</h1>
      <p>This UI is built from small, reusable components.</p>
    </div>
  );
}

export default App;

Hello from React!
This UI is built from small, reusable components.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

React gives you a declarative, component-based way to build user interfaces, backed by a Virtual DOM that keeps updates fast even as an application grows. Rather than manually tracking every DOM change, you describe what the UI should look like, and React handles the rest.

In this lesson, you learned what React is, how it differs from imperative DOM manipulation, why the Virtual DOM matters, and where React is used in the real world. Next, you will dig into the history behind React and the exact problems it was built to solve.