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.