Downloaded 31 times
Uploaded byLoc Nguyen
Up and Running with ReactJS
This document provides an overview and agenda for a workshop on getting started with ReactJS. The workshop will cover React components, component state and properties, component references and events, and React Router. It will discuss how React originated at Facebook and Instagram and uses a declarative view library approach. The virtual DOM and how it diffs changes to efficiently update the DOM is also highlighted.
Engineeringβ¦
Up and Running with ReactJS
- 1. Up & Running withReactJS June 9, 2015 @ PeopleSpace
- 2. Education, tech startups,community peoplespace.us
- 5. React.render(<Selfie/>) β Freelancer buildingweb and mobile UIs β AngularJS-OC organizer too β Node, Ruby, Java, C# too β locnguyen.com, @locn
- 6. Goals β Learn Reactbuilding blocks β See how the component APIs work β Go home knowing how to start using React
- 7. Agenda 1. Origins 2. Reactcomponents 3. Component state and props 4. Component refs and events 5. React Router
- 8. About React β Originatedat FB and Instagram β A declarative view library, the βVβ in MVC β Improves web dev experience with simple, cohesive component model β React - Rethinking Best Practices
- 9. Whoβs using it? βFacebook, Instagram (duh) β AirBnB β Netflix β Atlassian (HipChat) β Yahoo (Mail)
- 10. Hello World var Hello= React.createClass({ render: function () { return <div>Hello World</div>; } }); React.renderComponent(<Hello/>, document.body);
- 11. React Components β Fundamentalbuilding block of React β Maps to elements in your DOM β Composable units to structure your app β Like directives in AngularJS
- 12. High cohesion β Encapsulatesdisplay logic and view
- 13.
- 14. render() { return ( <navclassName="top-nav"> <ul className"horizontal-link-list"> {links.map(function (link) { return ( <li key={link.id} className={loggedIn ? 'warn' : ''}> <a href={link.href}>{link.text}</a> </li> ); })} </ul> </nav> ); }
- 15. render() { return ( <navclassName="top-nav"> <ul className"horizontal-link-list"> {links.map(function (link) { return ( <li key={link.id}> <a href={link.href}>{link.text}</a> </li> ); })} </ul> </nav> ); }
- 16. JSX (itβs afeature, not a bug) β Preprocessor that only looks like HTML β NOT strings of markup w/XSS vulnerability β Sugar for calling React functions β No need for abstractions in a template lang <ng-if> or {{#if}}
- 17. JSX JavaScript React.createClass({ render: function (){ return ( <ul id="tasks"> <li>Task 1</li> </ul> ); } }); var li = React.createElement('li', null, 'Task 1'); var ul = React.createElement('ul', {id:'tasks'}, li); React.render(ul, document.body);
- 18. Data binding β Key-valueobservation: EmberJS, KnockoutJS β Dirty checking: AngularJS β State is hard, so UIs are hard β βRefreshingβ the page is easy
- 19. The virtual DOM βReactβs (Simple) Secret Sauce β In-memory representation of the DOM β Diffs changes and updates DOM as needed β Be Predictable, Not Correct
- 20. The render function βInsert JSX here β Called when component is mounted β Called every time the state changes β βrefreshβ the page except mutate DOM only where needed
- 21. Component properties β Fordata that does not change β Props are just attributes assigned in JSX β Accessible with this.props β getDefaultProps() - set default values if not provided
- 22. Property Example var Meetup= React.createClass({ render: function () { return <h1>{this.props.name}</h1>; } }); React.render(<Meetup name="ReactJS OC" />, document.body);
- 23. Component state β Fordata that changes β Accessible with this.state β getInitialState() - sets the initial state values β this.setState()calls render()!
- 24.
- 25. Credit to RyanFlorence
- 26. Refs β Get ahandle to your actual DOM elements β <input type="text" ref="email" /> β this.refs.email β Interact with DOM APIs
- 27. Event handlers β Addto your elements inline this.poke = function () { alert('howdy'); } <button onClick={this.poke}>Poke</button> β Send arguments with .bind <button onClick={this.poke.bind(null, 'Loc')}>Poke</button>
- 28. Live: refs &events example
- 29. Simple Routing β Justswitch between components var Dashboard = React.createClass(...); var Home = React.createClass(...);
- 30. Simple Routing β Justswitch between components var Dashboard = React.createClass(...); var Home = React.createClass(...);
- 31. Simple Routing (contβd) varApp = React.createClass({ render: function () { var Child; switch (this.props.route) { case 'dashboard': Child = Dashboard; break; case 'home': Child = Home; break; default: Child = Home; } return <div><Child/></div>; } });
- 32. Simple Routing (contβd) functionrender () { var route = window.location.hash.substr(1); React.render(<App route={route} />, document.body); } window.addEventListener('hashchange', render); render(); // render initially
- 33. React Router β Routinglibrary by Ryan Florence β Heavily influence by Ember Router β Makes nested states simple β GitHub, Examples, Docs
- 34. Routes Declaration <Route handler={App}path="/"> <Route name="home" path="home" handler={Home} /> <Route name="dashboard" path="dashboard" handler={Dashboard}/> </Route>
- 35.
- 36. Live: React RouterExample
- 37. Free Resources β Thedocs β ReactConf 2015 Videos β The Secrets of Reactβs Virtual DOM β React Podcast
- 38. Paid Resources β egghead.io- React, Native, Flux β frontendmasters.com - 4.5 hour React intro β pluralsight.com - 3 hour React intro β reactweek.com - React, Flux, Router, Webpack
- 39. Whatβs next? Needspeakers! β Component lifecycle β Component best practices β 3rd party JS integration β React Router β Data flow, Flux architecture β React Native β Testing β Tooling