Introduction to ReactJs

Low-level introduction to React, how components are created, and how they can integrate with Angular and Node.

1. REACT.JS Hello, my name is
2. LET’S TAKE A JOURNEY
4. CACHED PAGES User makes a request Server sends it to the user
5. COMPILED PAGES User makes a request Server builds the response Server sends it to the user
6. AND THEN…
7. SMALLER UPDATES User makes a request Server builds page Server sends it back
8. SMALLER UPDATES User makes a request Server builds page Server sends it back User triggers a change Server builds the response Server sends it back
9. CLIENT-SIDE TEMPLATING User makes a request Server builds page Server sends it back
10. CLIENT-SIDE TEMPLATING User makes a request Server builds page Server sends it back User triggers a change Server builds the response data Server sends it back Client compiles UI from template
11. CLIENT-SIDE TEMPLATING User makes a request Server builds page Server sends it back User triggers a change Server builds the response data Server sends it back Client compiles UI from template
12. THERE IS STILL A PROBLEM… something
14. REACT.JS
15. https://facebook.github.io/react/docs/why-react.html React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time.
16. https://facebook.github.io/react/docs/why-react.html React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. Give it five minutes
17. REACT ELEMENT var el = React.createElement(‘a’, { href: ‘/about/‘, className: ‘nav’ }, [‘About Us’]); JS createElement(type, props, children);
18. REACT ELEMENT var el = React.createElement(‘a’, { href: ‘/about/‘, className: ‘nav’ }, [‘About Us’]); var el = (<a href=“/about/“ className=“nav”>About Us</a>); JSX JS createElement(type, props, children);
19. REACT COMPONENT var link = React.createClass({ render: function () { return ( <a href=“/about/“ className=“nav”>About Us</a> ); } });
20. SIMPLE DEMO http://jsbin.com/buwoba/edit?js,output var Header = React.createClass({ render: function () { return ( <span>{this.props.name}</span> ) } }); React.render(<Header name="Atlanta Full Stack" />, document.getElementById('app'));
21. VIRTUAL DOM
22. TWO vDOMS FOR DIFFING
23. setState(function | obj, [callback])
24. setState(function | obj, [callback])
25. setState(function | obj, [callback])
26. shouldComponentUpdate(props, state)
27. LIFE CYCLE: INITIALIZATION getDefaultProps() // Object
28. LIFE CYCLE: MOUNTING getInitialState() // Object componentWillMount() render() componentDidMount()
29. LIFE CYCLE: UPDATING componentWillReceiveProps(nextProps) shouldComponentUpdate(nextProps, nextState) componentWillUpdate(nextProps, nextState) componentDidUpdate(prevProps, prevState)
30. LIFE CYCLE: UNMOUNTING componentWillUnmount()
31. SLIGHTLY MORE COMPLICATED DEMO http://jsbin.com/rezabe/edit?js,output var Event = React.createClass({ getDefaultProps: function () { var _date = new Date(); return { name: 'Sample Name', date: _date, time: _date }; }, render: function () { return ( <div> <Header name={this.props.name} /> <DateTime date={this.props.date} time={this.props.time} /> </div> ); } });
32. IT’S THE `V` IN MVC
33. INTEGRATES WITH ANGULAR http://jsbin.com/pokidat/6/edit?js,output app.directive('appHeader', function () { return{ restrict: 'E', scope: '=', link: function (scope, el, attrs) { React.render(<Header name={attrs.headername}/>, el[0]); scope.$watch('headerName', function (newVal, prevVal) { React.render(<Header name={newVal}/>, el[0]); }); } }; });
34. WORKS ON NODE.JS var handlerFn = function (request, reply) { reply( React.renderToStaticMarkup( React.createElement(Header, { name: "Atlanta FullStack” }) ) ); };
35. WHO IS USING REACT Facebook Instagram Yahoo Atom Khan Academy Squarespace Codeacademy Hipchat Netflix Paypal Ebay Airbnb BBC Flipboard Salesforce many, many more
36. QUESTIONS? Anthony Pipkin @apipkin http://linkedin.com/in/apipkin