Month: April 2017

React is FAST in what sense?

Today I was debating with my colleague on how React is fast and in what sense? It was interesting discussion and we thought of exploring on this context, hence blogging it for my reference!

I assume, you’ve knowledge on React JS framework before reading this article!

React is FAST in the sense of DOM updates!!!

How React is fast in updating the DOM (Document Object Model) ?

  1. React creates Virtual DOM (React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”) for every component.
  2. Tracks for the changes happening in the react component and updates the Virtual DOM.
  3. Reconciliation happens with the actual DOM for the changes in the Virtual DOM.

It’s all the React magic of transforming the model changes to views!

I’ve come across few blogs posts where they explained the inner details of the React JS and Virtual DOM. Here are few of them –

Real Benefits of React JS Virtual DOM

React: The Virtual DOM

VideoTech Talk : How React.js works

Happy Programming!

Web Tool – Create React App

Facebook has come up with one of the best JavaScript frameworks to build fast & scalable web apps. In this fast paced web development world, with countless dependencies, build frameworks & utility libraries, we may be spending time in choosing the right one’s get started.

May be Facebook would thought through this and they came up with a tool – create-react-app. This tools allows to create react app within no time.

I personally tried this tool for getting started with creating a HelloWorld react app and I did it in few mins!

create-react-app is a CLI which helps scaffolds all the required libraries and build frameworks and help us to focus on building the app without worrying on the setting up the project!

Here is the cool user guide on how to use this tool!

Happy Programming!