What Is React?

React is a JavaScript library that can be used to describe views (for example, HTML elements) based on some state (which is often in the form of data). When you’re working with React in a browser, React can mount the described views in the browser’s DOM (Document Object Model) and automatically update what needs to be updated whenever the original state changes.

React is a small but powerful library, with the power being more in the concepts than in the implementation. Some of the concepts under which React operates are:

Reusable, composable, and stateful components:

In React, we build views using smaller components. We can reuse a single component in multiple places, with different states and properties, and components can contain other components. Every component in a React application has a private state that may change over time, and React will take care of updating the component's view when its state changes.

The nature of reactive updates:

React's name is the simple explanation for this concept. When the state of a component changes, those changes need to be reflected somewhere. For example, we need to regenerate the HTML views for the browser's Document Object Model (DOM) whenever their state changes. With React, we do not not need to worry about how to reflect the state changes; React will simply react to the changes and automatically update the views when needed.

The virtual representation of views in memory:

With React, we write HTML using JavaScript. We rely on the power of JavaScript to generate HTML that depends on some data, rather than enhancing HTML to make it work with that data. Enhancing HTML is what other JavaScript frameworks usually do. For example, Angular extends HTML with features like loops, conditionals, and others.

If we are receiving just the data from the server (with AJAX), we need something more than HTML to work with it, so it's either using an enhanced HTML, or using the power of JavaScript itself to generate the HTML. Both approaches have advantages and disadvantages, and React embraces the latter one, with the argument that the advantages are stronger than the disadvantages.

Using JavaScript to render HTML allows React to have a virtual representation of HTML in memory (which is aptly named the Vvirtual DOM), and React uses that to render the views virtually first. Every time a state changes, and we have a new HTML tree that needs to be written back to the browser's DOM, instead of writing the whole tree, React will only write the difference between the new tree and the previous tree (since Reacit has both trees in memory). This process is known as Ttree Rreconciliation, and I think it’s the best thing that’s happened in Wweb Ddevelopment since AJAX!