What Is React? A Beginner's Guide to the Library Behind Most AI-Built Apps

Open the code of almost any AI-built web app and you'll find files ending in .jsx or .tsx, full of what looks like HTML inside JavaScript. That's React. It's the most widely used way to build web interfaces, which is exactly why AI tools reach for it: they've seen more React than anything else.

What React is

React is a JavaScript library for building user interfaces. It was created at Facebook and released as open source in 2013.

Its big idea: build your interface from components — self-contained pieces like a button, a product card, or a navigation bar — and describe what each one should look like for the current data. When the data changes, React updates the page for you.

React handles the interface only. Routing, data fetching, and the server are handled by other tools or by a framework built on React, like Next.js. (What Is Next.js? and What Is a Framework?.)

Components

A component is a JavaScript function that returns what to show:

function PlantCard() {
  return (
    <div className="card">
      <h2>Boston Fern</h2>
      <p>Water every 3 days</p>
    </div>
  )
}

That HTML-looking code inside JavaScript is JSX. It gets converted into ordinary JavaScript before it runs. A few differences from HTML trip people up: className instead of class, and every tag must be closed (<img />).

Components are used like tags, and nest inside each other:

function PlantList() {
  return (
    <div>
      <PlantCard />
      <PlantCard />
    </div>
  )
}

Your whole app is a tree of components. Each lives in its own file, usually named after it: PlantCard.jsx.

Props: passing data in

That card always shows the same fern. Props let the parent pass data in:

function PlantCard({ name, schedule }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Water every {schedule}</p>
    </div>
  )
}

<PlantCard name="Boston Fern" schedule="3 days" />
<PlantCard name="Cactus" schedule="3 weeks" />

Curly braces { } inside JSX mean "insert this JavaScript value here."

State: data that changes

State is data a component remembers and can change — whether a menu is open, what's typed in a box, a counter. When state changes, React re-draws the component.

import { useState } from "react"

function WaterButton() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Watered {count} times
    </button>
  )
}

useState(0) creates a piece of state starting at 0, and gives you the current value (count) and a function to change it (setCount). Never change state directly (count = count + 1) — React won't notice. Always use the setter.

Hooks

Functions starting with use are hooks. The two you'll see constantly:

useState — remember a value (above).
useEffect — run something after the component appears or when certain values change, like fetching data.

useEffect(() => {
  fetch("/api/plants")
    .then(res => res.json())
    .then(data => setPlants(data))
}, [])  // [] = only run once, when the component first appears

That array at the end — the dependency array — lists what should trigger the effect to run again. Getting it wrong is one of the most common React bugs.

Mistakes AI tools commonly make in React

Infinite loops. An effect that updates state, which triggers the effect, which updates state… The page freezes, or you see thousands of API requests in the Network tab. Usually a missing or wrong dependency array.
"Cannot read properties of undefined (reading 'map')". The code tries to loop over data before it has loaded. Fix: start with an empty array, or show a loading state until data arrives.
Missing key warnings. Lists need a unique key on each item: <PlantCard key={plant.id} ... />. Using the array index causes subtle bugs when items are reordered or deleted.
Secrets in components. Anything in a React component is sent to the browser, where anyone can read it. API keys belong on the server. (How to Keep API Keys Out of an AI-Built App.)
Giant components. One 800-line file that does everything. Ask your AI tool to split it into smaller components — it'll make every future change easier.

Do you need to learn React?

To build with AI tools, no — but recognising components, props, and state lets you read what was generated, point at the right file, and describe bugs precisely. That's a few hours of learning, and React's official tutorial at react.dev is excellent.

EasySpawn runs your React app — and the backend it talks to — in a persistent workspace with Claude Code, so it can see the running page and the server logs together when something breaks. See how it works or join the waitlist.