Why React Exists

React is a UI library built around a declarative programming model. Instead of manually finding DOM nodes and describing every mutation, you describe what the UI should look like for a given state. React then determines the updates needed to bring the rendered result in line with that description.

The important distinction is between imperative DOM programming and declarative UI programming. In an imperative application you might select a button, change its text, toggle a class, and update an ARIA attribute independently. In React, those values are derived from state and props. When state changes, the component function runs again and produces a new UI description.

React is especially useful when an application has many pieces of state that interact: forms, filters, asynchronous data, permissions, optimistic updates, animations, and nested reusable components. The library gives you a consistent way to model those relationships.

React does not replace JavaScript fundamentals. Arrays, closures, modules, promises, event handling, browser APIs, accessibility, HTTP, and CSS remain essential. A strong React developer uses React as one layer in a larger web platform.

Mental model

Think of a component as a function from inputs and state to a UI description. Rendering is a calculation; DOM mutation is an implementation detail managed by React.

Declarative UI Flow

A tiny declarative component

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

<Greeting name="Suriya" />;

💡 The component does not find or modify the h1 directly. Its output is determined by the input prop.

Key Takeaways

React encourages describing UI from state rather than manually mutating DOM nodes.
A component render should be treated as a pure calculation.
Understanding JavaScript is a prerequisite for understanding React well.

Knowledge Check

What is the central idea behind React's declarative model?

Why React Exists

STAY UPDATED WITH BYTES!