Intro to ReactJS

Intro to ReactJS
!
!
!
Jeff Winkler
@winkler1
http://react.rocks

What I'll be showing
• Current approaches
• React
• Demos
• Summarize

JQuery!
$('article.left section').click(function() {
var was_selected = $(this).hasClass('section-selected');
$('article.left section').removeClass('section-selected');
if (!was_selected) {
$(this).addClass('section-selected');
}
});
!
$('article.right section').click(function() {
$(this).toggleClass('right-selected');
if ($('section.right-selected')) {
$(this).children('input.choose').toggle();
}
});

Angular
!
• MVC
• Angular Markup: ng-model, ng-show, ng-repeat
• Dirty checking, speed limitations
• Large API.
• Scopes are inherited.

Core Problem
• Separation of Concerns
app/partials/button.html
app/css/button.css
app/js/directives/button.js

Thesis: React is
• Cohesive
!
• Easy to reason about

Quick History
• Apr 2012: Instagram purchase.
• June 2013 Open-sourced

Users
AirBNB, BBC, CodeAcademy, Dropbox, Facebook,
Flipboard, Github, Imgur, Instagram, Khan
Academy, Netﬂix, NYT, PayPal, Reddit, Redﬁn,
Uber, Wired, Yahoo…

Simple Component
var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />,
mountNode);

JSX
}!
});!
!
mountNode);

Templating languages have a cost: they make building user
interfaces harder. Doing something simple like alternating row
colors in a table requires jumping through hoops in many languages.
!
What we should do instead is accept that user interfaces are becoming
more and more complicated and that we need a real programming
language (with all of its expressive power) to build user interfaces at
scale.
!
(With React) instead of an oversimpliﬁed templating language, you
get to use JavaScript to build abstractions and reuse code.
— Pete Hunt

JSX -> createElement
var HelloMessage = React.createClass({displayName:
"HelloMessage",!
return React.createElement("div", null, "Hello ",
this.props.name);!
}!
});!
!
React.render(React.createElement(HelloMessage, {name:
"John"}), mountNode);

f(data)=virtual DOM
}!
});!
!
mountNode);

Using a Component
}!
});!
!
mountNode);

Passing props
}!
});!
!
mountNode);

Questions?
}!
});!
!
mountNode);

Timer: has secondsElapsed
var Timer = React.createClass({!
getInitialState() {!
return {secondsElapsed: 0};!
},!
componentDidMount: function() {!
this.interval = setInterval(this.tick, 1000);!
},!
tick() {!
this.setState({secondsElapsed: this.state.secondsElapsed + 1});!
},!
render() {!
return (!
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>!
);!
}!
});

Initialize State
},!
},!
tick() {!
},!
render() {!
return (!
);!
}!
});

setState()
},!
},!
tick() {!
},!
render() {!
return (!
);!
}!
});

render
},!
},!
tick() {!
},!
render() {!
return (!
);!
}!
});

Composition
var PictureOfTheDay = require('./Components/PictureOfTheDay.js');!
var DateBrowser = require('./Components/DateBrowser.js');!
var Title = require('./Components/Title.js');!
!
var SpacePics = React.createClass ({!
render() {!
return (!
<div>!
<Title title={this.state.title} />!
<PictureOfTheDay picture={this.state.picture} />!
<DateBrowser date={this.state.date} onChange={this._onDateChange} />!
</div>!
);!

require()
!
render() {!
return (!
<div>!
</div>!
);!

Passing data to children
!
render() {!
return (!
<div>!
</div>!
);!

Need-to-know
!
render() {!
return (!
<div>!
</div>!
);!

Demos
Virtual DOM!
Creating a component
ReactNative

Our script
• Create new: Apples, Bread
• Check off Apples
• Switch between tabs

Demos
Virtual DOM
Creating a component!
ReactNative

Demo #2: Encapsulation
• Internal state
• UI actions
• refactoring

Hello World
• import React from 'react'; 
 
export default class WhosAsleepScore
extends React.Component { 
render() { 
return ( 
<h1>Hello, world!</h1> 
); 
} 
}

code
• import React from 'react'; 
 
export default class WhosAsleepScore extends
React.Component { 
constructor(props) { 
super(props); 
this.state={count:0}; 
} 
render() { 
let {count}= this.state; 
return ( 
<h1>Who's Asleep score: {count}</h1> 
); 
} 
}

End Result
import React from 'react'; 
export default class WhosAsleepScore extends React.Component { 
constructor(props) { 
super(props); 
this.state = {count: 0}; 
} 
addSleeper() { 
this.setState({count:this.state.count+1}); 
} 
 
render() { 
return ( 
<div> 
<img src='ct.png' onClick={this.addSleeper.bind(this)} /> 
<span style={countStyle}>{this.state.count}</span> 
</div> 
); 
} 
}

// if we have an error 
if (this.state.error !== null) { 
innerNode = <ErrorWidget title="NASA
API Error" message={this.state.error} />; 
title = 'Error'; 
}
If Error

ErrorWidget
• var React = require('react-native'); 
var { 
StyleSheet, 
Text, 
View, 
} = React; 
 
class ErrorWidget extends React.Component { 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.title}>{this.props.title}</Text> 
<Text style={styles.message}>{this.props.message}</
Text> 
</View> 
); 
} 
}

propTypes
class ErrorWidget extends React.Component {!
propTypes: {!
message: React.PropTypes.string.isRequired,!
title: React.PropTypes.string.isRequired,!
}, 
render() { 
return ( 
<Text style={styles.message}>{this.props.message}</Text> 
</View> 
); 
} 
}

Loading
// if we don't have a picture 
else if (this.state.picture === null) { 
innerNode = <Loading title="Getting
Image..." />; 
title = 'Loading...'; 
}!

Loading Widget
• var React = require('react-native'); 
var { 
StyleSheet, 
ActivityIndicatorIOS, 
Text, 
View, 
} = React; 
 
class Loading extends React.Component { 
render() { 
return ( 
<ActivityIndicatorIOS animating={true} /> 
</View> 
); 
} 
}

else: Picture
// if we have a picture 
else { 
innerNode = <PictureOfTheDay
picture={this.state.picture} />; 
title = this.state.picture.title; 
}!

Demos
Virtual DOM
Creating a component
ReactNative

Composition
SpacePics
PictureOfTheDay
Image

Summary
React is easy to reason about

Where to go from here?
• http://facebook.github.io/react/
• search “Thinking in React”
!

THANK YOU
!
!
Jeff Winkler
@winkler1
http://react.rocks

Intro to ReactJS

More Related Content

What's hot

Viewers also liked

Similar to Intro to ReactJS

More from Harvard Web Working Group

Recently uploaded

Intro to ReactJS