React, Full overview

Recently, we discussed a lot about Express, like what it really is, what
abstraction it gives, what cost we pay, and many other things.

Those perspectives give us a mental model to understand the technology in
depth, rather than just from a working level. I think we need to continue
that discussion further on other technologies.

So, I decided to continue those discussions with React.js.

Firstly, to understand those discussions deeply, you need some knowledge
about React. And I assume that you have that exposure.

What Is React Actually?

Firstly, technical definition:

React is a declarative, component-based JavaScript library for constructing
user interfaces from a tree of reusable components, where UI output is
derived from application state and React efficiently updates the DOM when
that state changes.

The first technical word you see is declarative, and surely you are confused
by that word. So, what is declarative?

To describe UI, there are two broad ways, which are imperative and
declarative.

1) Imperative

In imperative, you tell the computer how to do something. You explicitly
describe the operation and UI.

2) Declarative

This is amazing. In declarative, you describe what you want. You don’t
manually say, find that button, change this text, add class. Instead, you
describe what you want.

React is based on declarative. You describe what UI you want, React
determines what changes are necessary.

Now, what is a tree of reusable components?

In React, we have a hierarchical structure to render individual components.
The top-level component, called the root component, renders first, which
then renders its child components. This becomes a structure like a tree,
where data flows in one direction, from the root, meaning the parent, to the
child.

React provides mechanisms for building UI with components, props, state,
hooks, reconciliation, and event handling. The reconciliation is
interesting, which we talk later on in a specific post.

You listen about component and also use this component, but what is
component actually?

The component is commonly a JavaScript function that accepts inputs and
returns a description of the UI. With the use of multiple components, we
construct the User Interface.