Who am I?
Where are we?
Wifi
SSID - Elegant Thought Netgear
password- hackathon
Topics
React introduction
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
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>
);
}
}
A simple syntax?
JSX
compiles down to regular JS expressions with a
build step
return (
<p className="name-text">{this.state.name}</p>
);
compiles into
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)
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!
Upcoming topics
Unit testing React applications
Flux architecture and Server Side Rendering
Animation using ReactJS