update website

This commit is contained in:
Christopher Chedeau committed 2015-03-29 08:07:04 -07:00
1 parent 963422fad1
commit 4ba7328a90
48 files changed
+1654 -528

No files matched your search

+299 -11
View File
@@ -1,11 +1,299 @@
Error: `next: linking-libraries` in nativemodulesios doesn't exist
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12
at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9)
at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7)
at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17)
at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3)
at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5)
at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9)
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10
at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9)
at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li></ul><ul class="nav-site nav-site-external"><li><a href="http://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/dLine truncated
<span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Title&#x27;</span><span class="token punctuation">,</span> year<span class="token punctuation">:</span> <span class="token string">&#x27;2015&#x27;</span><span class="token punctuation">,</span> posters<span class="token punctuation">:</span> <span class="token punctuation">{</span>thumbnail<span class="token punctuation">:</span> <span class="token string">&#x27;http://i.imgur.com/UePbdph.jpg&#x27;</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><h3><a class="anchor" name="render-a-movie"></a>Render a movie <a class="hash-link" href="#render-a-movie">#</a></h3><p>We&#x27;re going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React requires below.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span>
AppRegistry<span class="token punctuation">,</span>
Image<span class="token punctuation">,</span>
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 change the render function so that we&#x27;re rendering the data mentioned above rather than hello world.</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">var</span> movie <span class="token operator">=</span> MOCKED_MOVIES_DATA<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>title<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>year<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Image 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> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>Press cmd+R and you should see &quot;Title&quot; above &quot;2015&quot;. Notice that the Image doesn&#x27;t render anything. This is because we haven&#x27;t specified the width and height of the image we want to render. This is done via styles. While we&#x27;re changing the styles let&#x27;s also clean up the styles we&#x27;re no longer using.</p><div class="prism language-javascript"><span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#F5FCFF&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
thumbnail<span class="token punctuation">:</span> <span class="token punctuation">{</span>
width<span class="token punctuation">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">81</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><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
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>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
<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">
<img src="/react-native/img/TutorialMock.png" />
</div>
</span><h3><a class="anchor" name="add-some-styling"></a>Add some styling <a class="hash-link" href="#add-some-styling">#</a></h3><p>Great, we&#x27;ve rendered our data. Now let&#x27;s make it look better. I&#x27;d like to put the text to the right of the image and make the title larger and centered within that area:</p><div class="prism language-javascript"><span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span>
<span class="token operator">|</span><span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">++</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span><span class="token operator">|</span>
<span class="token operator">||</span> <span class="token operator">||</span> Title <span class="token operator">||</span>
<span class="token operator">||</span> Image <span class="token operator">||</span> <span class="token operator">||</span>
<span class="token operator">||</span> <span class="token operator">||</span> Year <span class="token operator">||</span>
<span class="token operator">|</span><span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">++</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span><span class="token operator">|</span>
<span class="token operator">+-</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">+</span></div><p>We&#x27;ll need to add another container in order to vertically lay out components within horizontally layed out components.</p><div class="prism language-javascript"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Image
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>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rightContainer<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>title<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>year<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>year<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Not too much has changed, we added a container around the Texts and then moved them after the Image (because they&#x27;re to the right of the Image). Let&#x27;s see what the style changes look like:</p><div class="prism language-javascript"> container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span>
justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#F5FCFF&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>We use FlexBox for layout - see <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">this great guide</a> to learn more about it.</p><p>In the above code snippet, we simply added <code>flexDirection: &#x27;row&#x27;</code> that will make children of our main container to be layed out horizontally instead of vertically.</p><p>Now add another style to the JS <code>style</code> object:</p><div class="prism language-javascript"> rightContainer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>This means that the <code>rightContainer</code> takes up the remaining space in the parent container that isn&#x27;t taken up by the Image. If this doesn&#x27;t make sense, add a <code>backgroundColor</code> to <code>rightContainer</code> and then try removing the <code>flex: 1</code>. You&#x27;ll see that this causes the container&#x27;s size to be the minimum size that fits its children.</p><p>Styling the text is pretty straightforward:</p><div class="prism language-javascript"> title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
marginBottom<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
textAlign<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
year<span class="token punctuation">:</span> <span class="token punctuation">{</span>
textAlign<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Go ahead and press cmd+R and you&#x27;ll see the updated view.</p><span><div class="tutorial-mock">
<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 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 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>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
movies<span class="token punctuation">:</span> responseData<span class="token punctuation">.</span>movies<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><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">done<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 modify the render function to render a loading view if we don&#x27;t have any movies data, and to render the first movie otherwise.</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>movies<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>
<span class="token keyword">var</span> movie <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>movies<span class="token punctuation">[</span><span class="token number">0</span><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">renderMovie<span class="token punctuation">(</span></span>movie<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
renderLoadingView<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>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
Loading movies<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<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>
renderMovie<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>movie<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Image
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>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rightContainer<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>title<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>year<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>year<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<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>Now press cmd+R and you should see &quot;Loading movies...&quot; until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes.</p><span><div class="tutorial-mock">
<img src="/react-native/img/TutorialSingleFetched.png" />
</div>
</span><h2><a class="anchor" name="listview"></a>ListView <a class="hash-link" href="#listview">#</a></h2><p>Let&#x27;s now modify this application to render all of this data in a <code>ListView</code> component, rather than just rendering the first movie.</p><p>Why is a <code>ListView</code> better than just rendering all of these elements or putting them in a <code>ScrollView</code>? Despite React being fast, rendering a possibly infinite list of elements could be slow. <code>ListView</code> 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 <code>ListView</code> require to the top of the file.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span>
AppRegistry<span class="token punctuation">,</span>
Image<span class="token punctuation">,</span>
ListView<span class="token punctuation">,</span>
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 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>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;ListView
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">}</span>
renderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderMovie<span class="token punctuation">}</span>
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 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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
loaded<span class="token punctuation">:</span> <span class="token boolean">false</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>And here is the modified <code>fetchData</code> method that updates the state accordingly:</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>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">cloneWithRows<span class="token punctuation">(</span></span>responseData<span class="token punctuation">.</span>movies<span class="token punctuation">)</span><span class="token punctuation">,</span>
loaded<span class="token punctuation">:</span> <span class="token boolean">true</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><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">done<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>Finally, we add styles for the <code>ListView</code> component to the <code>styles</code> JS object:</p><div class="prism language-javascript"> listView<span class="token punctuation">:</span> <span class="token punctuation">{</span>
paddingTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#F5FCFF&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>And here&#x27;s the final result:</p><span><div class="tutorial-mock">
<img src="/react-native/img/TutorialFinal.png" />
</div>
</span><p>There&#x27;s still some work to be done to make it a fully functional app such as: adding navigation, search, infinite scroll loading, etc. Check the <a href="https://github.com/facebook/react-native/tree/master/Examples/Movies" target="_blank">Movies Example</a> to see it all working.</p><h3><a class="anchor" name="final-source-code"></a>Final source code <a class="hash-link" href="#final-source-code">#</a></h3><div class="prism language-javascript"><span class="token comment" spellcheck="true">/**
* Sample React Native App
* https://github.com/facebook/react-native
*/</span>
<span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
AppRegistry<span class="token punctuation">,</span>
Image<span class="token punctuation">,</span>
ListView<span class="token punctuation">,</span>
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>
<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>
<span class="token keyword">var</span> AwesomeProject <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
loaded<span class="token punctuation">:</span> <span class="token boolean">false</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>
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>
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>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">cloneWithRows<span class="token punctuation">(</span></span>responseData<span class="token punctuation">.</span>movies<span class="token punctuation">)</span><span class="token punctuation">,</span>
loaded<span class="token punctuation">:</span> <span class="token boolean">true</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><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">done<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>
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>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;ListView
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">}</span>
renderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderMovie<span class="token punctuation">}</span>
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>
renderLoadingView<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>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
Loading movies<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<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>
renderMovie<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>movie<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Image
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>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rightContainer<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>title<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>year<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>movie<span class="token punctuation">.</span>year<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span>
justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#F5FCFF&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
rightContainer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
marginBottom<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
textAlign<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
year<span class="token punctuation">:</span> <span class="token punctuation">{</span>
textAlign<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
thumbnail<span class="token punctuation">:</span> <span class="token punctuation">{</span>
width<span class="token punctuation">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">81</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
listView<span class="token punctuation">:</span> <span class="token punctuation">{</span>
paddingTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#F5FCFF&#x27;</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><span class="token punctuation">;</span>
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;AwesomeProject&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="videos.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script></body></html>