Intoduction to React JS

React JS is one of those numerous fronted JavaScript frameworks which has been gaining lot of traction of late.

Is React Just another JS Framework?
In JavaScript world we have new JS framework everyday. Larger question for a developer to understand before he invests his time on getting on board with new framework

1. How is new framework different from those existing ones : React advocates reusable component model. Main selling point of react is use of virtual DOM which helps to do away with lot of performance issues faces in large frontend apps
2. How is community support for this new framework:  React JS was originally developed at Facebook and is widely used for several features in the website. Also ReactNative (Mobile app framework based out of React JS) is also being used in Facebook mobile app. Also lot of web based companies like coursera are adopting react. So overall React JS is likely to continue enjoying wide and a very active community support.

What is React JS?
React JS identifies itself as "A JavaScript library for building user interfaces". React projects itself as more of architectural pattern and a framework for  building highly reusable UI components
A point to note here is React is not only for building web(HTML based) interfaces but core concepts of React could be used to develop variety of other User interfaces eg. React Native which is used for building native Android/iOS mobile apps

How React works ?
At high level React JS endorses 3 main concepts

1. Declarative : React endorses declarative programming model. React endorses building simple views for each state in your application. React takes care or handling UI updates as data/application state changes
2. Component-Based :  React fundamentally advocates by design User Interfaces set of components. These components have there own life-cycle and states. React also provides a way using which components can interact with each other
3. Reusable Components : Since react advocates decomposing UI into set of components it also promotes developing reusable and highly configurable UI components.
4. Learn Once, Write Anywhere: React framework has fundamentally 2 parts 
1. Components  which are more about encapsulating to data and logic of small part of UI and is agnostic to tech stack or where component is getting rendered by and large
2.  Rendering logic which renders component on respective clients. ReactDOM would render on web. Something like React Native would be more focused on rendering it for Native mobile apps.
5. Virtual DOM : React was one of the earliest adopters of Virtual DOM which to great extent improves performance. Check next section for more details.
6. Framework/Architecture : React with help of flux/redux architectures provide an easy way for each component to respond to overall change in application state

Virtual DOM
Mostly in context of web based application React was one of the first frameworks to endorse and use Virtual DOM. It is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details.

Even though JavaScript is fast as data(model) changes UI components needs to be redrawn and rendered in the browser window to reflect new state of application. Process of re-rendering UI components on browser window is relatively slow one.

To solve the issues with HTML DOM React maintains Virtual DOM object representing current state of Single page application.Whenever application state changes because of new data or user event react gets updated DOM for individual components. React would compare Virtual DOM tree with previous version of DOM before state change. This would enable React to come up with minimal set of changes  that needs to be performed on HTML DOM to update view. React would go ahead and update on HTML DOM with delta changes instead of redrawing entire component all over again.

This forms basic introduction to React JS . Over next couple of posts we will look into developing React components and understanding component life cycle.