Tucson ReactJS
Who am I?
Where are we?
Wifi
SSID - Elegant Thought Netgear
password- hackathon
Topics
React introduction
Code review- https://github.com/TucsonReactJS/primer
Q&A
React
A library for building user interfaces
Why it's different
It's a library, not a framework (~121KB)
It's only the UI. The "V" in MVC
It eschews past best practices for a new paradigm
MVC / MVVM
React
Component
Why it's awesome
Everything is just JavaScript, not some DSL . Actually the best JavaScript, as it fully embraces ES6 (the next version of JavaScript)
Insanely fast. Renders to a Virtual DOM, and batches updates to the actual DOM. Only updates what changed.
React vs Angular
(Timeline view)
Event delegation and Synthetic events
It makes your dev process
SIMPLE
*eventually
Simple structure
Uni-directional data flow
Simple at scale
Instagram (web)
Facebook Messenger
Flipboard
Yahoo! Mail
New York Times
Khan Academy
'use strict';
import React from "react";
import RepoListItem from "./repo_list_item"
export default
class RepoList extends React.Component {
constructor( props ) {
super(props);
}
render() {
const repos = this.props.repos.map(( r, idx ) => {
return <RepoListItem key={idx} repo={r} />;
});
return (
<div {...this.props} className={this.props.className + " repo-list"}>
<h1>ReactJS
<small> {this.props.repos.length} repositories</small>
</h1>
<ul className="media-list">
{repos}
</ul>
</div>
);
}
}
JSX
compiles down to regular JS expressions with a build step
return (<p className="name-text">{this.state.name}</p>);
return ( React.createElement('p', { className: "name-text" } );
USE JSX!
It's only weird for a few minutes, I promise
A simple API
Component Life Cycle is only 7 methods
Mounting
componentWillMount()componentDidMount()
Unmounting
componentWillUnMount()
Updating
componentWillRecieveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
componentDidUpdate(prevProps, prevState)
Show and Tell
One more thing...
Nothing about the main React API is dependent on the DOM
Which means you can render on the Server, or to Canvas, or to Native!
Questions?
Upcoming topics
Unit testing React applications
Flux architecture and Server Side Rendering
Animation using ReactJS
ReactJS Primer
By Charles King
ReactJS Primer
A quick primer for React and why it rocks
