mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website - based on 5c05d3b4357c96945d232dbef0e8e454dfe6abed
This commit is contained in:
Website Deployment Script committed
1 parent
1d5150ed0a
commit
41fbece4e1
1751 files changed
+3506
-3506
No files matched your search
+2
-2
@@ -18,7 +18,7 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Learn the Basics · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Learn the Basics · React Native"><meta data-react-helmet="true" name="description" content="React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not."><meta data-react-helmet="true" property="og:description" content="React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/tutorial"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/tutorial"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.ca40cabd.css">
|
||||
<link rel="preload" href="/styles.07d522c6.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.576a29c4.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.2348d2f9.js" as="script">
|
||||
<link rel="preload" href="/main.5e05a427.js" as="script">
|
||||
<link rel="preload" href="/1.ba9ce8bd.js" as="script">
|
||||
<link rel="preload" href="/2.58cb5d3d.js" as="script">
|
||||
@@ -44,7 +44,7 @@
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</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"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">container</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag 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 tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">You clicked </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">count</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> times</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag 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 tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Button</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript function" style="color:#79b6f2">setCount</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript" style="color:#fc929e">count </span><span class="token tag script language-javascript operator" style="color:#fc929e">+</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript number" style="color:#5a9bcf">1</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">title</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Click me!</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag 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 tag pLine truncated
|
||||
</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">'center'</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">'center'</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'react'%0Aimport%20%7B%0A%20%20StyleSheet%2C%0A%20%20TouchableOpacity%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20'react-native'%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'center'%2C%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20backgroundColor%3A%20'%23DDDDDD'%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20marginLine truncated
|
||||
<script src="/styles.07d522c6.js"></script>
|
||||
<script src="/runtime~main.576a29c4.js"></script>
|
||||
<script src="/runtime~main.2348d2f9.js"></script>
|
||||
<script src="/main.5e05a427.js"></script>
|
||||
<script src="/1.ba9ce8bd.js"></script>
|
||||
<script src="/2.58cb5d3d.js"></script>
|
||||
|
||||
Reference in new issue
Block a user