The way of React

Talk on React.JS which is a powerful front-end library open sourced by facebook.

Transcript

1. The way of React
2. @rajikaimal @rajikaimal @rajikaimal
3. Agenda • Introduction to React.JS • Few facts on React internals • Brief introduction to Flux architecture • Demo • Angular vs React comparison
4. What’s React.JS A JavaScript library for creating user interfaces Open source Not a framework !!!
5. Out of the box • Component based • Learn once write anywhere • Declarative • Loosely coupled • No routing solutions • No Ajax support
7. React is the V in MVC Model Controller View React
8. Components to the rescue • Declarative syntax (JSX) • Tightly coupled UI logic and description • Cohesive • Reusable • Own properties (props) and states • Uses vanilla JavaScript • Supports ES2015/ES6
9. Thinking in React const Tweet = React.createClass({ render: function() { return ( <div> <input type="text" value={this.props.tweetText} /> </div> ); } });
12. Virtual DOM - an abstraction of real DOM Tree diff algorithm
13. MVC - cascading updates
15. Flux architecture An application architecture for client side web applications one directional data flow
16. Demo time https://github.com/rajikaimal/github-scraper
17. Angular vs React VS
18. Angular vs React • Steep learning curve • Regular DOM • 2 way data binding • No unique solution for server side rendering • Smooth learning curve • Virtual DOM • 1 way data binding • Supports server side rendering
19. What’s next ? • Unit testing : Jest • React Devtools • Redux • Server side rendering
21. Thank you ! @rajikaimal @rajikaimal @rajikaimal