mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -2,7 +2,7 @@
|
||||
tutorial is aimed at all audiences, whether you have React experience or not.</p><p>Let's do this thing.</p><h2><a class="anchor" name="hello-world"></a>Hello World <a class="hash-link" href="docs/tutorial.html#hello-world">#</a></h2><p>In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello world". Here it is:</p><div class="web-player"><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
class <span class="token class-name">HelloWorldApp</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
class <span class="token class-name">AwesomeProject</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<Text<span class="token operator">></span>Hello world<span class="token operator">!</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
@@ -10,7 +10,7 @@ class <span class="token class-name">HelloWorldApp</span> extends <span class="t
|
||||
<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">'HelloWorldApp'</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">></span> HelloWorldApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aclass%20HelloWorldApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20world!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('HelloWorldApp'%2C%20()%20%3D%3E%20HelloWorldApp)%3B" frameborder="0"></iframe></div><p>If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your <code>index.ios.js</code> or <code>index.android.js</code> file to create a real app on your local machine.</p><h2><a class="anchor" name="what-s-going-on-here"></a>What's going on here? <a class="hash-link" href="docs/tutorial.html#what-s-going-on-here">#</a></h2><p>Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.</p><p>First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. <code>import</code>, <code>from</code>, <code>class</code>, <code>extends</code>, and the <code>() =></code> syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, <a href="https://babeljs.io/docs/learn-es2015/" target="_blank">this page</a> has a good overview of ES2015 features.</p><p>The other unusual thing in this code example is <code><Text>Hello world!</Text></code>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <code><div></code> or <code><span></code>, you use React components. In this case, <code><Text></code>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</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">></span> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aclass%20AwesomeProject%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20world!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AwesomeProject)%3B" frameborder="0"></iframe></div><p>If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your <code>index.ios.js</code> or <code>index.android.js</code> file to create a real app on your local machine.</p><h2><a class="anchor" name="what-s-going-on-here"></a>What's going on here? <a class="hash-link" href="docs/tutorial.html#what-s-going-on-here">#</a></h2><p>Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.</p><p>First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. <code>import</code>, <code>from</code>, <code>class</code>, <code>extends</code>, and the <code>() =></code> syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, <a href="https://babeljs.io/docs/learn-es2015/" target="_blank">this page</a> has a good overview of ES2015 features.</p><p>The other unusual thing in this code example is <code><Text>Hello world!</Text></code>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <code><div></code> or <code><span></code>, you use React components. In this case, <code><Text></code>
|
||||
is a built-in component that just displays some text.</p><h2><a class="anchor" name="component-and-appregistry"></a>Component and AppRegistry <a class="hash-link" href="docs/tutorial.html#component-and-appregistry">#</a></h2><p>So this code is defining <code>HelloWorldApp</code>, a new <code>Component</code>, and it's registering it with the <code>AppRegistry</code>. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a <code>render</code> function which returns some JSX to render.</p><p>The <code>AppRegistry</code> just tells React Native which component is the root one for the whole application. You won't be thinking about <code>AppRegistry</code> a lot - there will probably just be one call to <code>AppRegistry.registerComponent</code> in your whole app. It's included in these examples so you can paste the whole thing into your <code>index.ios.js</code> or <code>index.android.js</code> file and get it running.</p><h2><a class="anchor" name="this-app-doesn-t-do-very-much"></a>This App Doesn't Do Very Much <a class="hash-link" href="docs/tutorial.html#this-app-doesn-t-do-very-much">#</a></h2><p>Good point. To make components do more interesting things, you need to <a href="docs/props.html" target="_blank">learn about Props</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/getting-started.html#content">← Prev</a><a class="docs-next" href="docs/props.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Tutorial.md">edit the content above on GitHub</a> and send us a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
Reference in New Issue
Block a user