JSX is a syntax extension that lets you write HTML-like markup inside JavaScript, such as Save . A build tool compiles it into regular JavaScript function calls before it runs in the browser.

Book 02 · Web DevelopmentPage 36 of 61

React

Updated September 30, 20262 min read

In short

React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.

What is React?

React is a JavaScript library for building user interfaces, originally created at Facebook and now maintained as an open-source project. Instead of writing step-by-step instructions that change the page, you describe what the UI should look like for a given state, and React updates the browser's DOM to match whenever that state changes.

A React app is built from components: functions that receive inputs called props and return a description of the UI, usually written in JSX, an HTML-like syntax inside JavaScript. Components can keep their own state with hooks such as useState, and when that state changes, React runs the component again and applies only the necessary changes to the page.

Think of components as building blocks: small, self-contained pieces such as a button, a search box, or a product card that snap together into larger features. Because each piece is reusable and behaves predictably, teams can build and maintain complex interfaces like dashboards, social feeds, and online editors.

React is often called a framework, but on its own it is a library focused on rendering UI. Routing, data loading, and server rendering usually come from frameworks built on top of it, such as Next.js or React Router, which can render React components with CSR, SSR, or SSG. Modern React also supports Server Components, which run only on the server and send no JavaScript for themselves to the browser.

Key takeaways

React is a JavaScript library for building user interfaces.
UIs are made of reusable components that receive props and hold state.
JSX lets you write HTML-like markup inside JavaScript.
React updates only the parts of the DOM that actually changed.
Frameworks built on React add routing, data loading, and server rendering.

Example

A reusable component with statejsx

import { useState } from "react";

// A reusable component that keeps its own state
function LikeButton({ label }) {
  const [likes, setLikes] = useState(0);

  // Clicking updates the state, and React re-renders the button
  return (
    <button onClick={() => setLikes(likes + 1)}>
      {label}: {likes}
    </button>
  );
}

// Components are used like HTML tags: <LikeButton label="Likes" />

Readers ask

Is React a framework or a library?

React describes itself as a library because it focuses on rendering user interfaces and leaves routing, data loading, and builds to other tools. In everyday conversation it is often called a framework, and full frameworks such as Next.js are built on top of it.

What is JSX?

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript, such as <button>Save</button>. A build tool compiles it into regular JavaScript function calls before it runs in the browser.

What is the difference between React and React Native?

React is used to build user interfaces that render to the DOM in web browsers. React Native uses the same components and ideas but renders to native iOS and Android views instead of HTML.