An Overview of Facebook’s React Javascript Framework

Thu Jan 23 2014

Paul Shan

The javascript framework jungle is becoming denser day by day, as more and more framework trees are growing. Another new tree of this jungle is Facebook React. React is not quite like other javascript frameworks like Angular, Ember, Backbone, CanJs, etc. It’s made to solve very specific problem, “Complex UI Rendering”; which is just a subset of the features all the well known library provides. So, if you need ONLY UI rendering or data binding, why to use some heavy weight framework; you should better switch to React.

Why React was created

The common way of building UI is to first render your template, then wire up events between your model and the DOM so when a particular property on your model changes, you can get a specific piece of the DOM and update some property on it or its contents. For small projects this approach is really nice, and you will hardly find any performance issue. But in case of big projects it’s a performance penalty to do this sort of thing lots of times in a single frame of execution since querying and updating the DOM are pretty expensive operations. It also tends to produce tons of boilerplate code. This was the cause behind the birth of React.

How is it different?

React is not a MVC framework:

React has been developed to build component based user interfaces. It encourages the creation of reusable UI components which present data those changes over time.

React doesn’t use templates:

Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI. React approaches building user interfaces differently by breaking them into components. This means React uses a real, full featured programming language to render views, which means good efficiency.

Reactive updates are dead:

In a traditional JavaScript application, you need to look at what data changed and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, which provides a declarative interface via directives and data binding, requires a linking function to manually update DOM nodes. React has a different approach. When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced, and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM. The data returned from render is neither a string nor a DOM node -- it's a lightweight description of what the DOM should look like.

Why to use React?

Simple:

It doesn’t do much complex works so the implementation is also very simple. Simply tell it, how your app should look at any given point of time, and react will take care of all data changes.

Declarative:

Like any other data binding featured framework react also updates the data in your templates. But the difference is, it knows where exactly the changes need to be done and make the cost minimal.

Dynamic UI and Interactivity:

It makes your UI very lively with data binding, smart event handling and delegation.

Multiple and Reusable Components:

React has the concept of nested component where you can use the components as parent child relation. Reusability is something which always makes a project well structured.

Conclusion

React is not developed to do many things. It’s really short and simple with some limited but perfect features. Its data binding concept is really a mature one; and so is reusable component. If your project is just related to rich UI, then there is no need to go with heavy frameworks like Ember Angular Backbone etc; when you have a real light and mature one like React.

SHARE THIS ARTICLE

post-thumbnail
Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
post-thumbnail
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
post-thumbnail
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

Thu Mar 10 2016

OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

Sat Mar 01 2014

This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading