up and running with reactjs
TRANSCRIPT
![Page 1: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/1.jpg)
Up & Runningwith ReactJS
June 9, 2015 @ PeopleSpace
![Page 2: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/2.jpg)
Education, tech startups, community
peoplespace.us
![Page 3: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/3.jpg)
![Page 4: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/4.jpg)
![Page 5: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/5.jpg)
React.render(<Selfie/>)
● Freelancer building web and mobile UIs
● AngularJS-OC organizer too
● Node, Ruby, Java, C# too
● locnguyen.com, @locn
![Page 6: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/6.jpg)
Goals
● Learn React building blocks
● See how the component APIs work
● Go home knowing how to start using React
![Page 7: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/7.jpg)
Agenda
1. Origins
2. React components
3. Component state and props
4. Component refs and events
5. React Router
![Page 8: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/8.jpg)
About React
● Originated at FB and Instagram
● A declarative view library, the “V” in MVC
● Improves web dev experience with simple,
cohesive component model
● React - Rethinking Best Practices
![Page 9: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/9.jpg)
Who’s using it?
● Facebook, Instagram (duh)
● AirBnB
● Netflix
● Atlassian (HipChat)
● Yahoo (Mail)
![Page 10: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/10.jpg)
Hello World
var Hello = React.createClass({render: function () {
return <div>Hello World</div>;}
});
React.renderComponent(<Hello/>, document.body);
![Page 11: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/11.jpg)
React Components
● Fundamental building block of React
● Maps to elements in your DOM
● Composable units to structure your app
● Like directives in AngularJS
![Page 12: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/12.jpg)
High cohesion
● Encapsulates display logic and view
![Page 13: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/13.jpg)
JSX
![Page 14: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/14.jpg)
render() {return (
<nav className="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>
);}
![Page 15: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/15.jpg)
render() {return (
<nav className="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>);
}
![Page 16: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/16.jpg)
JSX (it’s a feature, 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}}
![Page 17: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/17.jpg)
JSX JavaScriptReact.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);
![Page 18: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/18.jpg)
Data binding
● Key-value observation: EmberJS,
KnockoutJS
● Dirty checking: AngularJS
● State is hard, so UIs are hard
● “Refreshing” the page is easy
![Page 19: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/19.jpg)
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
![Page 20: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/20.jpg)
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
![Page 21: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/21.jpg)
Component properties
● For data that does not change
● Props are just attributes assigned in JSX
● Accessible with this.props
● getDefaultProps() - set default values if
not provided
![Page 22: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/22.jpg)
Property Example
var Meetup = React.createClass({render: function () {return <h1>{this.props.name}</h1>;
}});React.render(<Meetup name="ReactJS OC" />, document.body);
![Page 23: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/23.jpg)
Component state
● For data that changes
● Accessible with this.state
● getInitialState() - sets the initial state
values
● this.setState()calls render()!
![Page 24: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/24.jpg)
Live: state example
![Page 25: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/25.jpg)
Credit to Ryan Florence
![Page 26: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/26.jpg)
Refs
● Get a handle to your actual DOM elements
● <input type="text" ref="email" />
● this.refs.email
● Interact with DOM APIs
![Page 27: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/27.jpg)
Event handlers
● Add to your elements inlinethis.poke = function () { alert('howdy'); }
<button onClick={this.poke}>Poke</button>
● Send arguments with .bind<button onClick={this.poke.bind(null,
'Loc')}>Poke</button>
![Page 28: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/28.jpg)
Live: refs & events example
![Page 29: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/29.jpg)
Simple Routing
● Just switch between components
var Dashboard = React.createClass(...);
var Home = React.createClass(...);
![Page 30: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/30.jpg)
Simple Routing
● Just switch between components
var Dashboard = React.createClass(...);
var Home = React.createClass(...);
![Page 31: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/31.jpg)
Simple Routing (cont’d)var App = 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>;}
});
![Page 32: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/32.jpg)
Simple Routing (cont’d)
function render () { var route = window.location.hash.substr(1); React.render(<App route={route} />, document.body);}
window.addEventListener('hashchange', render);render(); // render initially
![Page 33: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/33.jpg)
React Router
● Routing library by Ryan Florence
● Heavily influence by Ember Router
● Makes nested states simple
● GitHub, Examples, Docs
![Page 34: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/34.jpg)
Routes Declaration<Route handler={App} path="/"> <Route name="home" path="home" handler={Home} /> <Route name="dashboard" path="dashboard" handler={Dashboard}/></Route>
![Page 35: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/35.jpg)
Links
<Link to="home">Home</Link><Link to="dashboard">Dashboard</Link>
![Page 36: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/36.jpg)
Live: React Router Example
![Page 37: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/37.jpg)
Free Resources
● The docs
● ReactConf 2015 Videos
● The Secrets of React’s Virtual DOM
● React Podcast
![Page 38: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/38.jpg)
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
![Page 39: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/39.jpg)
What’s next? Need speakers!
● Component lifecycle● Component best practices● 3rd party JS integration● React Router● Data flow, Flux architecture● React Native● Testing● Tooling
![Page 40: Up and Running with ReactJS](https://reader036.vdocuments.us/reader036/viewer/2022062300/55bfd713bb61ebf6198b470b/html5/thumbnails/40.jpg)