Free tools Windows power users keep installed
One-click scans. No signup required.
React is a JavaScript library for building user interfaces from reusable components. JSX is a way to describe those interfaces in JavaScript, props pass information between components, and rendering is React’s process for calculating and applying UI updates. React itself is not a single-page application (SPA) or a complete application framework: developers choose an app architecture and tools around it.
What is React?
React is a JavaScript library for building user interfaces on the web and in native applications. It lets developers describe a screen as a collection of components—pieces such as buttons, profile cards, or page sections—and compose those pieces into a larger interface. React’s official overview describes components as the foundation of this approach.
As an Amazon Associate I earn from qualifying purchases.
React focuses on the UI. Routing, data fetching, build tooling, deployment, and the choice of where pages are rendered are application-level concerns. A framework or a set of other tools may provide them.
Is React a library or a framework?
React is a library, not a complete application framework. It provides tools for building interfaces, but it does not by itself prescribe every part of an application’s structure or supply all the surrounding systems.
#1 Best Overall
For a new app, React’s documentation recommends starting with a framework. Its guide to creating a React app also describes starting from scratch as an option for learning, for projects with specific constraints, or for developers intentionally building their own framework-level infrastructure. Framework guidance can change, so check the current documentation when choosing a stack.
What is a React component?
A component is a reusable unit of UI. In a common pattern, it is a JavaScript function that returns JSX:
function Welcome() {
return <h1>Hello</h1>;
}Another component can include it using its capitalized name as a JSX tag:
function App() {
return <Welcome />;
}Components can be nested and reused, from small controls up to major page areas. In JSX, a name beginning with a capital letter refers to a component; a lowercase name is interpreted as a built-in HTML tag. React’s UI-description guide introduces this composition model.
What is JSX in React?
JSX is a JavaScript syntax extension for writing HTML-like markup alongside the logic that describes a UI. It is not HTML pasted unchanged: JSX has its own rules. Tags must be closed, attributes use JSX conventions such as className, and adjacent elements need one enclosing parent or a fragment.
Curly braces let you insert a JavaScript expression into markup. For example, <h1>{name}</h1> displays the value of name. React describes JSX as a way to keep markup close to the code that renders it, which can make components easier to create, maintain, and remove; that is a code-organization rationale, not a performance guarantee. See the official JSX and UI guide.
What are props in React?
Props are inputs a parent passes to a child component, much like attributes on a tag. They can contain strings, numbers, objects, arrays, functions, or JSX. A child commonly reads props through its function argument, often using destructuring:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsfunction Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}
function App() {
return <Greeting name="Mina" />;
}Here, App supplies the string "Mina" as the name prop, and Greeting uses it in its heading. Props are read-only snapshots for a render: a child should not mutate them. For changing data in response to interaction, React uses state rather than changing a prop.
Nested content and children
When a parent places content between a component’s opening and closing tags, that content is passed to the child as the children prop. This lets a wrapper component, such as a card, present different nested content without knowing its exact details:
function Card({ children }) {
return <section className="card">{children}</section>;
}
function App() {
return (
<Card>
<h2>Profile</h2>
<p>Welcome back.</p>
</Card>
);
}For more on values, nested content, and the read-only rule, see Passing Props to a Component.
What does rendering mean in React?
Rendering is React calling components to calculate what the UI should look like. On an initial render, React starts at a root and works through the component tree. A later state update can trigger another render. React then commits the necessary changes to the DOM, the browser’s representation of the page.
A render does not necessarily mean the DOM changed. A component may run again, but if its output requires no visible update, React need not alter the DOM. Rendering is therefore not the same as refreshing the whole page or rewriting the entire DOM. The distinction between calculation and DOM updates is explained in Render and Commit.
Best Value
Is React a single-page application?
No. React is a UI library; a single-page application is an application architecture. An SPA typically loads one HTML page and updates its content as a user interacts, rather than loading a new document for every navigation. A React app may use that approach, but React can also be used with server rendering, static generation, and other arrangements.
How SPA, SSR, and SSG differ
| Approach | Where and when HTML is produced | Typical trade-off described by React |
|---|---|---|
| SPA | The browser loads one page and the app updates the interface dynamically. | Can be easier to start with, but may have slower initial load times. |
| SSR | A server renders a page and sends the rendered output to the browser. | Can improve performance, with added setup and maintenance complexity. |
| SSG | HTML is generated at build time. | Requires additional setup choices; suitability depends on the app and its content. |
These are not universal speed rankings: results depend on the application and its implementation. React’s from-scratch app guide discusses the trade-offs, including React Server Components. Server Components can combine build-time, server-only, and interactive components, but require implementation expertise and framework support.
One app can mix rendering strategies
Rendering choices are not necessarily all-or-nothing. React’s app-creation guide says recommended frameworks support client-side rendering, SPAs, and SSG, and can add SSR on a per-route basis. A mostly static informational route and a highly interactive route may therefore use different approaches within one application.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
