Thursday, January 28

Notes : Introduction to React.js

React - A javascript library for building user interfaces.

Heart of React
Declarative Component - Describes what your component looks like at any given point of time.
Components are actually re-usable API's that encapsulate a bunch of stuff.
1) The markup
2) The behavior
3) Javascript and CSS

React does not use explicit data binding.

1) How are things initially rendered on a browser?
Just one render function
render : function() { --- }

There is a two pass rendering
a) Generate the Markup which is String
b) Attach Events later once the string is generated.

2) Update of the views
Reconcilation - React automatically updates your DOM when the data changes. Keeps the UI fresh and up to date.
How does it work? The render function returns a representation of component at that point in time. So initially call render and get a representation, then when data changes, call the render function and get another representation. Now compare these two representation and find out differences. Compute the difference and based on the output, batch up DOM mutations and update the View.

Another way of writing your DOM code

For beginners, this is quite a useful tutorial. Go through the first 40 minutes and get the idea on how the react works. Definitely worth checking out.

Be the first one to Comment!!!

Post a Comment