Introduction to React

Analogy categoryAnalogies

Introduction

React is an open-source JavaScript library for building user interfaces, maintained by Meta and a large community of individual developers and companies. Instead of manually manipulating the DOM to reflect changing data, React lets you describe what the UI should look like for any given state, and it takes care of updating the browser efficiently when that state changes.

🏏

Cricket analogy: React describing the desired UI for any given state is like a scorer just entering the current match state, runs, wickets, overs, and letting the digital scoreboard system figure out how to redraw itself, instead of manually repainting each digit.

React is often called a 'library' rather than a 'framework' because it focuses on one thing well: rendering UI from components. Routing, data fetching, and state management are typically handled by separate libraries (React Router, TanStack Query, Redux, etc.) or by meta-frameworks like Next.js that are built on top of React.

🏏

Cricket analogy: React being a focused library rather than a full framework is like a specialist fast bowler who does one job supremely well, while fielding, batting, and captaincy (routing, data fetching, state management) come from other specialist teammates like React Router or Redux.

How It Works

At its core, React applications are built from components: small, self-contained pieces of UI that accept inputs (called props) and return a description of what should appear on screen. Components can be composed together like building blocks to create complex interfaces, and each component can manage its own internal data, called state. When state or props change, React re-renders the affected components and efficiently updates the real DOM using its Virtual DOM diffing algorithm.

🏏

Cricket analogy: Components accepting props and returning UI, then re-rendering on change, is like a batter receiving a specific delivery (props) and playing a shot (state) that the scoreboard instantly updates via the Virtual DOM, without redrawing the entire board.

jsx

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Ava" />
      <Greeting name="Liam" />
    </div>
  );
}

Explanation

In the example above, Greeting is a functional component that accepts a name prop and returns JSX, a syntax extension that looks like HTML but is actually JavaScript. App is a parent component that renders two instances of Greeting with different prop values. Each component call produces its own independent output, which is a key idea in React: UIs are built by composing many small, reusable pieces.

🏏

Cricket analogy: Greeting accepting a name prop and App rendering two instances with different values is like a stadium announcer calling out two different batters' names using the same announcement template, each call producing its own independent output.

Example

jsx

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Output

Initially the button renders 'Clicked 0 times'. Every time the user clicks the button, React calls setCount, updates the component's internal state, and automatically re-renders the Counter component with the new value, so the button text updates to 'Clicked 1 times', 'Clicked 2 times', and so on, without any manual DOM manipulation.

🏏

Cricket analogy: Clicking the button and watching the count update from 0 to 1 to 2 is like the scoreboard operator pressing a button after each run, with setCount automatically recalculating and redisplaying the total without redrawing the whole board by hand.

React was designed to make building interactive, data-driven UIs predictable: given the same props and state, a component always renders the same output.

Key Takeaways

React is a JavaScript library for building user interfaces out of reusable components.
UI is described declaratively: you describe what the UI should look like for a given state, not how to mutate the DOM step by step.
Components accept props as input and can hold their own internal state.
React efficiently updates the real DOM by computing the minimal set of changes needed.