React a technical elaboration

What is React

We are going to cover a very popular library. Maybe, the most popular frontend UI JavaScript library as of now.

React is a JavaScript library for building fast and interactive user interfaces. It was developed by Facebook in 2011 and currently, it’s the most popular javascript library for building user interfaces.

As you can see on google trends, React is dominating the space of libraries and frameworks for building user interfaces. The other two players here are a

Angular (in yellow) and VUE JS (in blue). So if you want to expand your job opportunities as a front-end developer, you should have React on your resume.

Components

At the heart of all React applications are ‘components’. A component is essentially a small piece of the user interface. So, when building applications with react, we build a bunch of independent, isolated, and reusable components and then compose them to build complex user interfaces.

Every react application has at least one component which we refer to as the root component. This component represents the internal application and contains other child components, so every react application is essentially a tree of components. If you have worked with Angular 2 it should sound familiar. We can reuse components on other pages or even in different applications, so each component is a piece of UI. We can build these components in isolation and then put them together to build complex UIs.

A ‘class’ & DOM element

In terms of implementation, a component is typically implemented as a JavaScript ‘class’. This class has some state and render methods. The state here is the data that we want to display when the component is rendered. And the render method as you can tell is responsible for describing what the UI should look like.

The output of this render method is a react element, which is a simple plain JavaScript object. This object maps to a so-called DOM element. It’s not a real DOM element, it’s just a plain JavaScript object that represents that DOM element in memory. React keeps a lightweight representation of the DOM in memory, which were referred to as the virtual DOM.

Unlike the browser or the real DOM, this virtual DOM is cheap to create. When we change the state of a component, we get a new react element. React will then compare this element and his ‘children’ with the previous one, it figures out what has changed and then it will update a part of the real Dom to keep it in sync with the virtual DOM.

Simply change the status

That means, when building applications with React unlike vanilla JavaScript or jQuery, we no longer have to work with the Dom API in browsers. In other words, we no longer have to write code in query and manipulate the DOM or attached event handlers to DOM elements. We simply change the state of our components and react will automatically update the Dom to match that state.

That’s exactly why this library is called React because when the state changes, React essentially reacts to the state change and updates the DOM.

You can choose other libraries, but as previously explained, it just works better and faster. This is what we think, the future of frontend or UI & UX development