Up and Running with ReactJS

Up & Running
with 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

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
JavaScript
React.createClass({
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({
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()!

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 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>

Simple Routing
● Just switch between components
var Dashboard = React.createClass(...);
var Home = React.createClass(...);

Simple Routing (cont’d)
var App = React.createClass({
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>

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

Up and Running with ReactJS

More Related Content

What's hot

Similar to Up and Running with ReactJS

Recently uploaded

Up and Running with ReactJS