What is React & Why Use It?

React is a JavaScript library for building user interfaces, created by Facebook (Meta) in 2013. Instead of manually updating the DOM when data changes, you describe what the UI should look like for a given state, and React figures out how to update the screen efficiently.

The core idea: UI as a function of state

UI = f(state)

Whenever state changes, React re-runs your component function and updates only the parts of the real DOM that actually changed, using a lightweight in-memory representation called the Virtual DOM.

Why React became popular

• Component-based — build encapsulated pieces (Button, Card, Navbar) and compose them into full pages.
• Declarative — you describe the end result, not the step-by-step DOM manipulation.
• Reusable — the same component can be used in many places with different props.
• Huge ecosystem — routing, state management, forms, testing, meta-frameworks (Next.js, Remix) all build on top of React.
• Learn once, write anywhere — React Native, React Three Fiber, React PDF all reuse the same mental model.

React vs plain JavaScript (DOM manipulation)

// Plain JS: manual, error-prone as the app grows
const btn = document.getElementById('counter');
let count = 0;
btn.addEventListener('click', () => {
  count++;
  btn.textContent = `Clicked ${count} times`;
});

// React: declarative, state drives the UI automatically
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

React vs Angular vs Vue (in one line each)

Library/Framework	Type	Learning curve	Notes
React	UI library	Moderate	Just the view layer; pick your own router/state
Angular	Full framework	Steep	Batteries included, opinionated, TypeScript-first
Vue	Progressive framework	Gentle	Template-based, official router/state included

What React is not

React alone is not a full framework — it has no built-in routing, no built-in data fetching, and no built-in styling solution. Meta-frameworks like Next.js and Remix add those on top of React.