React is a JavaScript library for building user interfaces. When data changes, it patches the parts of the page that actually changed and leaves the rest of the document alone.
Meta built it first and ran it inside its own products for years before releasing the code publicly. Ownership has moved on since then. Governance now sits with the independent React Foundation, hosted by the Linux Foundation.
That foundation launched on February 24, 2026 with eight platinum founding members: Amazon, Callstack, Expo, Huawei, Meta, Microsoft, Software Mansion, and Vercel. Meta contributed the React project itself.
What Is React?
Rendering the view layer is the job. That is where the library starts and where it stops, which catches people off guard if they arrive from something like Angular.
The work sits inside front-end development, the part of a project concerned with what a user sees and clicks. You write it in JavaScript, usually with JSX handling the markup, and you build everything out of components: small reusable pieces of interface that nest inside each other. It is open source and free to use commercially.
People write “React,” “React.js,” and “ReactJS” interchangeably. All three point at the same library. There is no separate product hiding behind the “.js.”
Is React a Library or a Framework?
It is a library. Rendering is handled for you; routing, data fetching, and state management stay your problem, and you pick the tools for each.
That distinction trips up a lot of beginners, mostly because Angular gets called a framework in the same breath. Inversion of control is the usual dividing line. A framework runs the show and calls into your code at the points it has already decided on, while a library sits there until you call it.
| Aspect | Library approach | Framework approach |
|---|---|---|
| Routing | Not included, added separately | Built in and pre-configured |
| State management | Left to the developer to choose | Often bundled with the core |
| Project structure | Flexible, decided by the team | Opinionated, defined by the tool |
| Learning curve | Smaller core, more decisions later | Larger core, fewer decisions later |
The State of JavaScript 2024 survey put React at 82 percent usage in the front-end framework category, ahead of Vue (51 percent), Angular (50 percent), and Svelte (26 percent).
Sit with that gap for a second. A tool that ships without a router or a state layer still beats every full framework it gets measured against, which says more about how teams want to work than about the code itself.
The full breakdown of routing and state differences between the two approaches lives in the React vs Angular comparison, if the distinction matters for a specific project.
Who Created and Maintains React?
Jordan Walke, a software engineer at Facebook, built the first version in 2011. He based it loosely on XHP, an internal PHP tool for writing HTML components, and shipped an early prototype inside Facebook’s ads tooling.
Facebook’s News Feed became the first real production use, specifically the Like and comment features, starting that same year. Instagram came next after the 2012 acquisition, and it was the first product to run a version of React pulled loose from Facebook’s internal stack, roughly a year before anyone outside the company saw the code.
The timeline is short:
- Created by Jordan Walke at Facebook, first used internally in 2011
- Open sourced on May 29, 2013, at JSConf US
- Originally released under a BSD-plus-patents license, then relicensed under the MIT License in September 2017 after community pushback, and it remains free for commercial and personal use today
- React 19 went stable on December 5, 2024 (react.dev, 2024)
Meta donated the project to the React Foundation in 2026. Day-to-day development did not change much: it still runs through a public repository on GitHub, where contributors from Meta, Amazon, Microsoft, Vercel, and the other member companies submit patches next to independent maintainers.
Broad corporate backing plus an open contributor base is a big part of why React outlived nearly every competitor from its 2013 cohort.
How Does React Render User Interfaces?
Rendering works by keeping a lightweight copy of the page in memory, comparing it against the previous copy, and touching only the nodes that moved. Nothing gets torn down and rebuilt unless the data behind it changed.
Virtual DOM and Reconciliation
The mechanism underneath is not complicated once you see the steps.
- React keeps a virtual DOM, an in-memory tree that mirrors the real one
- On a state change, it builds a new virtual tree and diffs it against the old one
- Reconciliation is the name for calculating that difference
- Only the changed nodes get pushed to the actual browser DOM
Manipulating the real DOM directly is slow. Comparing two in-memory trees first is cheap by comparison, and that tradeoff is the entire point of the design.
React Fiber
Fiber is the engine underneath reconciliation. It was rewritten in 2017 so React could pause, prioritize, and resume rendering work rather than blocking the main thread until a whole tree finished.
React Compiler, the optimization layer built on top of Fiber’s scheduling model, shipped production numbers straight from Meta: up to 12 percent faster initial loads and page navigations on the Meta Quest Store, with some interactions running over 2.5 times faster (react.dev, 2025).
Teams chasing tighter frame times beyond what Fiber gives them for free usually move on to dedicated React performance optimization techniques, memoization, code splitting, and list virtualization among them.
What Are Components and JSX?
A component is a self-contained piece of interface. An application is just components nested inside other components, and JSX is the syntax that keeps writing them readable.
JSX Syntax
JSX lets you write markup that looks like HTML directly inside JavaScript, instead of assembling elements through verbose function calls. It compiles down to plain JavaScript before it ever reaches a browser, it wants a single root element wrapping whatever a component returns, and it mixes freely with JavaScript expressions through curly braces.
Teams that want compile-time safety on top of that markup often reach for React with TypeScript, catching prop mismatches before code ever runs.
Functional Versus Class Components
Functional components are plain JavaScript functions that return JSX, and they are the default across nearly every new codebase now. Class components came first, built on ES6 classes with lifecycle methods. You still find them in older projects, but almost nobody writes fresh ones.
Airbnb, along with plenty of other large product teams, maintains a shared component library so buttons, forms, and cards stay consistent across a product instead of drifting page by page.
Once an application grows past a handful of screens, most teams settle into a set of React component patterns just to keep files predictable.
How Do Props and State Work in React?
Props are the data a parent hands down to a child. They are read-only, and the component receiving them never changes them. State is the data a component owns and updates itself, usually after a click, a keystroke, or a network response.
A search box makes the difference concrete. Its placeholder text often arrives as a prop, while the characters someone actually types live in state.
Data flows one direction, down from parent to child, and never back up on its own. That is deliberate. It makes bugs traceable, because a value can only change where it was declared.
Once state has to travel between components that share no direct parent-child relationship, most teams reach for a dedicated state layer, which is exactly where the React context vs Redux decision starts.
What Are React Hooks?
Hooks landed as a stable feature in version 16.8 on February 6, 2019. Before that release, function components could not hold state at all, which is why so much older code is written as classes.
They are functions that let a function component tap into state, side effects, and other React features without writing a class.
- useState hands a component a piece of state and a way to update it
- useEffect runs code in response to a render, which covers data fetching and subscriptions
- useContext reads a value from context without threading props through every layer in between
There is one hard rule. Call hooks only at the top level of a component, never inside a loop, a condition, or a nested function. Break it and React loses track of which hook belongs to which piece of state, which produces some of the more confusing bugs a beginner will hit.
For a deeper walkthrough of each hook with runnable examples, the React hooks explained guide is a solid next stop.
Which Tools Do You Need to Build a React Application?
React ships as a rendering library and nothing else, so the surrounding setup gets assembled by hand. Node.js, a package manager, something to compile JSX, and a bundler all get installed and wired together separately.
- Install Node.js, the runtime that lets JavaScript tooling run outside a browser
- Use its package manager to pull in react and react-dom
- Add Babel, which compiles JSX into plain JavaScript function calls
- Add a bundler such as Vite to serve files during development and pack them for production
- Run the dev server and confirm a component renders in the browser
Create React App used to handle the compiler and bundler steps for you. The React team retired that approach on February 14, 2025 and now points new projects toward Vite or a framework instead (react.dev, 2025).
Vite filled the gap quickly. The State of JavaScript 2024 survey found 69 percent of respondents already using it, second only to webpack on raw usage, but with the highest satisfaction score of any build tool in the category, and it has closed the gap with webpack every year since.
The React.js installation guide walks through each of these steps with the exact commands, which saves guessing at flag names on a first setup.
What Is the React Ecosystem?
React handles rendering. Routing, mobile builds, shared state, all of it comes from separate projects that plug into that core.
| Tool | Category | What it adds |
|---|---|---|
| Next.js | Framework | Server rendering, file-based routing, image optimization |
| React Native | Mobile framework | iOS and Android apps from one codebase |
| Redux | State library | Centralized state for large applications |
| React Router | Routing library | Client-side navigation for single-page apps |
Nike’s global storefront runs on Next.js, leaning on server rendering to keep product pages fast across regions without rebuilding the whole site for every change.
On mobile, Shopify rebuilt its flagship app on React Native and reached roughly 86 percent shared code between iOS and Android, up from just 5 percent before the migration (Shopify Engineering, 2024). That number is the argument for React Native in a nutshell.
Anyone setting up navigation for the first time can lean on the React router tutorial, which covers nested routes and dynamic segments directly.
For a broader sense of what cross-platform React Native apps look like in production, the list of apps built with React Native covers more than just Shopify.
How Does React Compare to Angular, Vue, and Svelte?
All four solve the same problem, through fairly different architectures.
| Framework | Type | Rendering approach | Official router |
|---|---|---|---|
| React | Library | Virtual DOM diffing | No, community maintained |
| Angular | Framework | Real DOM with change detection | Yes, built in |
| Vue | Framework | Virtual DOM diffing | Yes, Vue Router |
| Svelte | Compiler | Compiles away, no virtual DOM at runtime | No, community maintained |
Usage numbers and satisfaction numbers tell different stories here, and both come out of the same State of JS 2024 survey.
React leads on raw usage. Svelte posted the highest retention of any front-end framework in that survey, with about 88 percent of developers who had used it saying they would use it again. Vue improved noticeably on the same measure that year. React trailed both on developer sentiment despite its lead on usage, a pattern the survey has shown for several years running (State of JS 2024).
Angular still carries the steepest learning curve of the four, mostly from its dependency injection system and heavier project scaffolding.
Svelte skips runtime diffing altogether and ships smaller bundles by compiling components down to direct DOM updates at build time. It is genuinely nice to write. The hiring pool is a fraction of React’s, which is usually what decides it.
Anyone deciding specifically between the two most common picks can check the dedicated Vue vs React breakdown for routing and tooling differences.
The newer, leaner contender gets the same treatment in the Svelte vs React comparison, bundle sizes included.
When Should You Use React?
It fits best where an interface changes often and the team wants control over how the whole thing is assembled.
W3Techs puts React on 6 percent of all websites it tracks, up from 4.3 percent a year earlier (W3Techs, 2025). That is a fast climb for a library that hands you no router and no state layer.
The clearest fits:
- Single-page applications with frequent UI updates
- Dashboards and admin panels carrying a lot of interactive state
- Products that need server rendering through Next.js for SEO
- Teams building a web app and a mobile app who want to share logic through React Native
Growth on that scale usually means a large hiring pool and long-term support, and both matter more than people expect once a codebase outlives the team that wrote it.
The fuller case for choosing it, including where it beats a framework and where it does not, sits in why use React.js.
When Does React Not Work Well?
Treating React as the default choice for every project creates problems later, and the failure cases are pretty predictable.
- A five-page marketing site, where plain HTML loads faster and costs less to maintain
- Small teams without much JavaScript depth, where the setup and the hook rules add real ramp-up time
- SEO-critical pages built as pure client-side rendering, with no Next.js or other server-rendering layer on top
Google’s own developer documentation confirms that rendering a page happens in a separate, deferred queue after crawling, and that heavy client-side JavaScript can slow that process down on large sites.
None of that is a reason to avoid React for content-heavy sites. It is a reason to pair it with server rendering the moment search visibility matters.
A team unsure whether the tradeoffs are worth it can check React.js pros and cons for the fuller list side by side.
Where none of it fits, whether that comes down to bundle size or a preference for a batteries-included framework, the roundup of React alternatives covers what else is worth a look.
FAQ on What Is React.Js
What is the difference between React and ReactDOM?
React defines components and works out what needs to change. ReactDOM takes that output and applies it to the actual browser page. The same React core also powers React Native, where a different renderer targets mobile screens instead of a browser DOM.
Can you use React without JSX?
Yes. JSX compiles down to calls like React.createElement, so any component can be written with plain JavaScript function calls instead. Most teams keep JSX anyway, since nested createElement calls get unreadable fast.
Is React free to use?
Yes, under the MIT License noted earlier. That license lets you modify React’s source, bundle it into closed-source commercial products, and redistribute it, with no royalty owed and no obligation to open source whatever you build.
Does React require knowing JavaScript first?
Yes. React is a JavaScript library, not a separate language, so variables, functions, arrays, and asynchronous code all carry over directly. Comfort with ES6 syntax, especially arrow functions, destructuring, and modules, makes the jump into components and hooks considerably smoother.
How is a React application tested?
Most teams pair Jest as the test runner with React Testing Library for rendering components in isolation and simulating clicks or typing. Testing Library favors queries that match what a user actually sees, over reaching into internal component state.
What is the latest version of React?
React 19 remains the current major version, with no React 20 announced. The 19.2 minor release added new APIs, including useEffectEvent and cacheSignal, in October 2025, and patch updates on that line have continued through 2026, with 19.2.8 shipping in July 2026 (react.dev).
What Should You Learn First After React?
Core JavaScript and JSX come first, then state and hooks, then a production framework like Next.js. Each layer leans on the one before it, and skipping ahead usually shows up later.
That order holds until an application needs data ready before the first paint. At that threshold plain React stops being enough on its own, and a framework layer takes over the rendering step.
Jumping straight to a framework buys faster setup at the cost of a shakier grasp of what React is doing underneath. The gap shows up the first time a bug hides inside somebody else’s abstraction.
A structured walkthrough of that same progression sits in the guide on how to learn React.js, with concrete milestones for each stage.
- C# cheat sheet - September 11, 2026
- Website Improvements That Can Support Business Growth - September 11, 2026
- What Are Android Vitals? A Simple Guide for Developers - September 10, 2026
