To start I want to say to not think about the technology and old paradigms, leave what you know about developing UI’s outside. Focus on the ideas implemented in the library.
Slides from my talk at Chicago HTML5 meetup to complement are at the end of the post.
React.js is a component-based library created to build modular and fast UIs. React manages the DOM updates applying a concept called Virtual DOM, therefore you don’t need to think about DOM manipulations anymore managing all the states in your UI with jQuey.
The React library includes a lightweight implementation of the DOM and events System with W3C Standards.
React uses the virtual DOM (component representation) to diff whenever a change occurs to your component which it’s going to compare your old/previous representation with your updated/new representation and isolate just the parts that changed compared with your previous Virtual DOM.
When React needs to actually render the representation in the DOM it’s going to iterate through the components, recursively generate a string with the markup, and put in the document. After doing that, it’s going to attach the events at the top level as even delegation… so you have event delegation by default.
JSX is an xml-like syntax to write html markup in your React component..which is familiar for all front end developers and adventurers.
The methods below are part of the mounting cycle…
Those methods occurs every time before you see your App in the browser.
And these are part of Unmounting cycle…
The methods part of the updating lifecycle are:
and after DOM mutations
Parent components pass data through props to their children and the children can’t change the data received from the parents.
You can think of props as options, configuration (immutable). States are mutable where when used in your component you need a default state. Try to keep your components states for less complexity over time.
Check out the slides to have a better understanding.