What is React?

What React is

React is an open source JavaScript library from Meta for building user interfaces out of reusable components. Components keep large interfaces consistent and easy to change. React also has one of the biggest ecosystems of libraries and developers.

React was created at Facebook by an engineer named Jordan Walke. It was used inside Facebook and Instagram first, and it was released as open source in 2013. The idea of describing the interface as a function of data was unusual at the time and took a while to be accepted.

React Native followed in 2015 and brought the same ideas to mobile apps. Hooks arrived in 2019 and changed how most components are written, replacing class components in new code. Later releases added concurrent rendering and Server Components, and the documentation moved to react.dev in 2023.

How React works

In React, you build a screen out of components. A component is a JavaScript function that returns a description of what should appear on screen. Components are written in JSX, a syntax that looks like HTML inside JavaScript.

Data flows into a component through props, which work like function arguments. Data that changes over time, such as the text in a form field, is kept in state. When state changes, React runs the component again and updates the page to match. Hooks such as useState and useEffect are the functions you use to add state and side effects to a component.

React keeps a lightweight copy of the page in memory, often called the virtual DOM. After each change it compares the new copy with the old one and applies only the differences to the real page. This means you describe what the screen should look like, and React works out the steps to get there.

Key features of React

• Reusable components

  A button, form, or card is written once and used in many places. Changing the component updates every place it is used.

• JSX syntax

  Markup and logic live together in one file. This makes it easy to see what a component shows and why.

• Hooks

  Hooks let function components hold state, run effects, and share logic. You can also write your own custom hooks.

• One way data flow

  Data moves down from parent to child through props. This makes it easier to trace where a value came from.

• Large ecosystem

  There are mature libraries for routing, forms, data fetching, animation, and interface kits. Most problems already have a well known solution.

• Works beyond the web

  The same ideas are used in React Native for mobile apps and in desktop apps built with Electron.

When to use React

React compared with alternatives

How to start learning React

1. 01Get comfortable with JavaScript basics first, especially functions, arrays, objects, and modules.
2. 02Work through the Quick Start and the tic-tac-toe tutorial on react.dev, the official documentation.
3. 03Create a practice project with a build tool by running npm create vite@latest and picking the React template.
4. 04Build a to-do list or a small expense tracker to practice components, props, state, and lists.
5. 05Add data fetching from a public API, then try a framework such as Next.js when you need more than one page.

What React costs

React is free and open source under the MIT license. There are no paid plans or usage fees. Most of the tools and libraries around it are also free and open source.

How DATAL Projects uses React

React is part of our web development work in the Philippines. Common uses:

• Interactive web app screens
• Admin panels and forms
• Desktop apps through Electron

Common questions about React