up and running with reactjs
TRANSCRIPT
Up & Runningwith ReactJS
June 9, 2015 @ PeopleSpace
Education, tech startups, community
peoplespace.us
React.render(<Selfie/>)
● Freelancer building web and mobile UIs
● AngularJS-OC organizer too
● Node, Ruby, Java, C# too
● locnguyen.com, @locn
Goals
● Learn React building blocks
● See how the component APIs work
● Go home knowing how to start using React
Agenda
1. Origins
2. React components
3. Component state and props
4. Component refs and events
5. React Router
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
Who’s using it?
● Facebook, Instagram (duh)
● AirBnB
● Netflix
● Atlassian (HipChat)
● Yahoo (Mail)
Hello World
var Hello = React.createClass({render: function () {
return <div>Hello World</div>;}
});
React.renderComponent(<Hello/>, document.body);
React Components
● Fundamental building block of React
● Maps to elements in your DOM
● Composable units to structure your app
● Like directives in AngularJS
High cohesion
● Encapsulates display logic and view
JSX
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>
);}
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>);
}
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}}
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);
Data binding
● Key-value observation: EmberJS,
KnockoutJS
● Dirty checking: AngularJS
● State is hard, so UIs are hard
● “Refreshing” the page is easy
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
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
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
Property Example
var Meetup = React.createClass({render: function () {return <h1>{this.props.name}</h1>;
}});React.render(<Meetup name="ReactJS OC" />, document.body);
Component state
● For data that changes
● Accessible with this.state
● getInitialState() - sets the initial state
values
● this.setState()calls render()!
Live: state example
Credit to Ryan Florence
Refs
● Get a handle to your actual DOM elements
● <input type="text" ref="email" />
● this.refs.email
● Interact with DOM APIs
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>
Live: refs & events example
Simple Routing
● Just switch between components
var Dashboard = React.createClass(...);
var Home = React.createClass(...);
Simple Routing
● Just switch between components
var Dashboard = React.createClass(...);
var Home = React.createClass(...);
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>;}
});
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
React Router
● Routing library by Ryan Florence
● Heavily influence by Ember Router
● Makes nested states simple
● GitHub, Examples, Docs
Routes Declaration<Route handler={App} path="/"> <Route name="home" path="home" handler={Home} /> <Route name="dashboard" path="dashboard" handler={Dashboard}/></Route>
Links
<Link to="home">Home</Link><Link to="dashboard">Dashboard</Link>
Live: React Router Example
Free Resources
● The docs
● ReactConf 2015 Videos
● The Secrets of React’s Virtual DOM
● React Podcast
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
What’s next? Need speakers!
● Component lifecycle● Component best practices● 3rd party JS integration● React Router● Data flow, Flux architecture● React Native● Testing● Tooling