Skip to main content

Introduction to React

React is an open-source JavaScript library developed by Meta (formerly Facebook) for building user interfaces. It is primarily used to build single-page applications (SPAs) where data changes over time without requiring a page reload.

Declarative Design​

Traditionally in JavaScript, developers use an imperative approach, manually selecting DOM elements and updating them step-by-step.

React uses a declarative paradigm. You describe what the UI should look like based on the current data state, and React automatically updates the DOM to match that description when the data changes.

The Virtual DOM​

Directly manipulating the browser's Document Object Model (DOM) is a slow operation. React solves this performance bottleneck by using a Virtual DOM.

  1. React creates a lightweight copy of the real DOM in memory.
  2. When component state changes, React updates the Virtual DOM first.
  3. It then compares the new Virtual DOM with a snapshot of the old Virtual DOM (a process called "diffing").
  4. Finally, it calculates the minimum number of changes required and updates only those specific nodes in the real DOM.

JSX Syntax​

JSX stands for JavaScript XML. It is a syntax extension that allows you to write HTML-like markup directly inside your JavaScript files.

// A simple React component utilizing JSX
function Hello() {
  const name = "React Developer";
  return <h1>Hello, {name}!</h1>;
}

Browsers cannot read JSX natively. During the build process, tools like Babel or swc compile the JSX down into standard React.createElement() JavaScript calls.