Skip to content

Instantly share code, notes, and snippets.

@juhahinkula

juhahinkula/reactNasaBootstrap-html

Last active September 19, 2017 17:34
Show Gist options
  • Save juhahinkula/30f27397ba76851199e347346d0ed95d to your computer and use it in GitHub Desktop.
Save juhahinkula/30f27397ba76851199e347346d0ed95d to your computer and use it in GitHub Desktop.
Download ZIP
NASA APOD api usage with react and bootsrap
Raw
reactNasaBootstrap-html
<!-- Fetch astronomy picture of the day from NASA API -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>React getting started</title>
</head>
<body>
<!-- Root container for react components -->
<div id='root'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/babel">
class RestNasa extends React.Component {
constructor(props) {
super(props);
this.state = {explanation: '', imgurl: ''};
}
componentDidMount() {
fetch('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY')
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
this.setState({
explanation: responseData.explanation,
imgurl: responseData.url
});
});
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="card">
<div className="card-body">
<h4 className="card-title">
Explanation
</h4>
<p className="card-text">{this.state.explanation}</p>
</div>
</div>
</div>
<div className="col-md-8">
<img className="img-fluid" src={this.state.imgurl} height="80%" width="80%" />
</div>
</div>
</div>
);
}
}
ReactDOM.render(<RestNasa />, document.getElementById('root'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment