What Is React and What Is It Used For?

React is a JavaScript library for building user interfaces out of reusable components. You reach for it when a page needs to change state without a full reload — feeds, dashboards, editors, shopping carts — and you want to describe those changes declaratively instead of hand-editing the DOM. It handles the view layer only; routing, data fetching, and build tooling come from other libraries or a framework like Next.js.

The core ideas

Components

A component is a function that returns markup. You compose small ones into larger ones, which is why React scales from a button to a whole application.

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

JSX

JSX is the HTML-like syntax inside JavaScript. It compiles to plain function calls, so it is not a template language you have to learn separately — expressions, loops, and conditionals are just JavaScript.

Props and state

• Props are inputs passed down from a parent. They are read-only inside the component.
• State is data a component owns and can change. Changing state re-renders that component and its children.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

The mental model: UI is a function of state. You update the data, React works out the minimal DOM changes.

What people build with it

How React relates to Next.js and other tools

React is the library; Next.js is a framework built on top of it that adds routing, server rendering, and data fetching. The distinction matters when you pick a starting point:

• Plain React (via a bundler like Vite) — you assemble routing and rendering yourself. Good for SPAs and learning the fundamentals.
• Next.js — file-based routing and server-side rendering out of the box. Good for sites where SEO and first-load speed matter.

Both are common in the same stack. For example, a site can be built on Next.js for routing and rendering while a headless CMS handles content editing — TinaCMS, for instance, describes itself as adding real-time visual editing to React websites and stores content as Markdown in a Git repo, which keeps the content portable and readable by other tools.

Starting a React app

The fastest path is a scaffolding tool. With Vite:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Expected result: a dev server starts (Vite prints the local URL, typically http://localhost:5173) and you see the default page. Edit src/App.jsx, save, and the browser updates without a manual refresh.

If you want a content-driven site instead, TinaCMS documents a one-command start:

npx create-tina-app@latest my-blog

That scaffolds a Markdown repository ready for editing. Note that TinaCMS publishes a pricing page, so check current terms there rather than assuming the hosted editing experience is free — the open-source toolkit and any paid tiers are separate questions.

Common sticking points

• State updates look asynchronous. Reading count right after setCount gives the old value. Use the updater form (setCount(c => c + 1)) when the next value depends on the previous one.
• Mutating props or state directly. React compares references; mutate an array in place and it may not re-render. Create a new array or object instead.
• Reaching for global state too early. Most sharing is solved by lifting state to a common parent. Add a state library only when prop drilling becomes the actual problem.
• Confusing React with the whole app. React renders the view. Persistence, auth, and content live elsewhere — decide those separately.

Choosing whether to use it

Pick React when your interface has meaningful interactive state and you want a component model that a large ecosystem supports. Skip it for mostly static pages where plain HTML and a little JavaScript are simpler, or when a server-rendered framework alone already covers your needs. If you are already on Next.js, you are already using React — the remaining decision is where your content lives, not whether to adopt the library.