What is React?

React is a JavaScript library for building user interfaces. Developed by Facebook (now Meta) and released as open source in 2013, React has become one of the most widely used front-end tools in the world. It powers applications ranging from small side projects to large-scale platforms like Facebook, Instagram, and Airbnb.

The Core Idea: Declarative UI

Before React, developers typically manipulated the DOM directly — finding elements, updating their text, changing styles — a style known as imperative programming. React introduces a declarative model: you describe what the UI should look like for a given state, and React figures out how to update the DOM efficiently.

Instead of writing "find the button, change its text to Loading, disable it", you write a component that says "if loading is true, render a disabled button that says Loading". React handles the rest.

The Virtual DOM

One of React's key innovations is the virtual DOM. When your application's state changes, React first updates a lightweight in-memory representation of the DOM, then compares it to the previous version (a process called reconciliation), and finally applies only the minimal set of real DOM changes needed. This makes updates fast even in complex UIs.

React is a Library, Not a Framework

React is intentionally focused on the view layer. It does not dictate how you handle routing, data fetching, or styling. This flexibility means you choose the best tools for your project. Popular companions include React Router for navigation and libraries like TanStack Query for server state.

Why Learn React?

• Component-based: UIs are broken into reusable, composable pieces.
• Large ecosystem: Thousands of community packages, extensive documentation, and massive job demand.
• React Native: The same mental model extends to building native mobile apps.
• Gradual adoption: You can add React to a small part of an existing page or build an entire application from scratch.

A Minimal React Application

A React app starts with a root element in HTML and a JavaScript entry point:

// index.jsx
import React from "react";
import { createRoot } from "react-dom/client";

function App() {
  return <h1>Hello, React!</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);

The createRoot API mounts the React tree into the DOM element with id root. Everything inside that tree is managed by React.

React Versions

React has evolved significantly over time. The introduction of Hooks in React 16.8 transformed how developers write components, replacing most class-based patterns with simpler function-based ones. React 18 introduced concurrent features such as automatic batching and the Suspense model for data loading. This course focuses on modern React using function components and Hooks throughout.

Understanding what React is and why it exists gives you the right mental model before diving into syntax. React is not magic — it is a well-designed abstraction over the DOM that helps you think in components and state.