Favicon of React

React

A JavaScript library from Meta for building user interfaces out of reusable, declarative components. Renders in the browser, on servers, or natively.

React website screenshot
React GitHub repository preview

React is a JavaScript library maintained by Meta for building user interfaces out of small, reusable pieces called components. It targets frontend developers who want a declarative way to describe what a UI should look like in a given state, then let the library handle updating the DOM when the underlying data changes. React makes few assumptions about the rest of your stack, so it works well both for adding a single interactive widget to an existing page and for building an entire application around it. The project describes this as "learn once, write anywhere": the same component model applies whether you're shipping a web page, a server-rendered app, or a mobile app through React Native.

Key features

  • Declarative rendering: describe what each UI state should look like and React updates the DOM to match when data changes, instead of you writing manual DOM manipulation code.
  • Component-based architecture: build encapsulated components that hold their own state and logic, then compose them into larger interfaces without exposing internal state to the DOM.
  • JSX syntax: an HTML-like syntax for writing markup directly inside JavaScript, which makes component code easier to read. JSX is optional, not required.
  • Gradual adoption: add React to one part of an existing page, or use it as the foundation for a new application from the start.
  • Cross-platform component model: the same components and patterns render in the browser, on the server with Node, and in native mobile apps through React Native.
  • Predictable state flow: data flows down through components in one direction, which makes debugging and reasoning about UI state simpler than ad hoc DOM code.
  • Structured learning path: official docs walk through Quick Start, a tic-tac-toe tutorial, Thinking in React, describing UI, adding interactivity, managing state, and a full API reference.

Ideal use cases

React fits any frontend project where the interface has meaningful interactive state, from a single widget embedded in a server-rendered page to a full single-page application. It works well for teams that want to lean on the surrounding ecosystem, since design systems, testing utilities, and meta-frameworks like Next.js are all built around React's component model. It's also a solid choice when you want to share logic and patterns between a web app and a mobile app, since React Native reuses the same concepts and much of the same documentation.

React is not a full application framework by itself. It has no built-in router, data-fetching layer, or opinionated project structure, so you either assemble those pieces yourself or use a framework such as Next.js that adds them on top. If your project is a largely static site with minimal interactivity, or you want a framework that makes every architectural decision for you out of the box, plain React adds overhead without much payoff. Teams new to the library should expect to spend time picking a router, a data layer, and a build tool before shipping a production app.

Installation

To add React to an existing HTML page or app, install the core packages with npm or yarn:

npm install react react-dom

For a brand new project, the React documentation recommends starting from a toolchain rather than wiring up React by hand, for example a Next.js app or a Vite-based React template. This gives you a working build setup, dev server, and routing out of the box, which the bare react and react-dom packages don't provide on their own.

A minimal example of rendering a component into the page:

import { createRoot } from 'react-dom/client';

function HelloMessage({ name }) {
  return <div>Hello {name}</div>;
}

const root = createRoot(document.getElementById('container'));
root.render(<HelloMessage name="Taylor" />);

This renders "Hello Taylor" into a container element on the page. From there, most projects add a router, a data-fetching approach, and a build tool, either by hand or through a framework built on top of React. React itself is MIT licensed, and its source, issue tracker, and contribution guide are all public on GitHub for anyone who wants to report bugs or send pull requests.

Categories:

Frequently asked questions

Share:

Stars
247.7K
Forks
51.2K
Last commit
14 hours ago
Repository age
13 years
License
MIT
Self-hosted
No
Activity score
95/100
View Repository
Ad
Favicon

 

  
 

Similar to React

Favicon

 

  
 
Favicon

 

  
 
Favicon