What is React? A Beginner's Guide to Components and JSX in 2026

If you have ever tapped through Instagram, opened a Figma file, used a Vercel dashboard, or spun up a project on Linear, you have used React. It is the JavaScript library that quietly renders most of the web's interactive interfaces in 2026, and it has been the default front-end choice in production for almost a decade now.

This guide explains what React really is (it is not a framework), how its component model lets you build big interfaces from small reusable pieces, what JSX is and why it is not as weird as it looks, and how to read your first real React file. By the end you will have a working mental model and the confidence to start a real project.

What React Actually Is

React is a JavaScript library for building user interfaces, originally created by Jordan Walke at Facebook in 2013 and now maintained by Meta and a huge open-source community. It is not a framework — it does not handle routing, data fetching, or build configuration on its own. It does one thing: it turns your JavaScript into a tree of UI elements and keeps that tree in sync with your data.

Frameworks like Next.js, Remix, and Expo wrap React with the missing pieces (router, server, build pipeline) so you can ship a real app. The React library itself stays small and focused.

The version everyone uses in 2026 is React 19, which shipped stable in late 2024. React 19 brought Actions, the use() hook, native ref-as-prop, server components everywhere, and a much smaller bundle. None of that matters on day one — vanilla components and useState will get you very far.

The One Big Idea: Components

A React component is a JavaScript function that returns what should appear on screen. That is it. The function takes some inputs (called props), and returns a description of UI.

App.jsx

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

You then use <Greeting name="Sara" /> somewhere else, and React renders an actual <h1> in the page. Components compose: a Page component contains a Header, the Header contains a Logo and a Nav, the Nav contains a list of NavLink components. The whole UI is just functions calling functions.

This is the same idea backend developers have used forever — small functions composed into bigger ones — applied to user interfaces.

What JSX Is, in One Paragraph

JSX is the HTML-looking syntax inside React components. It is not a template language and it is not HTML; it is a JavaScript expression that the build tool converts into a function call. <h1>Hello</h1> becomes roughly React.createElement('h1', null, 'Hello') at compile time. That means you can drop any JavaScript into JSX with curly braces — variables, conditionals, function calls — and it just works.

App.jsx

function Greeting({ name, isLoggedIn }) {
  return (
    <div className="greeting">
      <h1>Hello, {name?.toUpperCase() ?? "stranger"}</h1>
      {isLoggedIn && <button>Sign out</button>}
    </div>
  );
}

A few JSX rules to internalise: attributes are camelCase (onClick, not onclick), class becomes className because class is a reserved word in JS, and every component returns a single root element (wrap siblings in <>...</> if needed).

Props and State, the Two Halves of React

A component needs two kinds of data:

• Props are inputs from the parent. They are read-only inside the component.
• State is data the component owns and can change over time. State changes trigger a re-render.

State lives behind hooks. The most basic one is useState:

App.jsx

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

When you call setCount, React re-runs the Counter function, gets the new return value, and surgically updates the DOM where it changed. You never write DOM-manipulation code yourself. You write what the UI should look like for the current state, and React figures out the diff. We go deeper in React Hooks Explained: useState and useEffect for Beginners.

How to Start a Real React Project in 2026

Skip Create React App — it has been discontinued. The two modern paths are:

• For a real production app: start with Next.js (npx create-next-app@latest). You get routing, server rendering, and deployment built in.
• For pure-frontend learning: start with Vite (npm create vite@latest my-app -- --template react-ts). Fast, minimal, perfect for understanding React itself.

You will need Node.js 22 LTS or newer and any modern editor — VS Code with the official ES7+ React snippets and the React Developer Tools browser extension is the standard 2026 setup.

Where React Goes from Here for You

Once you can render a few components and wire up a useState, the next concept is useEffect (running code in response to renders), then real data fetching, then a router. Build something tiny: a tip calculator, a TODO list, a Pokémon card grid that fetches from a public API. Three small projects beat any tutorial marathon.

Common Mistakes Beginners Make

• Mutating state directly. count++ does nothing visible. Always call the setter: setCount(count + 1).
• Putting expensive work in the component body. Component functions can re-run frequently — keep them pure and move heavy work into events or useEffect.
• Treating JSX as HTML. It is JavaScript with HTML-shaped syntax. for becomes htmlFor, inline styles take an object (style={{ color: 'red' }}).
• Reaching for state when props would do. Props flow down; lift state up only when it has to be shared.
• Following pre-2024 tutorials. Anything teaching class components, Redux as the default, or componentDidMount is outdated. Use functions and hooks.

Quick Reference

• A component is a function that returns JSX
• Props are inputs (read-only); state is data the component owns
• useState(initial) returns [value, setValue]; calling the setter re-renders
• JSX rules: className, onClick, single root element, {expression} for JS
• Conditional render: {cond && <X />} or {cond ? <A /> : <B />}
• Lists: arr.map(item => <Item key={item.id} {...item} />) — never forget key
• Start a project: npx create-next-app@latest or npm create vite@latest
• Devtools: install React Developer Tools in Chrome or Firefox