Update Tutorial.md
This commit is contained in:
Christopher Chedeau
parent
eceed064f7
commit
3aee972116
180
docs/Tutorial.md
180
docs/Tutorial.md
|
|
@ -45,108 +45,110 @@ For this tutorial let’s build a simple version of the Movies app that fetches
|
||||||
|
|
||||||
The code below is a slightly modified version of the SampleApp that fetches the data we’ll need to build our application. The data fetching code isn’t really relevant to learning React Native so don’t worry too much about that but the rest of the app is very well documented.
|
The code below is a slightly modified version of the SampleApp that fetches the data we’ll need to build our application. The data fetching code isn’t really relevant to learning React Native so don’t worry too much about that but the rest of the app is very well documented.
|
||||||
|
|
||||||
/**
|
```javascript
|
||||||
* Sample React Native App
|
/**
|
||||||
* https://github.com/facebook/react-native
|
* Sample React Native App
|
||||||
*/
|
* https://github.com/facebook/react-native
|
||||||
'use strict';
|
*/
|
||||||
|
'use strict';
|
||||||
|
|
||||||
var React = require('react-native');
|
var React = require('react-native');
|
||||||
var {
|
var {
|
||||||
AppRegistry,
|
AppRegistry,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
View,
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
|
|
||||||
// The fetch module is used to make an HTTP request to rotten tomatoes's API
|
// The fetch module is used to make an HTTP request to rotten tomatoes's API
|
||||||
var fetch = require('fetch');
|
var fetch = require('fetch');
|
||||||
|
|
||||||
// This builds REQUEST_URL which is the URL we request data with
|
// This builds REQUEST_URL which is the URL we request data with
|
||||||
var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
|
var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
|
||||||
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
|
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
|
||||||
var PAGE_SIZE = 25;
|
var PAGE_SIZE = 25;
|
||||||
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
|
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
|
||||||
var REQUEST_URL = API_URL + PARAMS;
|
var REQUEST_URL = API_URL + PARAMS;
|
||||||
|
|
||||||
var SampleApp = React.createClass({
|
var SampleApp = React.createClass({
|
||||||
// We initialize our state to {movies: null} so that we can check
|
// We initialize our state to {movies: null} so that we can check
|
||||||
// this.state.movies === null to determine whether the movies data has been
|
// this.state.movies === null to determine whether the movies data has been
|
||||||
// loaded or not. Once they have we can do this.setState({movies: data}).
|
// loaded or not. Once they have we can do this.setState({movies: data}).
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
movies: null,
|
movies: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
// componentDidMount is called after the React compnent has loaded, this
|
// componentDidMount is called after the React compnent has loaded, this
|
||||||
// calls this.fetchData to kick off the request for movies data
|
// calls this.fetchData to kick off the request for movies data
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
this.fetchData();
|
this.fetchData();
|
||||||
},
|
},
|
||||||
|
|
||||||
// Here we're actually making the request and then handling the response by
|
// Here we're actually making the request and then handling the response by
|
||||||
// doing this.setState({movies: moviesData}). this.setState causes the
|
// doing this.setState({movies: moviesData}). this.setState causes the
|
||||||
// component to re-render. In the render function below, the movies data will
|
// component to re-render. In the render function below, the movies data will
|
||||||
// then be available via this.state.movies.
|
// then be available via this.state.movies.
|
||||||
fetchData: function() {
|
fetchData: function() {
|
||||||
fetch(REQUEST_URL)
|
fetch(REQUEST_URL)
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((responseData) => {
|
.then((responseData) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
movies: responseData.movies,
|
movies: responseData.movies,
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.done();
|
.done();
|
||||||
},
|
},
|
||||||
|
|
||||||
// This is pretty simple. If we don't have any movies data then render the
|
// This is pretty simple. If we don't have any movies data then render the
|
||||||
// loading view. Otherwise, render the movies (placeholder for now).
|
// loading view. Otherwise, render the movies (placeholder for now).
|
||||||
render: function() {
|
render: function() {
|
||||||
if (!this.state.movies) {
|
if (!this.state.movies) {
|
||||||
return this.renderLoading();
|
return this.renderLoading();
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text>
|
<Text>
|
||||||
Movies loaded
|
Movies loaded
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
// This is what the loading view looks like, simply some centered Text that
|
// This is what the loading view looks like, simply some centered Text that
|
||||||
// says "Loading movies...".
|
// says "Loading movies...".
|
||||||
renderLoading: function() {
|
renderLoading: function() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text>
|
<Text>
|
||||||
Loading movies...
|
Loading movies...
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// This is what styles our views. Setting flex to 1 makes a component take up
|
// This is what styles our views. Setting flex to 1 makes a component take up
|
||||||
// the entire size of its parent. justifyContent and alignItems center the
|
// the entire size of its parent. justifyContent and alignItems center the
|
||||||
// contents vertically and horizontally.
|
// contents vertically and horizontally.
|
||||||
var styles = StyleSheet.create({
|
var styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
backgroundColor: '#F5FCFF',
|
backgroundColor: '#F5FCFF',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// This line simply tells the ObjC engine that when you supply the entry point
|
// This line simply tells the ObjC engine that when you supply the entry point
|
||||||
// "SampleApp", render the component SampleApp (the component in this file)
|
// "SampleApp", render the component SampleApp (the component in this file)
|
||||||
AppRegistry.registerComponent('SampleApp', () => SampleApp);
|
AppRegistry.registerComponent('SampleApp', () => SampleApp);
|
||||||
|
```
|
||||||
|
|
||||||
After changing the entire contents of this file to the snippet above you should be able to simply cmd+R in the simulator to see the change. It should render “Loading movies..." until it gets the data back from Rotten Tomatoes at which point it should render “Movies loaded”.
|
After changing the entire contents of this file to the snippet above you should be able to simply cmd+R in the simulator to see the change. It should render “Loading movies..." until it gets the data back from Rotten Tomatoes at which point it should render “Movies loaded”.
|
||||||
|
|
||||||
## ListView
|
## ListView
|
||||||
|
|
||||||
Let’s now modify this application to render some of this data in a ListView.
|
Let’s now modify this application to render some of this data in a ListView.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue