Intro to ReactJS
-
Upload
harvard-web-working-group -
Category
Software
-
view
3.082 -
download
0
Transcript of Intro to ReactJS
![Page 2: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/2.jpg)
![Page 3: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/3.jpg)
What I'll be showing
• Current approaches
• React
• Demos
• Summarize
![Page 4: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/4.jpg)
Webdev Landscape in 2015
![Page 5: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/5.jpg)
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();
}
});
![Page 6: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/6.jpg)
Backbone
![Page 7: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/7.jpg)
Ember
![Page 8: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/8.jpg)
Angular!
• MVC
• Angular Markup: ng-model, ng-show, ng-repeat
• Dirty checking, speed limitations
• Large API.
• Scopes are inherited.
![Page 9: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/9.jpg)
Angular Scope
![Page 10: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/10.jpg)
Angular Scope
![Page 11: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/11.jpg)
Common Problems
![Page 12: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/12.jpg)
![Page 13: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/13.jpg)
![Page 14: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/14.jpg)
Shared Mutable State
![Page 15: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/15.jpg)
Core Problem
• Separation of Concerns
app/partials/button.html
app/css/button.css
app/js/directives/button.js
![Page 16: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/16.jpg)
REACT
![Page 17: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/17.jpg)
Thesis: React is
• Cohesive
!
• Easy to reason about
![Page 18: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/18.jpg)
Quick History
• Apr 2012: Instagram purchase.
• June 2013 Open-sourced
![Page 19: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/19.jpg)
Users
AirBNB, BBC, CodeAcademy, Dropbox, Facebook, Flipboard, Github, Imgur, Instagram, Khan Academy, Netflix, NYT, PayPal, Reddit, Redfin, Uber, Wired, Yahoo…
![Page 20: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/20.jpg)
Give it 5 Minutes
![Page 21: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/21.jpg)
Simple Componentvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
![Page 22: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/22.jpg)
JSXvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
![Page 23: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/23.jpg)
![Page 24: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/24.jpg)
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 oversimplified templating language, you get to use JavaScript to build abstractions and reuse code. — Pete Hunt
![Page 25: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/25.jpg)
JSXvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
![Page 26: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/26.jpg)
JSX -> createElementvar HelloMessage = React.createClass({displayName: "HelloMessage",!
render: function() {!
return React.createElement("div", null, "Hello ", this.props.name);!
}!
});!
!
React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);
![Page 27: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/27.jpg)
f(data)=virtual DOMvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
![Page 28: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/28.jpg)
Using a Componentvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
![Page 29: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/29.jpg)
Passing propsvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
![Page 30: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/30.jpg)
Questions?var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
![Page 31: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/31.jpg)
State
![Page 32: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/32.jpg)
Timer: has secondsElapsedvar 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>!
);!
}!
});
![Page 33: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/33.jpg)
Initialize Statevar 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>!
);!
}!
});
![Page 34: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/34.jpg)
setState()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>!
);!
}!
});
![Page 35: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/35.jpg)
rendervar 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>!
);!
}!
});
![Page 36: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/36.jpg)
Components -> App
![Page 37: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/37.jpg)
Compositionvar 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>!
);!
![Page 38: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/38.jpg)
require()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>!
);!
![Page 39: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/39.jpg)
Passing data to childrenvar 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>!
);!
![Page 40: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/40.jpg)
Data from parent to child
![Page 41: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/41.jpg)
![Page 42: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/42.jpg)
Need-to-knowvar 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>!
);!
![Page 43: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/43.jpg)
Questions?
![Page 44: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/44.jpg)
Demos
Virtual DOM!
Creating a component
ReactNative
![Page 45: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/45.jpg)
Demo #1: Virtual DOM
![Page 46: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/46.jpg)
Virtual DOM Demo: TODOMVC
![Page 47: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/47.jpg)
DOMListener
![Page 48: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/48.jpg)
Our script
• Create new: Apples, Bread
• Check off Apples
• Switch between tabs
![Page 49: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/49.jpg)
Angular
![Page 50: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/50.jpg)
Angular
![Page 51: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/51.jpg)
React
![Page 52: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/52.jpg)
![Page 53: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/53.jpg)
Demos
Virtual DOM
Creating a component!
ReactNative
![Page 54: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/54.jpg)
Demo #2: Encapsulation
• Internal state
• UI actions
• refactoring
![Page 55: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/55.jpg)
![Page 56: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/56.jpg)
![Page 57: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/57.jpg)
![Page 58: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/58.jpg)
![Page 59: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/59.jpg)
![Page 60: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/60.jpg)
Hello World• import React from 'react'; export default class WhosAsleepScore extends React.Component { render() { return ( <h1>Hello, world!</h1> ); } }
![Page 61: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/61.jpg)
Change->Hot Reload
![Page 62: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/62.jpg)
state: {count:0}
![Page 63: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/63.jpg)
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> ); } }
![Page 64: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/64.jpg)
Count the sleepers!
![Page 65: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/65.jpg)
Change Request!
!
!
!
!
![Page 66: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/66.jpg)
Change display
![Page 67: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/67.jpg)
End Resultimport 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> ); } }
![Page 68: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/68.jpg)
Demos
Virtual DOM
Creating a component!
ReactNative
![Page 69: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/69.jpg)
Demo #3: ReactNative
![Page 70: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/70.jpg)
react-native-spacepics
![Page 71: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/71.jpg)
Demo- Overview
![Page 72: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/72.jpg)
Components
![Page 73: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/73.jpg)
Demo-Changing Code
![Page 74: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/74.jpg)
![Page 75: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/75.jpg)
// if we have an error if (this.state.error !== null) { innerNode = <ErrorWidget title="NASA API Error" message={this.state.error} />; title = 'Error'; }
If Error
![Page 76: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/76.jpg)
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> ); } }
![Page 77: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/77.jpg)
![Page 78: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/78.jpg)
propTypesclass ErrorWidget extends React.Component {!
propTypes: {!
message: React.PropTypes.string.isRequired,!
title: React.PropTypes.string.isRequired,!
}, render() { return ( <View style={styles.container}> <Text style={styles.title}>{this.props.title}</Text> <Text style={styles.message}>{this.props.message}</Text> </View> ); } }
![Page 79: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/79.jpg)
Loading
// if we don't have a picture else if (this.state.picture === null) { innerNode = <Loading title="Getting Image..." />; title = 'Loading...'; }!
![Page 80: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/80.jpg)
Loading Widget• var React = require('react-native'); var { StyleSheet, ActivityIndicatorIOS, Text, View, } = React; class Loading extends React.Component { render() { return ( <View style={styles.container}> <ActivityIndicatorIOS animating={true} /> <Text style={styles.title}>{this.props.title}</Text> </View> ); } }
![Page 81: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/81.jpg)
else: Picture
// if we have a picture else { innerNode = <PictureOfTheDay picture={this.state.picture} />; title = this.state.picture.title; }!
![Page 82: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/82.jpg)
Components
![Page 83: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/83.jpg)
![Page 84: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/84.jpg)
![Page 85: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/85.jpg)
Demos
Virtual DOM
Creating a component
ReactNative
![Page 86: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/86.jpg)
Zooming Out
![Page 87: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/87.jpg)
Encapsulation
![Page 88: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/88.jpg)
CompositionSpacePics
PictureOfTheDay
Image
![Page 89: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/89.jpg)
Time
![Page 90: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/90.jpg)
![Page 91: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/91.jpg)
Summary
React is easy to reason about
![Page 92: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/92.jpg)
![Page 93: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/93.jpg)
Where to go from here?
• http://facebook.github.io/react/
• search “Thinking in React”
!
![Page 95: Intro to ReactJS](https://reader030.fdocuments.in/reader030/viewer/2022021420/5874d8c71a28abd05f8b612f/html5/thumbnails/95.jpg)
Reaction to JSX