Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update website

Browse Source
This commit is contained in:
Travis CI
2015-03-28 03:00:27 +00:00
parent 2f39a600a0
commit 614898ef71
5 changed files with 19 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/tutorial.html
+8 -8
View File
@@ -70,17 +70,17 @@
<img src="/react-native/img/TutorialStyledMock.png" />
</div>
</span><h3><a class="anchor" name="fetching-real-data"></a>Fetching real data <a class="hash-link" href="#fetching-real-data">#</a></h3><p>Fetching data from Rotten Tomatoes&#x27;s API isn&#x27;t really relevant to learning React Native so feel free to breeze through this section.</p><p>Add the following constants to the top of the file (typically below the requires) to create the REQUEST_URL used to request data with.</p><div class="prism language-javascript"><span class="token keyword">var</span> API_KEY <span class="token operator">=</span> <span class="token string">&#x27;7waqfqbprs7pajbz28mqf6vz&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> API_URL <span class="token operator">=</span> <span class="token string">&#x27;http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> PAGE_SIZE <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> PARAMS <span class="token operator">=</span> <span class="token string">&#x27;?apikey=&#x27;</span> <span class="token operator">+</span> API_KEY <span class="token operator">+</span> <span class="token string">&#x27;&amp;page_limit=&#x27;</span> <span class="token operator">+</span> PAGE_SIZE<span class="token punctuation">;</span>
<span class="token keyword">var</span> REQUEST_URL <span class="token operator">=</span> API_URL <span class="token operator">+</span> PARAMS<span class="token punctuation">;</span></div><p>Add some initial state to our application so that we can check <code>this.state.movies === null</code> to determine whether the movies data has been loaded or not. We can set this data when the response comes back with <code>this.setState({movies: moviesData})</code>. Add this code just above the render function inside our React class.</p><div class="prism language-javascript"> getInitialState<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>
</span><h3><a class="anchor" name="fetching-real-data"></a>Fetching real data <a class="hash-link" href="#fetching-real-data">#</a></h3><p>Fetching data from Rotten Tomatoes&#x27;s API isn&#x27;t really relevant to learning React Native so feel free to breeze through this section.</p><p>Add the following constants to the top of the file (typically below the requires) to create the REQUEST_URL used to request data with.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">/**
* For quota reasons we replaced the Rotten Tomatoes&#x27; API with a sample data of
* their very own API that lives in React Native&#x27;s Gihub repo.
*/</span>
<span class="token keyword">var</span> REQUEST_URL <span class="token operator">=</span> <span class="token string">&#x27;https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json&#x27;</span><span class="token punctuation">;</span></div><p>Add some initial state to our application so that we can check <code>this.state.movies === null</code> to determine whether the movies data has been loaded or not. We can set this data when the response comes back with <code>this.setState({movies: moviesData})</code>. Add this code just above the render function inside our React class.</p><div class="prism language-javascript"> getInitialState<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>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
movies<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<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. <code>componentDidMount</code> is a function of 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>
<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>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Now add <code>fetchData</code> function used above to our main component. This method will be respondible for handling data fetching. All you need to do is call <code>this.setState({movies: data})</code> after resolving the promise chain because the way React works is that <code>setState</code> actually triggers a re-render and then the render function will notice that <code>this.state.movies</code> is no longer <code>null</code>. Note that we call <code>done()</code> at the end of the promise chain - always make sure to call <code>done()</code> 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>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Now add <code>fetchData</code> function used above to our main component. This method will be responsible for handling data fetching. All you need to do is call <code>this.setState({movies: data})</code> after resolving the promise chain because the way React works is that <code>setState</code> actually triggers a re-render and then the render function will notice that <code>this.state.movies</code> is no longer <code>null</code>. Note that we call <code>done()</code> at the end of the promise chain - always make sure to call <code>done()</code> 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>
<span class="token function">fetch<span class="token punctuation">(</span></span>REQUEST_URL<span class="token punctuation">)</span>
<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>
<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>
@@ -132,7 +132,7 @@
StyleSheet<span class="token punctuation">,</span>
Text<span class="token punctuation">,</span>
View<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span></div><p>Now modify the render funtion so that once we have our data it renders a ListView of movies instead of a single movie.</p><div class="prism language-javascript"> render<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>
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span></div><p>Now modify the render function so that once we have our data it renders a ListView of movies instead of a single movie.</p><div class="prism language-javascript"> render<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>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loaded<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderLoadingView<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
@@ -144,7 +144,7 @@
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listView<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>The <code>DataSource</code> is an interfacte that <code>ListView</code> is using to determine which rows have changed over the course of updates.</p><p>You&#x27;ll notice we used <code>dataSource</code> from <code>this.state</code>. The next step is to add an empty <code>dataSource</code> to the object returned by <code>getInitialState</code>. Also, now that we&#x27;re storing the data in <code>dataSource</code>, we should not longer use <code>this.state.movies</code> to avoid storing data twice. We can use boolean property of the state (<code>this.state.loaded</code>) to tell whether data fetching has finished.</p><div class="prism language-javascript"> getInitialState<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>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>The <code>DataSource</code> is an interface that <code>ListView</code> is using to determine which rows have changed over the course of updates.</p><p>You&#x27;ll notice we used <code>dataSource</code> from <code>this.state</code>. The next step is to add an empty <code>dataSource</code> to the object returned by <code>getInitialState</code>. Also, now that we&#x27;re storing the data in <code>dataSource</code>, we should no longer use <code>this.state.movies</code> to avoid storing data twice. We can use boolean property of the state (<code>this.state.loaded</code>) to tell whether data fetching has finished.</p><div class="prism language-javascript"> getInitialState<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>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">ListView<span class="token punctuation">.</span>DataSource</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
rowHasChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>row1<span class="token punctuation">,</span> row2<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> row1 <span class="token operator">!</span><span class="token operator">==</span> row2<span class="token punctuation">,</span>