Guides / Concepts explained

What Is React? A Plain-English Guide for Non-Developers

React is a JavaScript library for building user interfaces from reusable components. How components, props and state work, and why AI builders use it so often.

Mythex Team · 2026-09-29 · 6 min read

React is a JavaScript library for building user interfaces — the part of an app people see and click. You build screens out of reusable pieces called components, such as a button, a product card or a whole page, and React keeps the screen in sync with your data: when the data changes, React updates the parts of the page that depend on it. It was created at Facebook (now Meta), is open source, and is one of the most widely used ways to build web apps.

Why it matters when you build with AI

If you build a web app with an AI tool, there's a good chance it's written in React. Many AI app builders use React by default, because it's popular, well documented, and there's a vast amount of React code for AI models to have learned from.

You don't need to write React to build with AI. But knowing a little helps you:

• Describe changes precisely. "Change the ProductCard component so the price is bold" is clearer than "make prices stand out somewhere".
• Understand errors. Messages like "Cannot read properties of undefined" or "Too many re-renders" make more sense.
• Make sensible choices. Plain React apps render in the browser, which affects search visibility and first-load speed. Knowing that helps you decide when to ask for a different setup.
• Work with developers later. React is a common skill, so a developer can usually pick up a React codebase.

An everyday analogy

Think of LEGO. Instead of carving a whole model from one block, you build it from standard bricks. A few bricks make a wheel; four wheels and some other parts make a car. If you want every car to have red wheels, you change the wheel design once.

React components are the bricks. A Button component is used inside a ProductCard, which is used inside a ProductGrid, which is part of the ShopPage. Change Button once, and every button in the app changes.

The other half of the analogy: imagine the LEGO model rebuilt itself whenever you changed the instructions. That's React's other trick — you describe what the screen should look like for the current data, and React works out what to change on the page.

The core ideas

Components

A component is a JavaScript function that returns a piece of interface. React's documentation describes a component as a piece of the UI that has its own logic and appearance. Component names start with a capital letter.

JSX

Components are usually written in JSX, which looks like HTML mixed into JavaScript:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX is optional, but React's docs note that most projects use it. It gets converted to plain JavaScript before it runs in the browser.

Props

Props are the inputs you pass into a component, like settings on a reusable part:

<ProductCard name="Lavender Candle" price={24} />

The same ProductCard can show any product.

State

State is information a component remembers that can change while the app runs — whether a menu is open, what's typed in a search box, how many items are in the cart. When state changes, React re-renders the component so the screen matches.

Hooks

Hooks are functions whose names start with use, such as useState (remember a value) and useEffect (run code after rendering, for example to fetch data). You'll see them all over AI-generated React code.

A worked example: a cart counter

Say your online shop has an "Add to cart" button and a cart icon showing the number of items. In React it looks roughly like this:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

What happens when a shopper clicks "Add to cart":

1. The button's onClick calls onAdd, which calls setCartCount.
2. React updates the cartCount state from 0 to 1.
3. React re-renders Shop, passing count={1} into CartIcon.
4. The page now shows "Cart (1)". Nobody wrote code saying "find the cart text and change it" — the screen follows the data.

Notice the limits, too. This count lives in the browser's memory. Refresh the page and it's back to 0. To keep a cart, you'd save it somewhere lasting — a cookie, browser storage, or a database through your backend. React handles the screen; it doesn't store your data.

Where React fits in a web app

A "Vite + React" app renders in the browser (a single-page app). A Next.js app can render pages on the server first, which helps search engines and first-load speed.

Common terms explained

Common mistakes and misconceptions

• "React is a programming language." It's a library written in and used from JavaScript (or TypeScript).
• "React stores my data." State lives in the browser and disappears on refresh. Lasting data needs a backend and database.
• Putting secrets in React code. Everything in a React app is sent to the visitor's browser. API keys there are public. Keep them on the server.
• "React apps can't rank in search." Client-only rendering is weaker for search, but prerendering or server rendering fixes most of it.
• Giant components. One 1,000-line component is hard for people and AI alike to change safely. Ask for smaller ones.
• Assuming a React web app is a phone app. It runs in the browser, including on phones, but isn't an App Store app.

What to ask your AI builder for

• "Split this page into small, named components, and tell me which file each one is in."
• "Make the ProductCard component reusable, with name, price and image as props."
• "Save the cart to the database so it survives a refresh."
• "Keep all API keys on the server; the React code should call our own API."
• "Add loading and error states for data that comes from the server."
• "If search visibility matters for these pages, prerender them or use a server-rendered setup."
• "Explain in plain English what this error means and which component it comes from."

For the bigger picture, see frontend vs backend, and for reviewing what the AI wrote, how to review AI-generated code.

React in Mythex

Unless you ask for something else, Mythex starts new projects on Vite + React + TypeScript + Tailwind, with a live preview running while you chat. You can name another setup in your first prompt — for example "Use Next.js" or "plain static HTML landing page" — and Mythex picks it from what you write; there's no settings screen for it. The docs page on how the tech is chosen explains the options. The code editor is read-only on Free; on Pro you can edit the React code directly and export the project to keep working on it elsewhere.