The Beauty of React.js

React as per its official documentation is "A JavaScript library for building user interfaces". It is a lightweight, open-source JavaScript library maintained by Facebook. Before a new version of React is released, it is thoroughly tested by the team at Facebook. Since it is initial release seven years ago, React has grown in popularity among developers and has many singing its praises. In this article I will talking about some the pros of building user interfaces with React. Let's get started.

1. React uses JSX

   React relies on the power of JavaScript to generate HTML that depends on some data, rather than enhancing HTML to make it work with that data. This one of the distinctive features of React. Other frameworks extends HTML's features to enhance it, for example Angular uses directives to enhance HTML. JSX is a programming language with an HTML-like syntax that compiles down to pure JavaScript at runtime. JSX is actually just syntactic sugar that will compile down to pure JavaScript code.

2.  React's Virtual DOM

   The way the browser's DOM(the "real" DOM) renders and re-renders webpages can be costly because every time you touch a node just to read an attribute or a class name, or to get to a child or sibling, the browser has to search, check, parse a rather large number of proprieties and values for each node. React's VDOM is kind of like this legacy browser problem. It uses a conceptual DOM known as a virtual DOM that holds a representation of the DOM tree in memory by creating an in-memory data structure cache, perform computations on DOM nodes and finally decides which part of the DOM has been mutated and then updates the DOM efficiently rather than re-rendering the entire DOM tree. By using the virtual DOM, React applications tries to minimise DOM manipulation operations thereby making applications faster and more performant. Some developers think that the Virtual DOM is the best thing that has happened to web development since AJAX.

3. React's reusable, composable and stateful components

   React is a component based library, you can think of components in React as simple JavaScript functions which can be reused as needed to compose bigger functions from smaller ones. A Component is one of the core building blocks of React .Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React components are simply JavaScript functions that we call with props and states as inputs and the outer is a user interface. These components like functions are reusable in that a single component can be used multiple times and bigger components can be composed from smaller ones. A difference between React components and pure JS functions is that a full React component can have a private state to hold data that may change over time.

4. React is Declarative

   React gives developers an opportunity to developers to declaratively create user interfaces. What this means is that, you tell react what should be done and let it figure out how to perform it unlike in imperative programming where you have to tell the machine how to perform an action. Declarative style is better as you don’t have to care about the implementation.

5. Community Supports.

   As of the time of this writing, React has received over 164K stars on GitHub, has over 1,533 contributors and has been forked about 32.7k times, this just goes to show that the React is backed by the a massive developer community.

These are just some of the pros of building user interfaces with React.js. This doesn't mean it doesnt come with its own bowl of disadvantages(for example it doesn’t perform well with SEO) but I guess I'd just leave that as stories for another time. As always thank you for rendering my article. You can connect with me on twitter @brandonbawe. Keep on exploring and exploiting the beauty of React(it's good for your health😁😁). See you next time. Happy Coding 💻.