What is React and why use it over plain JavaScript

What is React?

React is a JavaScript library for building user interfaces. It lets you describe what your UI should look like, and React handles updating the DOM when your data changes.

With vanilla JS, you imperatively manipulate the DOM — document.getElementById, innerHTML, event listeners. React flips this: you declare the desired output, and React figures out the minimal DOM changes needed.

The Virtual DOM

React keeps an in-memory copy of the DOM called the Virtual DOM. When state changes, React diffs the new Virtual DOM against the old one, then applies only the changed nodes to the real DOM. This batching and diffing makes updates fast.

Component-Based Architecture

React UIs are built from components — reusable, self-contained pieces. A button, a form, a page — all components. This means you write a piece of UI once and reuse it anywhere.

// Vanilla JS — imperative
const btn = document.createElement('button');
btn.textContent = 'Click me';
btn.addEventListener('click', () => alert('clicked'));
document.body.appendChild(btn);

// React — declarative
function Button() {
  return (
    <button onClick={() => alert('clicked')}>
      Click me
    </button>
  );
}

React is the right choice when your UI has dynamic, interactive data that changes over time. For static pages, plain HTML/CSS is simpler and faster.