iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
React is a JavaScript library for building user interfaces from reusable components. It does not dictate whether your app must be a single-page application (SPA): React can be used with client-side rendering, server-side rendering, static generation, or a mix of approaches. The key distinction is that React describes and updates UI; an application’s architecture determines where and when its HTML is produced.
What is React?
React is a JavaScript library for building user interfaces for the web and native applications. You describe parts of the interface as components, then combine those pieces into screens. A component might represent a button, a profile card, a navigation area, or an entire page.
React focuses on the UI rather than providing every part of a production application. Routing, data fetching, build tooling, deployment, and the rendering strategy may come from a framework or other tools. React’s current guidance recommends starting a new app with a framework in most cases; building from scratch can still make sense for learning, particular constraints, or work on framework-level infrastructure. See React’s app-creation guidance.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Is React a library or a framework?
React is a library. It provides a way to build UI from components, but does not by itself prescribe the full structure and tooling of an application. A framework can build on React and provide broader conventions and capabilities, such as routing and support for different rendering strategies. You can use React through a framework or assemble an app from separate tools; the right choice depends on what the app needs.
#1 Best Overall
What is a React component?
A component is a reusable piece of UI. In common React code, a component is a JavaScript function that returns markup written in 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 composed, from small controls to page sections. In JSX, a name beginning with a capital letter refers to a component; a lowercase tag such as button refers to a built-in HTML element.
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 requires tags to be closed, uses conventions such as className for the CSS class attribute, and requires multiple sibling elements to share one enclosing element or fragment.
Curly braces let you include a JavaScript expression in the markup. For example, <h1>{name}</h1> displays the value of name. The React guide to describing UI covers these syntax rules and how JSX is used in components. React’s documentation also notes that keeping markup close to the logic that renders it can make components easier to create, maintain, and delete; this is a code-organization benefit, not a claim that JSX by itself makes an app faster.
What are props in React?
Props are inputs a parent passes to a child component, much like attributes on a tag. They can carry strings, numbers, objects, arrays, functions, or JSX. The child reads them from its function argument, often using destructuring:
function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}
function App() {
return <Greeting name="Mina" />;
}Here, App passes the string “Mina” as the name prop, and Greeting uses it in the heading. When a parent puts JSX between a component’s opening and closing tags, the child receives that nested content in the children prop. This lets a wrapper component, such as a card, display different content without needing to know its exact structure.
Recommended Free Tools
Props are read-only snapshots for a render: a child should not mutate them. If an interaction needs to change what the UI displays, use state rather than changing a prop. 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 the initial render, React starts from a root. Later, an update such as a state change can trigger another render. React then commits the necessary changes to the DOM so it matches the latest output.
A render does not necessarily mean the browser refreshes the page or that React rewrites the whole DOM. A component can render again while producing the same output; in that case, there may be no corresponding DOM change. The React guide to render and commit explains this calculation-and-update process.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Is React a single-page application?
No. React is a UI library, while an SPA is one possible application architecture. An SPA typically loads one HTML page and updates content dynamically as the user interacts. React can be used to build one, but it can also be used in apps that render HTML on a server, generate pages at build time, or combine approaches.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteThe rendering choices affect where and when HTML is produced, initial content behavior, and implementation complexity. They are not mutually exclusive properties of React itself:
Best Value
| Approach | Where and when HTML is produced | What to consider |
|---|---|---|
| Client-side rendering (CSR) or SPA | The browser runs the app and updates the page as the user interacts; an SPA uses one HTML page as its application shell. | React’s from-scratch guide describes SPAs as easier to start with, but says they can have slower initial load times. Results depend on the app and its implementation. |
| Server-side rendering (SSR) | A server renders a page and sends the rendered output to the client. | It can improve performance, but adds setup and maintenance complexity. It is not automatically faster in every situation. |
| Static site generation (SSG) | HTML is generated at build time. | Useful for pages whose output can be prepared ahead of a request; it involves additional setup and choices. |
| React Server Components | Components can use a mix of build-time, server-only, and interactive behavior. | They require implementation expertise and framework support. |
These descriptions reflect the tradeoffs in React’s guide to building an app from scratch, not a universal ranking of which approach is best. Frameworks can support client rendering, SPAs, and static generation, and can add server rendering for particular routes. Different routes in one application may use different strategies.
For a new React app, React recommends starting with a framework. Its current app-creation guide names options including Next.js, React Router, and Expo. Framework recommendations and capabilities can change; check the current documentation when choosing a setup.
Quick 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.
