Date post: | 16-Apr-2017 |
Category: |
Software |
Upload: | emanuele-delbono |
View: | 4,507 times |
Download: | 0 times |
React.js@emadb
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
var HelloWorld = React.createClass({ render: function() { return ( <h1> Hello world </h1> ); } });
React.render(<HelloWorld />, document.body);
Whooot?
• Markup and behaviour
• Separation of concerns
• Template language?
• Components
• JSX syntax
var HelloWorld = React.createClass({ displayName: "HelloWorld", render: function() { return React.createElement("h1", null, "Hello World"); } });
React.render( React.createElement(HelloWorld, null), document.body);
DOM is slow
Javascript that access to the DOM is slow
console.dir(document.createElement('div'));
A DIV contains about 135 first level properties/function (700 on second level).
Virtual DOM
• Our code act on a fake DOM (virtual dom)
• React.js take care of keep virtual DOM and real DOM synchronised
• Every ReactElement is a light, stateless, immutable, virtual representation of a DOM Element
• A virtual DOM div element contains only 6 properties.
Why I like react so much
• Easy to learn, easy to use
• True reusable components (1 single file per component)
• Functional approach
• Human error messages
• Active community
Superagent
Super Agent is light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve after
being frustrated with many of the existing request APIs. It also works with Node.js!