What Is React

Written by Swapnil RajaPublished 29 Aug 2026

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.

A component, rendered

jsx

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

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

NextHow React Thinks

The same counter, both ways

jsx

// 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 />)

What Is React

The one idea

What it replaces

What React does not do

When not to use it