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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to Intro to ReactJS

Similar to Intro to ReactJS (20)

More from Harvard Web Working Group

More from Harvard Web Working Group (20)

Recently uploaded

Recently uploaded (20)

Intro to ReactJS