update website

docs/tutorial.html

@@ -21,8 +21,7 @@ We're going to render the title, year, and thumbnail for the movie. Since t
     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;white&#x27;</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>
   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>
@@ -58,8 +57,7 @@ We&#x27;re going to render the title, year, and thumbnail for the movie. Since t
     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;white&#x27;</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>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>
@@ -144,6 +142,7 @@ We&#x27;re going to render the title, year, and thumbnail for the movie. Since t
       &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 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>
@@ -163,6 +162,9 @@ We&#x27;re going to render the title, year, and thumbnail for the movie. Since t
         <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>
@@ -189,7 +191,7 @@ We&#x27;re going to render the title, year, and thumbnail for the movie. Since t
 <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> SampleApp <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>
+<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>
@@ -224,6 +226,7 @@ We&#x27;re going to render the title, year, and thumbnail for the movie. Since t
       &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>
@@ -260,8 +263,7 @@ We&#x27;re going to render the title, year, and thumbnail for the movie. Since t
     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;white&#x27;</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>
   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>
@@ -278,9 +280,13 @@ We&#x27;re going to render the title, year, and thumbnail for the movie. Since t
     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;SampleApp&#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> SampleApp<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>
+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)