yawiki.org
DevelopmentUpdated May 25, 2026

What Is React?

React, often referred to as React.js or ReactJS, is an open-source front-end JavaScript library developed by Meta (formerly Facebook) and a communi...

Maya LestariPublished Revised

#Short Answer

React, often referred to as React.js or ReactJS, is an open-source front-end JavaScript library developed by Meta (formerly Facebook) and a community of individual developers and companies. It is widely used for building interactive and dynamic web applications, including mobile applications through React Native.

#Infobox

#Overview

React, often referred to as React.js or ReactJS, is an open-source front-end JavaScript library developed by Meta (formerly Facebook) and a community of individual developers and companies. It is widely used for building interactive and dynamic web applications, including mobile applications through React Native.

React's core features include the component-based architecture, which enables developers to break down complex UIs into smaller, manageable pieces. Each component manages its own state and can be reused across different parts of an application, promoting code reusability and maintainability.

Another key aspect of React is its unidirectional data flow, where data moves in a single direction—from parent to child components—making the application's behavior more predictable and easier to debug.

#History / Background

React was first created by Jordan Walke, a software engineer at Meta, in 2011. It was initially developed to address the challenges of building large-scale applications with dynamic data, particularly for Facebook's news feed. The library was first deployed on Facebook's production servers in 2011 and later on Instagram in 2012.

In May 2013, React was publicly released as an open-source project under the MIT License. This release marked the beginning of React's widespread adoption in the web development community. Over the years, React has evolved significantly, with major updates such as React 16 in 2017, which introduced Fiber, a new reconciliation engine, and React 18 in 2022, which added features like concurrent rendering and server-side rendering (SSR).

#How It Works

#Virtual DOM

React uses a virtual DOM to optimize rendering performance. Instead of directly updating the browser's DOM, React creates a lightweight copy of the DOM in memory, known as the virtual DOM. When data changes, React compares the virtual DOM with the previous version (a process called diffing) and calculates the minimal set of changes required to update the actual DOM. This approach minimizes the number of expensive DOM operations, leading to improved performance.

#Components

React applications are built using components, which are self-contained pieces of code that manage their own state and render UI elements. Components can be classified into two types:

  • Function Components: Simple JavaScript functions that return React elements. With the introduction of Hooks in React 16.8, function components can now manage state and side effects.
  • Class Components: ES6 classes that extend React.Component and include lifecycle methods like componentDidMount and componentDidUpdate.

#JSX

React uses JSX, a syntax extension for JavaScript, to describe what the UI should look like. JSX allows developers to write HTML-like code directly within JavaScript, making it easier to visualize the component structure. For example:


<h1>Hello, React!</h1>

Under the hood, JSX is transformed into regular JavaScript function calls by tools like Babel.

#State and Props

React components can manage state and receive props (properties). State refers to data that changes over time within a component, while props are read-only data passed from parent to child components. The distinction between state and props is fundamental to React's data flow model.

#Important Facts

  • Declarative Syntax: React encourages a declarative programming style, where developers describe the desired outcome rather than the steps to achieve it. This makes the code more intuitive and easier to understand.
  • One-Way Data Binding: Data flows in a single direction in React, from parent to child components, which simplifies debugging and makes the application's behavior more predictable.
  • Rich Ecosystem: React has a vast ecosystem of libraries, tools, and frameworks, such as Redux, Next.js, and Material-UI, that extend its functionality.
  • Cross-Platform Development: React can be used to build not only web applications but also mobile applications (React Native) and even desktop applications (Electron).
  • Strong Community Support: React has one of the largest and most active developer communities, with extensive documentation, tutorials, and third-party resources available online.

#Timeline

  1. React is developed internally

    React is developed internally at Meta for Facebook's news feed.

  2. React is deployed on

    React is deployed on Instagram's production servers.

  3. React is publicly released

    React is publicly released as an open-source project.

  4. React Native is introduced

    React Native is introduced, enabling mobile app development with React.

  5. React 16 is released

    React 16 is released, introducing the Fiber reconciliation engine.

  6. Hooks are introduced in

    Hooks are introduced in React 16.8, allowing function components to manage state.

  7. React 18 is released

    React 18 is released, adding concurrent rendering and server-side rendering features.

  • Front – end development
  • Single – page application (SPA)

#FAQ

What is the difference between React and React DOM?

React is the core library that includes the component model and rendering logic, while React DOM is a separate package that provides DOM-specific methods for rendering React components in the browser. React DOM is used to bridge the gap between React and the browser's DOM.

Is React a framework or a library?

React is technically a library because it focuses on a specific aspect of development—building user interfaces. However, it is often referred to as a framework due to its extensive ecosystem and the way developers use it to build full-fledged applications.

What are the advantages of using React?

React offers several advantages, including:

  • Improved performance due to the virtual DOM.
  • Reusable components that promote code maintainability.
  • A strong and active community with extensive resources.
  • Flexibility and compatibility with other libraries and frameworks.
  • Support for server-side rendering (SSR) and static site generation (SSG).
What is the difference between state and props in React?

State refers to data that changes over time within a component and is managed internally by the component. Props are read-only data passed from parent to child components and are used to pass data down the component hierarchy. State is mutable, while props are immutable.

How do I get started with React?

To get started with React, you can follow these steps:

1. Install Node.js and npm (Node Package Manager) on your system.

2. Create a new React project using Create React App or a similar tool like Vite.

3. Start building components by writing JavaScript or JSX code.

4. Use tools like Babel and Webpack to transpile and bundle your code.

5. Deploy your application to a hosting service like Vercel, Netlify, or GitHub Pages.

#References

  1. React Official Documentation
  2. React GitHub Repository
  3. Wikipedia: React (JavaScript library))
  4. Why React? (Official Blog Post)
  5. React 16 Release Blog Post
  6. React 18 Release Blog Post

Comments

No comments yet. Start the discussion with a useful note.