<!DOCTYPE html>
<html>
<head>
<title>React 101 (ES6 classes)! - Modern JS</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script data-require="fetch@1.1.0" data-semver="1.1.0" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.1.0/fetch.min.js"></script>
<script data-require="browser.js@*" data-semver="0.0.1" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script data-require="react@15.4.1" data-semver="15.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script data-require="react@15.4.1" data-semver="15.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<body>
<div id="banner-container"></div>
<script type="text/babel">
class Banner extends React.Component {
render() {
return (<div className={this.props.show ? '' : 'hidden'}>{this.props.message}</div>);
}
}
class BannerContainer extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.handleAjaxButtonClick = this.handleAjaxButtonClick.bind(this);
this.state = {showBanner: true, message: props.message};
}
handleClick(event) {
this.setState({showBanner: !this.state.showBanner, message: this.state.message});
}
handleAjaxButtonClick(event) {
// Use fetch lib for AJAX, as React doesn't include AJAX support
fetch('https://jsonplaceholder.herokuapp.com/posts/1')
.then(function(response) {
return response.json()
}).then(function(json) {
console.log(json);
this.setState({'message': json.title});
}.bind(this));
}
render() {
return (
<div>
<h4><button onClick={this.handleClick}>Click to {this.state.showBanner ? 'hide' : 'show'} {this.state.message}</button></h4>
<Banner show={this.state.showBanner} message={this.state.message}/>
<h4><button onClick={this.handleAjaxButtonClick}>Click to update message via AJAX</button></h4>
</div>
);
}
}
ReactDOM.render(
<BannerContainer message="React 101 (ES6 classes)!"/>,document.getElementById('banner-container')
);
</script>
</body>
</html>
.hidden {
display: none;
}