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