What Is React

React is a library for describing what should be on screen. You never write the steps to update the page - you describe the result, and React works out the difference.

The one idea

A React app is a tree of components. A component is a function that takes data and returns a description of some UI. When the data changes, React runs the function again and updates only the parts of the page that actually differ.

That is genuinely the whole model. Everything else - props, state, hooks, context - exists to serve it.

function Hello() {
  return <h2>Hello from a component</h2>
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Hello />)

Hello is an ordinary JavaScript function. The angle brackets are JSX, which compiles to a normal function call - the next section takes that apart.

What it replaces

Without React you tell the browser how to change: find the element, read it, write to it, and remember every other thing that depended on it. Miss one and the screen disagrees with your data.

// Plain DOM: you write the update steps yourself.
const box = document.createElement("div")
let plainCount = 0
box.innerHTML = '<b>Plain:</b> <span id="n">0</span> '
const bump = document.createElement("button")
bump.textContent = "Add"
bump.onclick = () => {
  plainCount++
  document.getElementById("n").textContent = plainCount
}
box.appendChild(bump)
document.body.insertBefore(box, document.getElementById("root"))

// React: you describe the result for the current state.
function Counter() {
  const [count, setCount] = React.useState(0)
  return (
    <div>
      <b>React:</b> {count}{" "}
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Counter />)

Both work. The difference shows up at scale: the plain version needs a new line of update code for every place the value appears, and the React version does not change at all.

What React does not do

• Routing - moving between pages is a separate library, or a framework like Next.js.
• Data fetching - React has no opinion; you use fetch or a data library.
• Styling - plain CSS, CSS modules and Tailwind all work. React does not care.
• State management - beyond its own hooks, anything larger is a separate choice.

This surprises people who expect a framework. React is deliberately small: it renders components and manages their state, and everything else is yours to pick.

When not to use it

A page with no interactivity does not need React. A blog post, a marketing page, a form that posts and reloads - plain HTML and a little JavaScript will be faster to build and faster to load.

React earns its cost when the same data appears in several places and changes over time. If nothing on your page changes after load, you are paying for a library you are not using.