diff --git a/docs/tutorial.html b/docs/tutorial.html index c29a1e1048b..e935be11c21 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -26,7 +26,7 @@ width: 53, height: 81, }, -});

And lastly we need to apply this still to the Image component:

<Image +});

And lastly we need to apply this style to the Image component:

<Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} />

Press cmd+R and the image should now render.

@@ -80,8 +80,7 @@ }; },

We want to send off the request after the component has finished loading. componentDidMount is a function on React components that React will call exactly once just after the component has been loaded.

componentDidMount: function() { this.fetchData(); - },

Implement our fetchData function to actually make the request and handle the response. All you need to do is call this.setState({movies: data}) because the way React works is that setState actually triggers a re-render and then the render function will notice that -this.state.movies is no longer null.

fetchData: function() { + },

Implement our fetchData function to actually make the request and handle the response. All you need to do is call this.setState({movies: data}) after resolving the promise chain because the way React works is that setState actually triggers a re-render and then the render function will notice that this.state.movies is no longer null. Note that we call done() at the end of the promise chain - always make sure to call done() or any errors thrown will get swallowed.

fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { @@ -126,7 +125,7 @@ this.state.movies is no longer null.

-

ListView #

Let’s now modify this application to render all of this data in a ListView, rather than just the first movie.

Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the hierarchy.

First thing's first, add the ListView require to the top of the file.

var { +

ListView #

Let’s now modify this application to render all of this data in a ListView, rather than just the first movie.

Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.

First thing's first, add the ListView require to the top of the file.

var { AppRegistry, Image, ListView,