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:
1 parent
c9ff8667b5
commit
3863d206d4
9 files changed
+29
-4
No files matched your search
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Introducing Hot Reloading – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Introducing Hot Reloading – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="active" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div><h1>Introducing Hot Reloading</h1><p class="meta">March 24, 2016 by <a href="https://twitter.com/martinbigio" target="_blank">Martín Bigio</a></p><hr><div><p>React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.</p><p>We got close to this ideal via three main features:</p><ul><li>Use JavaScript as the language doesn't have a long compilation cycle time.</li><li>Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.</li><li>Build a feature called Live Reload that reloads the app on save.</li></ul><p>At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.</p><h2><a class="anchor" name="hot-reloading"></a>Hot Reloading <a class="hash-link" href="#hot-reloading">#</a></h2><p>The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.</p><p>A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).</p><span><iframe width="100%" height="315" src="https://www.youtube.com/embed/2uQzVi-KFuc" frameborder="0" allowfullscreen></iframe>
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Introducing Hot Reloading – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Introducing Hot Reloading – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="active" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Introducing Hot Reloading</h1><p class="meta">March 24, 2016 by <a href="https://twitter.com/martinbigio" target="_blank">Martín Bigio</a></p><hr><div><p>React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.</p><p>We got close to this ideal via three main features:</p><ul><li>Use JavaScript as the language doesn't have a long compilation cycle time.</li><li>Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.</li><li>Build a feature called Live Reload that reloads the app on save.</li></ul><p>At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.</p><h2><a class="anchor" name="hot-reloading"></a>Hot Reloading <a class="hash-link" href="#hot-reloading">#</a></h2><p>The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.</p><p>A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).</p><span><iframe width="100%" height="315" src="https://www.youtube.com/embed/2uQzVi-KFuc" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
</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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Toward Better Documentation – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Toward Better Documentation – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="active" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div><h1>Toward Better Documentation</h1><p class="meta">July 6, 2016 by <a href="https://twitter.com/lacker" target="_blank">Kevin Lacker</a></p><hr><div><p>Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.</p><h2><a class="anchor" name="inline-examples"></a>Inline Examples <a class="hash-link" href="#inline-examples">#</a></h2><p>When you learn a new library, a new programming language, or a new framework, there's a beautiful moment when you first write a bit of code, try it out, see if it works... and it <em>does</em> work. You created something real. We wanted to put that visceral experience right into our docs. Like this:</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>
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Toward Better Documentation – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Toward Better Documentation – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="active" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Toward Better Documentation</h1><p class="meta">July 6, 2016 by <a href="https://twitter.com/lacker" target="_blank">Kevin Lacker</a></p><hr><div><p>Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.</p><h2><a class="anchor" name="inline-examples"></a>Inline Examples <a class="hash-link" href="#inline-examples">#</a></h2><p>When you learn a new library, a new programming language, or a new framework, there's a beautiful moment when you first write a bit of code, try it out, see if it works... and it <em>does</em> work. You created something real. We wanted to put that visceral experience right into our docs. Like this:</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> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
class <span class="token class-name">ScratchPad</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>San Francisco Meetup Recap – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="San Francisco Meetup Recap – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="active" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>San Francisco Meetup Recap</h1><p class="meta">August 12, 2016 by <a href="https://twitter.com/hectorramos" target="_blank">Héctor Ramos</a></p><hr><div><p><img src="/react-native/blog/img/rnmsf-august-2016-hero.jpg" alt=""></p><p>Last week I had the opportunity to attend the <a href="http://www.meetup.com/React-Native-San-Francisco/photos/27168649/#452793854" target="_blank">React Native Meetup</a> at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.</p><p>I was particularly interested in learning more about how React and React Native are used at companies like Zynga, Netflix, and Airbnb. The agenda for the night would be as follows:</p><ul><li>Rapid Prototyping in React</li><li>Designing APIs for React Native</li><li>Bridging the Gap: Using React Native in Existing Codebases</li></ul><p>But first, the event started off with a quick introduction and a brief recap of recent news:</p><ul><li>Did you know that React Native is now the <a href="https://twitter.com/jamespearce/status/759637111880359937" target="_blank">top Java repository on GitHub</a>?</li><li><a href="https://github.com/rnpm/rnpm" target="_blank">rnpm</a> is now part of React Native core! You can now use <code>react-native link</code> in place of <code>rnpm link</code> to <a href="https://facebook.github.io/react-native/docs/linking-libraries-ios.html" target="_blank">install libraries with native dependencies</a>.</li><li>The React Native Meetup community is growing fast! There are now over 4,800 developers across a variety of React Native meetup groups all over the globe.</li></ul><p>If <a href="http://www.meetup.com/find/?allMeetups=false&keywords=react+native&radius=Infinity&userFreeform=San+Francisco%2C+CA&mcId=z94105&mcName=San+Francisco%2C+CA&sort=recommended&eventFilter=mysugg" target="_blank">one of these meetups</a> is held near you, I highly recommend attending!</p><h2><a class="anchor" name="rapid-prototyping-in-react-at-zynga"></a>Rapid Prototyping in React at Zynga <a class="hash-link" href="#rapid-prototyping-in-react-at-zynga">#</a></h2><p>The first round of news was followed by a quick introduction by Zynga, our hosts for the evening. Abhishek Chadha talked about how they use React to quickly prototype new experiences on mobile, demoing a quick prototype of a Draw Something-like app. They use a siLine 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)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
docsearch({
|
||||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||||
indexName: 'react-native-versions',
|
||||
inputSelector: '#algolia-doc-search',
|
||||
algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 }
|
||||
});
|
||||
</script><script src="js/scripts.js"></script></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
+2
-2
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Blog – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Blog – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div><h1>Toward Better Documentation</h1><p class="meta">July 6, 2016 by <a href="https://twitter.com/lacker" target="_blank">Kevin Lacker</a></p><hr><div><p>Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.</p><h2><a class="anchor" name="inline-examples"></a>Inline Examples <a class="hash-link" href="#inline-examples">#</a></h2><p>When you learn a new library, a new programming language, or a new framework, there's a beautiful moment when you first write a bit of code, try it out, see if it works... and it <em>does</em> work. You created something real. We wanted to put that visceral experience right into our docs. Like this:</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>
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Blog – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Blog – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>San Francisco Meetup Recap</h1><p class="meta">August 12, 2016 by <a href="https://twitter.com/hectorramos" target="_blank">Héctor Ramos</a></p><hr><div><p><img src="/react-native/blog/img/rnmsf-august-2016-hero.jpg" alt=""></p><p>Last week I had the opportunity to attend the <a href="http://www.meetup.com/React-Native-San-Francisco/photos/27168649/#452793854" target="_blank">React Native Meetup</a> at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.</p><p>I was particularly interested in learning more about how React and React Native are used at companies like Zynga, Netflix, and Airbnb. The agenda for the night would be as follows:</p><ul><li>Rapid Prototyping in React</li><li>Designing APIs for React Native</li><li>Bridging the Gap: Using React Native in Existing Codebases</li></ul><p>But first, the event started off with a quick introduction and a brief recap of recent news:</p><ul><li>Did you know that React Native is now the <a href="https://twitter.com/jamespearce/status/759637111880359937" target="_blank">top Java repository on GitHub</a>?</li><li><a href="https://github.com/rnpm/rnpm" target="_blank">rnpm</a> is now part of React Native core! You can now use <code>react-native link</code> in place of <code>rnpm link</code> to <a href="https://facebook.github.io/react-native/docs/linking-libraries-ios.html" target="_blank">install libraries with native dependencies</a>.</li><li>The React Native Meetup community is growing fast! There are now over 4,800 developers across a variety of React Native meetup groups all over the globe.</li></ul><p>If <a href="http://www.meetup.com/find/?allMeetups=false&keywords=react+native&radius=Infinity&userFreeform=San+Francisco%2C+CA&mcId=z94105&mcName=San+Francisco%2C+CA&sort=recommended&eventFilter=mysugg" target="_blank">one of these meetups</a> is held near you, I highly recommend attending!</p><h2><a class="anchor" name="rapid-prototyping-in-react-at-zynga"></a>Rapid Prototyping in React at Zynga <a class="hash-link" href="#rapid-prototyping-in-react-at-zynga">#</a></h2><p>The first round of news was followed by a quick introduction by Zynga, our hosts for the evening. Abhishek Chadha talked about how they use React to quickly prototype new experiences on mobile, demoing a quick prototype of a Draw Something-like app. They use a similar approach as React Native, providing access tLine truncated
|
||||
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
class <span class="token class-name">ScratchPad</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
@@ -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 <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a>'s <a href="https://github.com/necolas/react-native-web" target="_blank"><code>react-native-web</code></a> project, 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"><code>react-native-web</code></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 letsLine 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 <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a>'s <a href="https://github.com/necolas/react-native-web" target="_blank"><code>react-native-web</code></a> project, 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"><code>react-native-web</code></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 letsLine 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>
|
||||
|
||||
@@ -1646,3 +1646,9 @@ input#algolia-doc-search:focus {
|
||||
.web-player.mobile > .prism {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/** Blog **/
|
||||
|
||||
.article {
|
||||
margin: 0 0 40px 0;
|
||||
}
|
||||
Reference in new issue
Block a user