Deploy website - based on 5c3a06082d1eba745038a9e34cb01d7d0558edb0

docs/tutorial.html

@@ -19,7 +19,7 @@
 <link rel="stylesheet" href="/main.27dc9db6.css">
 <link rel="preload" href="/styles.473a8a2f.js" as="script">
 <link rel="preload" href="/runtime~main.60da9d75.js" as="script">
-<link rel="preload" href="/main.70cb4a55.js" as="script">
+<link rel="preload" href="/main.cfaa289e.js" as="script">
 <link rel="preload" href="/1.b8ab3a64.js" as="script">
 <link rel="preload" href="/2.728a4992.js" as="script">
 <link rel="preload" href="/1f391b9e.0c09adb2.js" as="script">
@@ -45,7 +45,7 @@
 </span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// React Native Styles</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> styles </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> StyleSheet</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">create</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  container</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    flex</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    justifyContent</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;center&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    alignItems</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;center&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div></div><p>As shown in the image, there is no difference in handling the <code>state</code> between <a href="https://reactjs.org/docs/state-and-lifecycle.html" target="_blank" rel="noopener noreferrer">React</a> and <code>React Native</code>. You can use the state of your components both in classes and in functional components using <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank" rel="noopener noreferrer">hooks</a>!</p><p>In the following example we will show the same above counter example using classes.</p><div class="snack-player" data-snack-name="Hello Classes" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%0Aimport%20%7B%0A%20%20StyleSheet%2C%0A%20%20TouchableOpacity%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20&#x27;react-native&#x27;%0A%0Aclass%20App%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20count%3A%200%0A%20%20%7D%0A%0A%20%20onPress%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20count%3A%20this.state.count%20%2B%201%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.button%7D%0A%20%20%20%20%20%20%20%20%20onPress%3D%7Bthis.onPress%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%3CText%3EClick%20me%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20You%20clicked%20%7B%20this.state.count%20%7D%20times%0A%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20&#x27;center&#x27;%2C%0A%20%20%20%20alignItems%3A%20&#x27;center&#x27;%2C%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20&#x27;center&#x27;%2C%0A%20%20%20%20backgroundColor%3A%20&#x27;%23DDDDDD&#x27;%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20marginLine truncated
 <script src="/styles.473a8a2f.js"></script>
 <script src="/runtime~main.60da9d75.js"></script>
-<script src="/main.70cb4a55.js"></script>
+<script src="/main.cfaa289e.js"></script>
 <script src="/1.b8ab3a64.js"></script>
 <script src="/2.728a4992.js"></script>
 <script src="/1f391b9e.0c09adb2.js"></script>