How is React.js different from your framework

React.js is an another cool javascript framework for web app developers. In this article, I’ll try to explain you why.

React.js is developed by Facebook, and is currently used  in some components within the facebook app – try to inspect some elements and search for those with data-reactid attribute. Facebook claims that React tends to be the V in MVC web app architecture, and it is true. You can simply use it with another frameworks to speed up some problematic parts of your application, and it works just fine. Facebook offers great official documentation, which basically covers all stuff you want to know to successfully use the framework.

The advantage of React among other frameworks like Angular or Ember (at least theirs view/template part) is speed. The reason is virtual DOM. Every time something is changed, React first updates the virtual DOM, and then searches for differences towards previous representation; the result diff is then updated in the browser DOM. The fact is very interesting because it give us developers the ability to run React in web workers, because as you may know, access to DOM is restricted in other than master thread.

Everything in React is a component. An instance of a component has its own state and properties, which can be changed over time. When a state or a property change is triggered, React will create a diff with virtual DOM and updates the real DOM, if needed.

Due to React’s virtual DOM, html markup of component is written in a special way, using React.DOM methods, a little similar as using jQuery append() and html() methods.

To eliminate this disadvantage, jsx pre-compiler can be used to allow us to write markup in html-like syntax. Needs to be said, the markup have to be valid xml, but jsx will convert the markup to valid html 5.

As you can see, component’s markup and javascript is coupled together, what can be a bit confusing for some developers.

Learn

React is simple and easy to learn. I wont write an another learn how to start guide, there’s already a great official documentation, where you can find everything to help you get started. But don’t hesistate to post a comment, if you have any questions.