Introduction to React JS: An Overview

Introduction to React JS: An Overview

ReactJS is a JavaScript library developed by Facebook. It is used for building reusable UI components. React JS official documentation defined it as follows:

React is a library for building composable user interfaces, it supports and encourages the creation of reusable UI components, which presents data that changes over time by using declarative syntax.

https://reactjs.org

React is used by most developers as the “V” part of the MVC architecture. React abstracts away the DOM from you, offering a simpler programming model and off course better experience.

One of the selling points of React is that it can also render on the server using Node. It can power native apps using its framework called React Native. It implements one-way reactive data flow, which reduces the boilerplate making its comprehension easier than traditional data binding.

It uses a concept called Virtual Dom, that selectively renders subtrees of nodes upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

What is Virtual Dom?

Think of a Virtual DOM as an object modeled around a Person “A”. It has every relevant property this person could possibly have, and it mirrored the person current state. This is exactly what React does to the DOM.

Now think, about adding some properties and extra features to this Virtual DOM modeled against Person “A”. In the Land of React, when changes are made on the Virtual DOM two things takes place:

First, React runs a “diffing” algorithm, which identifies what was changed and Secondly, it reconciles and Updates the DOM with the changes on the Virtual DOM.

The way React works, rather than taking the Person “A” and rebuild from ground up, it would only change the cloths, face and arms. This implies that only that portion which needs be reconciled is updated.

Since React is using a “Fake” DOM called Virtual DOM and not the actual DOM, it also opens up a whole of new possibilities, thus we can render this Fake DOM on the server, and there comes server side React Views.

React Features

JSX: JSX is a JavaScript syntax extension. The use of JSX syntax in developing a React JS application is not compulsory but it is highly recommended.

Components: React is all about components, so you need to think about your application as bits of components to be coupled together. Just like in web development where applications are split into header, footer and sidebars.

Breaking of applications into components helps in code organization and makes development and maintenance of large applications a lot easier.

Unidirectional Data Flow and Flux: React implements one-way data flow which makes it easy in thinking about our application. It uses Flux to achieve this unidirectional flow of data.

License: React is licensed under the Facebook Inc and its documentation is licensed under CC by 4.0.

Why React?

Applications built on are quite reactive, they are super-fast. This is because React uses virtual DOM which is a JavaScript object and in terms of performance is way faster than the regular DOM.

One of its unique selling points is that not only does it perform on thee client side, but it can also be rendered on the server side as they work together inter-operably.

Components and data patterns improve readability, which development and maintenance of large applications easier.

Why Not React?

React covers only the view layer of our application, hence you still need to choose other technologies to get a complete tooling set for development.

It uses inline templating and JSX which may seem awkward to some developers.

Join the discussion

2 comments

Vivvaas’ Corner

Learn skills that matters from a community of talented developers and writers whose joy is to write in a way that you will understand.