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 committed
1 parent
f9089f4495
commit
1de80ba500
2 files changed
+2
-2
No files matched your search
@@ -16,7 +16,7 @@ class <span class="token class-name">ScratchPad</span> extends <span class="toke
|
||||
<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">'ScratchPad'</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> ScratchPad<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ScratchPad%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2030%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Isn't%20this%20cool%3F%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%20100%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%F0%9F%91%8D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('ScratchPad'%2C%20()%20%3D%3E%20ScratchPad)%3B" frameborder="0"></iframe></div><p>We think these inline examples, using the <a href="https://github.com/dabbott/react-native-web-player" target="_blank"><code>react-native-web-player</code></a> module with help from <a href="https://twitter.com/devinaabbott" target="_blank">Devin Abbott</a>, are a great way to learn the basics of React Native, and we have updated our <a href="/react-native/docs/tutorial.html" target="">tutorial for new React Native developers</a> to use these wherever possible. Check it out - if you have ever been curious to see what would happen if you modified just one little bit of sample code, this is a really nice way to poke around. Also, if you're building developer tools and you want to show a live React Native sample on your own site, <a href="https://github.com/dabbott/react-native-web-player" target="_blank"><code>react-native-web-player</code></a> can make that straightforward.</p><p>The core simulation engine is provided by the <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> library, which provides a way to display React Native components like <code>Text</code> and <code>View</code> on the web. Check out <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> if you're interested in building mobile and web experiences that share a large chunk of the codebase.</p><h2><a class="anchor" name="better-guides"></a>Better Guides <a class="hash-link" href="#better-guides">#</a></h2><p>In some parts of React Native, there are multiple ways to do things, and we've heard feedback that we could provide better guidance.</p><p>We have a new <a href="/react-native/docs/navigator-comparison.html" target="">guide to Navigation</a> that compares the different approaches and advises on what you should use - <code>Navigator</code>, <code>NavigatorIOS</code>, <code>NavigationExperimental</code>. In the medium term, we're working towards improving and consolidating those interfaces. In the short term, we hope that a better guide will make your life easier.</p><p>We also have a new <a href="/react-native/docs/handling-touches.html" target="">guide to handling touches</a> that explains some of the basics of making button-like interfaces, and a brief summary of the different ways to handle touch events.</p><p>Another area we worked on is Flexbox. This includes tutorials on how to <a href="/react-native/docs/flexbox.html" target="">handle layout with Flexbox</a> and how to control <a href="/react-native/docs/height-and-width.html" target="">the size of components</a>. It also includes an unsexy but hopefully-useful (list of all the props that control layout in React Native)[/react-native/docs/layout-props.html].</p><h2><a class="anchor" name="getting-started"></a>Getting Started <a class="hash-link" href="#getting-started">#</a></h2><p>When you start getting a React Native development environment set up on your machine, you do have to do a bunch of installing and configuring things. It's hard to make installation a really fun and exciting experience, but we can at least make it as quick and painless as possible.</p><p>We built a <a href="/react-native/releases/next/docs/getting-started.html" target="">new Getting Started workflow</a> that lets you select your development operating system and your mobile operating system up front, to provide one concise place with allLine truncated
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'ScratchPad'</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> ScratchPad<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ScratchPad%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2030%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Isn't%20this%20cool%3F%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%20100%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%F0%9F%91%8D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('ScratchPad'%2C%20()%20%3D%3E%20ScratchPad)%3B" frameborder="0"></iframe></div><p>We think these inline examples, using the <a href="https://github.com/dabbott/react-native-web-player" target="_blank"><code>react-native-web-player</code></a> module with help from <a href="https://twitter.com/devinaabbott" target="_blank">Devin Abbott</a>, are a great way to learn the basics of React Native, and we have updated our <a href="/react-native/docs/tutorial.html" target="">tutorial for new React Native developers</a> to use these wherever possible. Check it out - if you have ever been curious to see what would happen if you modified just one little bit of sample code, this is a really nice way to poke around. Also, if you're building developer tools and you want to show a live React Native sample on your own site, <a href="https://github.com/dabbott/react-native-web-player" target="_blank"><code>react-native-web-player</code></a> can make that straightforward.</p><p>The core simulation engine is provided by the <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> library, which provides a way to display React Native components like <code>Text</code> and <code>View</code> on the web. Check out <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> if you're interested in building mobile and web experiences that share a large chunk of the codebase.</p><h2><a class="anchor" name="better-guides"></a>Better Guides <a class="hash-link" href="#better-guides">#</a></h2><p>In some parts of React Native, there are multiple ways to do things, and we've heard feedback that we could provide better guidance.</p><p>We have a new <a href="/react-native/docs/navigator-comparison.html" target="">guide to Navigation</a> that compares the different approaches and advises on what you should use - <code>Navigator</code>, <code>NavigatorIOS</code>, <code>NavigationExperimental</code>. In the medium term, we're working towards improving and consolidating those interfaces. In the short term, we hope that a better guide will make your life easier.</p><p>We also have a new <a href="/react-native/docs/handling-touches.html" target="">guide to handling touches</a> that explains some of the basics of making button-like interfaces, and a brief summary of the different ways to handle touch events.</p><p>Another area we worked on is Flexbox. This includes tutorials on how to <a href="/react-native/docs/flexbox.html" target="">handle layout with Flexbox</a> and how to control <a href="/react-native/docs/height-and-width.html" target="">the size of components</a>. It also includes an unsexy but hopefully-useful <a href="/react-native/docs/layout-props.html" target="">list of all the props that control layout in React Native</a>.</p><h2><a class="anchor" name="getting-started"></a>Getting Started <a class="hash-link" href="#getting-started">#</a></h2><p>When you start getting a React Native development environment set up on your machine, you do have to do a bunch of installing and configuring things. It's hard to make installation a really fun and exciting experience, but we can at least make it as quick and painless as possible.</p><p>We built a <a href="/react-native/releases/next/docs/getting-started.html" target="">new Getting Started workflow</a> that lets you select your development operating system and your mobile operating system up front, to provide one cLine truncated
|
||||
(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)
|
||||
|
||||
+1
-1
@@ -16,7 +16,7 @@ class <span class="token class-name">ScratchPad</span> extends <span class="toke
|
||||
<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">'ScratchPad'</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> ScratchPad<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ScratchPad%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2030%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Isn't%20this%20cool%3F%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%20100%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%F0%9F%91%8D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('ScratchPad'%2C%20()%20%3D%3E%20ScratchPad)%3B" frameborder="0"></iframe></div><p>We think these inline examples, using the <a href="https://github.com/dabbott/react-native-web-player" target="_blank"><code>react-native-web-player</code></a> module with help from <a href="https://twitter.com/devinaabbott" target="_blank">Devin Abbott</a>, are a great way to learn the basics of React Native, and we have updated our <a href="/react-native/docs/tutorial.html" target="">tutorial for new React Native developers</a> to use these wherever possible. Check it out - if you have ever been curious to see what would happen if you modified just one little bit of sample code, this is a really nice way to poke around. Also, if you're building developer tools and you want to show a live React Native sample on your own site, <a href="https://github.com/dabbott/react-native-web-player" target="_blank"><code>react-native-web-player</code></a> can make that straightforward.</p><p>The core simulation engine is provided by the <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> library, which provides a way to display React Native components like <code>Text</code> and <code>View</code> on the web. Check out <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> if you're interested in building mobile and web experiences that share a large chunk of the codebase.</p><h2><a class="anchor" name="better-guides"></a>Better Guides <a class="hash-link" href="#better-guides">#</a></h2><p>In some parts of React Native, there are multiple ways to do things, and we've heard feedback that we could provide better guidance.</p><p>We have a new <a href="/react-native/docs/navigator-comparison.html" target="">guide to Navigation</a> that compares the different approaches and advises on what you should use - <code>Navigator</code>, <code>NavigatorIOS</code>, <code>NavigationExperimental</code>. In the medium term, we're working towards improving and consolidating those interfaces. In the short term, we hope that a better guide will make your life easier.</p><p>We also have a new <a href="/react-native/docs/handling-touches.html" target="">guide to handling touches</a> that explains some of the basics of making button-like interfaces, and a brief summary of the different ways to handle touch events.</p><p>Another area we worked on is Flexbox. This includes tutorials on how to <a href="/react-native/docs/flexbox.html" target="">handle layout with Flexbox</a> and how to control <a href="/react-native/docs/height-and-width.html" target="">the size of components</a>. It also includes an unsexy but hopefully-useful (list of all the props that control layout in React Native)[/react-native/docs/layout-props.html].</p><h2><a class="anchor" name="getting-started"></a>Getting Started <a class="hash-link" href="#getting-started">#</a></h2><p>When you start getting a React Native development environment set up on your machine, you do have to do a bunch of installing and configuring things. It's hard to make installation a really fun and exciting experience, but we can at least make it as quick and painless as possible.</p><p>We built a <a href="/react-native/releases/next/docs/getting-started.html" target="">new Getting Started workflow</a> that lets you select your development operating system and your mobile operating system up front, to provide one concise place with allLine truncated
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'ScratchPad'</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> ScratchPad<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ScratchPad%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2030%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Isn't%20this%20cool%3F%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%20100%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%F0%9F%91%8D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('ScratchPad'%2C%20()%20%3D%3E%20ScratchPad)%3B" frameborder="0"></iframe></div><p>We think these inline examples, using the <a href="https://github.com/dabbott/react-native-web-player" target="_blank"><code>react-native-web-player</code></a> module with help from <a href="https://twitter.com/devinaabbott" target="_blank">Devin Abbott</a>, are a great way to learn the basics of React Native, and we have updated our <a href="/react-native/docs/tutorial.html" target="">tutorial for new React Native developers</a> to use these wherever possible. Check it out - if you have ever been curious to see what would happen if you modified just one little bit of sample code, this is a really nice way to poke around. Also, if you're building developer tools and you want to show a live React Native sample on your own site, <a href="https://github.com/dabbott/react-native-web-player" target="_blank"><code>react-native-web-player</code></a> can make that straightforward.</p><p>The core simulation engine is provided by the <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> library, which provides a way to display React Native components like <code>Text</code> and <code>View</code> on the web. Check out <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> if you're interested in building mobile and web experiences that share a large chunk of the codebase.</p><h2><a class="anchor" name="better-guides"></a>Better Guides <a class="hash-link" href="#better-guides">#</a></h2><p>In some parts of React Native, there are multiple ways to do things, and we've heard feedback that we could provide better guidance.</p><p>We have a new <a href="/react-native/docs/navigator-comparison.html" target="">guide to Navigation</a> that compares the different approaches and advises on what you should use - <code>Navigator</code>, <code>NavigatorIOS</code>, <code>NavigationExperimental</code>. In the medium term, we're working towards improving and consolidating those interfaces. In the short term, we hope that a better guide will make your life easier.</p><p>We also have a new <a href="/react-native/docs/handling-touches.html" target="">guide to handling touches</a> that explains some of the basics of making button-like interfaces, and a brief summary of the different ways to handle touch events.</p><p>Another area we worked on is Flexbox. This includes tutorials on how to <a href="/react-native/docs/flexbox.html" target="">handle layout with Flexbox</a> and how to control <a href="/react-native/docs/height-and-width.html" target="">the size of components</a>. It also includes an unsexy but hopefully-useful <a href="/react-native/docs/layout-props.html" target="">list of all the props that control layout in React Native</a>.</p><h2><a class="anchor" name="getting-started"></a>Getting Started <a class="hash-link" href="#getting-started">#</a></h2><p>When you start getting a React Native development environment set up on your machine, you do have to do a bunch of installing and configuring things. It's hard to make installation a really fun and exciting experience, but we can at least make it as quick and painless as possible.</p><p>We built a <a href="/react-native/releases/next/docs/getting-started.html" target="">new Getting Started workflow</a> that lets you select your development operating system and your mobile operating system up front, to provide one cLine truncated
|
||||
|
||||
</span><p>If you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.</p><p><strong>Word of warning:</strong> because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.</p><p>Hot reloading is available as of 0.22, you can enable it:</p><ul><li>Open the developer menu</li><li>Tap on "Enable Hot Reloading"</li></ul><h2><a class="anchor" name="implementation-in-a-nutshell"></a>Implementation in a nutshell <a class="hash-link" href="#implementation-in-a-nutshell">#</a></h2><p>Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.</p><p>Hot Reloading is built on top of a feature <a href="https://webpack.github.io/docs/hot-module-replacement-with-webpack.html" target="_blank">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p><p>In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:</p><p><img src="/react-native/blog/img/hmr-architecture.png" alt=""></p><p>The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the <em>exports</em> of the module we want to update. For instance, say you have an app composed of these two modules:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// log.js
|
||||
</span><span class="token keyword">function</span> <span class="token function">log<span class="token punctuation">(</span></span>message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
Reference in new issue
Block a user