What is React?

Introduction

React is a JavaScript library for building user interfaces (UI). It was developed by Facebook (now Meta) and first released in 2011. Today, React is one of the most popular frontend libraries in the world.

Why React?

Virtual DOM

When state changes, React does not manipulate the real DOM directly. Instead, React creates a Virtual DOM copy, compares it with the previous version (diffing), and then updates only the parts of the DOM that actually changed.

// Simple Virtual DOM concept
// React compares the new version vs the old one, then applies a minimal update to the real DOM
const element = <h1>Hello, World!</h1>;

Components in React

Every UI in React is built from components. A component is a JavaScript function that returns markup.

function Greeting() {
  return <h1>Welcome to React!</h1>;
}

One-way Data Binding

Data in React flows in one direction: from parent to child through props. This differs from two-way binding in other frameworks such as Angular.

function App() {
  const name = "John";
  return <Greeting name={name} />;
}

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

React Native

React is not only for the web. With React Native, you can build mobile apps for iOS and Android using the same concepts.

Summary

React offers an efficient and structured way to build UIs. With its component model, Virtual DOM, and vast ecosystem, React is the top choice for many developers.

In the next chapter, we will learn how to install and set up a React development environment on your computer.