Skip to content

Commit 01f3e07

Browse files
author
Travis CI
committed
update website
1 parent 0adb8aa commit 01f3e07

File tree

1 file changed

+3
-4
lines changed

1 file changed

+3
-4
lines changed

docs/tutorial.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
width<span class="token punctuation">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
2727
height<span class="token punctuation">:</span> <span class="token number">81</span><span class="token punctuation">,</span>
2828
<span class="token punctuation">}</span><span class="token punctuation">,</span>
29-
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>And lastly we need to apply this still to the Image component:</p><div class="prism language-javascript"> &lt;Image
29+
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>And lastly we need to apply this style to the Image component:</p><div class="prism language-javascript"> &lt;Image
3030
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> movie<span class="token punctuation">.</span>posters<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span><span class="token punctuation">}</span>
3131
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
3232
<span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Press cmd+R and the image should now render.</p><span><div class="tutorial-mock">
@@ -80,8 +80,7 @@
8080
<span class="token punctuation">}</span><span class="token punctuation">;</span>
8181
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>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.</p><div class="prism language-javascript"> componentDidMount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
8282
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetchData<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
83-
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>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
84-
this.state.movies is no longer null.</p><div class="prism language-javascript"> fetchData<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
83+
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>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.</p><div class="prism language-javascript"> fetchData<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
8584
<span class="token function">fetch<span class="token punctuation">(</span></span>REQUEST_URL<span class="token punctuation">)</span>
8685
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> response<span class="token punctuation">.</span><span class="token function">json<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
8786
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>responseData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
@@ -126,7 +125,7 @@
126125
<img src="/react-native/img/TutorialSingleFetched.png" />
127126
</div>
128127

129-
</span><h2><a class="anchor" name="listview"></a>ListView <a class="hash-link" href="#listview">#</a></h2><p>Let’s now modify this application to render all of this data in a ListView, rather than just the first movie.</p><p>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.</p><p>First thing&#x27;s first, add the ListView require to the top of the file.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span>
128+
</span><h2><a class="anchor" name="listview"></a>ListView <a class="hash-link" href="#listview">#</a></h2><p>Let’s now modify this application to render all of this data in a ListView, rather than just the first movie.</p><p>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.</p><p>First thing&#x27;s first, add the ListView require to the top of the file.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span>
130129
AppRegistry<span class="token punctuation">,</span>
131130
Image<span class="token punctuation">,</span>
132131
ListView<span class="token punctuation">,</span>

0 commit comments

Comments
 (0)