What is React? A Complete Introduction for Beginners

React is a JavaScript library for building user interfaces. It is the most widely used frontend tool on the web, the foundation of Next.js, React Native, and a large share of every modern company’s product surface. This post explains what React actually is, why it became the default, and what changes the moment you start using it.

No prior framework experience is required — only working JavaScript.

What is React?

React is an open-source JavaScript library for building user interfaces out of components. It was created at Facebook in 2013 and is now maintained by Meta and a large community of contributors. The current major version is React 19, released in 2024, and that is the version this series teaches.

The smallest possible React component looks like this:

function Hello() {
  return <h1>Hello, world!</h1>;
}

That is a JavaScript function that returns markup. React’s job is to take functions like this, compose them into a tree, and render the result into a real web page — updating only the parts that change when your data changes.

React calls itself a library rather than a framework because it focuses on one thing: rendering UI from data. Routing, data fetching, and global state are handled by separate packages you can choose, or by larger frameworks like Next.js that bundle them.

The problem React was designed to solve

Before React, the standard way to update a page was to read the DOM, find an element, and change it by hand:

const button = document.querySelector("#like");
button.addEventListener("click", () => {
  const counter = document.querySelector("#count");
  counter.textContent = Number(counter.textContent) + 1;
});

This works for a single counter. It breaks down as soon as you have dozens of interacting pieces — a feed, a comment thread, notifications, a sidebar. Every interaction means another querySelector, another textContent assignment, another fragile chain of updates. Bugs creep in. State drifts out of sync with what the user sees.

React inverts the model. Instead of describing how to update the page, you describe what the page should look like for a given state. React figures out the updates.

function Likes() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Likes: {count}
    </button>
  );
}

You declared that the button shows Likes: {count}. When count changes, React re-renders the component, compares the new output to the previous one, and updates only the part of the page that actually changed. You never touch the DOM directly.

This style is called declarative UI, and it scales to enormous applications because the mental model stays the same whether you have one component or ten thousand.

The core ideas of React

You only need five concepts to read most React code in the wild.

1. Components

A component is a JavaScript function that returns markup. Components can be reused, composed, and nested.

function Greeting() {
  return <p>Welcome back.</p>;
}

function Page() {
  return (
    <main>
      <Greeting />
      <Greeting />
    </main>
  );
}

2. JSX

JSX is the HTML-like syntax inside the function. It is not HTML and not a string — it is JavaScript that compiles to function calls. Anything in { } is a JavaScript expression.

const name = "Ada";
const element = <h1>Hello, {name}</h1>;

3. Props

Props are how a parent component passes data to a child. They are read-only inside the child.

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

<Greeting name="Ada" />

4. State

State is data a component owns and can change over time. State changes trigger re-renders.

const [count, setCount] = useState(0);

5. The virtual DOM

When state changes, React builds a lightweight in-memory description of what the page should look like, compares it to the previous one, and applies the minimum set of real DOM updates. This is why React can stay both declarative and fast. You will not write virtual-DOM code yourself — it is a property of how React runs.

We cover components and JSX in post 3, props and state in post 4, and the two essential hooks in post 5.

React is not a framework

A common point of confusion. React renders UI. That is the entire core job. It does not include:

• A router
• A data-fetching layer
• A form library
• A styling system
• A build tool

You add those as you need them. Beginners usually reach for React Router for routing and Vite as the build tool, both of which we use in this series. If you want batteries included, Next.js is the standard full framework built on top of React, and it is what most production apps use today. You do not need Next.js to start — plain React on Vite is a clean place to learn the fundamentals.

How React compares to other tools

You will see four names come up repeatedly:

• React — the largest ecosystem, the most job postings, the most learning material. Verbose by design, very flexible.
• Vue — similar mental model with a friendlier syntax. Smaller ecosystem, very loyal community.
• Svelte — compiles components to plain JavaScript at build time. Less code, growing fast.
• Angular — a full framework from Google. Much heavier, common in large enterprises.

None of these are wrong choices. React’s advantage for a beginner is gravitational pull: more tutorials, more answers on Stack Overflow, more libraries, and the largest pool of jobs. Once you know one of them well, the others are much easier to pick up.

What you can build with React

A realistic progression of what learners build:

Within your first month:

• A to-do list, calculator, or unit converter as a single-page React app
• An interactive form with live validation
• A page that fetches data from a public API and renders it as a list
• A small dashboard with charts using a library like Recharts

Within three to six months:

• A multi-page app with React Router, authentication, and a real backend
• A Next.js project with server-rendered pages and route handlers
• A small mobile app with React Native
• A real-time UI using WebSockets or a service like Supabase

Within a year of consistent practice:

• A production web application with payments and deployment
• A component library used across multiple internal apps
• A browser extension built with a React-based toolchain
• Work an employer would pay you for

None of this requires unusual talent — only consistent practice on real projects.

Modern React vs. older React

React has changed significantly since 2013. The version that matters today is React 16.8 and onwards, which introduced hooks and turned function components into the default. Anything before that used class components and lifecycle methods, which you may still see in older code.

This series teaches modern React only:

• Function components, never classes
• Hooks (useState, useEffect, and the rest) for state and side effects
• Vite as the build tool, not the deprecated Create React App
• JSX, not the older React.createElement calls

If a tutorial uses class extends Component or componentDidMount, it predates the modern era. You can read it, but you should not write new code that way.

What you need to get started

To follow the rest of this series you need:

1. A computer running Windows, macOS, or Linux from the last decade
2. Node.js 20 or newer installed — the next post walks you through it
3. A modern browser, ideally Chrome or Firefox with React DevTools
4. A code editor — we use Visual Studio Code, which is free
5. Solid JavaScript fundamentals — arrays, objects, destructuring, arrow functions

You do not need TypeScript, a CSS framework, or any paid courses to start. Everything you need is free and open source.

Recap

You now know:

• React is a JavaScript library for building UIs out of components
• A component is a function that returns JSX, the HTML-like syntax inside React
• Props pass data down, state holds data that can change over time
• React updates the page by diffing a virtual DOM and applying minimal real DOM changes
• Modern React uses function components and hooks — never class components
• Vite is the recommended toolchain in 2026 — Create React App is no longer maintained

Next steps

The next post walks through installing Node.js, creating a fresh React project with Vite, and running it in the browser — in about ten minutes from start to finish.

→ Next: Set Up a React App with Vite

Questions or feedback? Email codeloomdevv@gmail.com.