Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deploy website

Browse Source 
Deploy website version based on ad97cf2c61
This commit is contained in:
Website Deployment Script
2018-05-04 19:24:04 +00:00
parent ad97cf2c61
commit 2b9acbd6fb
2 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/next/asyncstorage.html
+16 -12
View File
@@ -9,21 +9,25 @@
<p>On iOS, <code>AsyncStorage</code> is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, <code>AsyncStorage</code> will use either <a href="http://rocksdb.org/">RocksDB</a> or SQLite based on what is available.</p>
<p>The <code>AsyncStorage</code> JavaScript code is a simple facade that provides a clear JavaScript API, real <code>Error</code> objects, and simple non-multi functions. Each method in the API returns a <code>Promise</code> object.</p>
<p>Persisting data:</p>
<pre><code class="hljs"><span class="hljs-keyword">try</span> {
<span class="hljs-function">await AsyncStorage.<span class="hljs-title">setItem</span><span class="hljs-params">(<span class="hljs-string">'@MySuperStore:key'</span>, <span class="hljs-string">'I like to save it.'</span>)</span></span>;
} <span class="hljs-keyword">catch</span> (<span class="hljs-keyword">error</span>) {
<span class="hljs-comment">// Error saving data</span>
<pre><code class="hljs">_storeData = <span class="hljs-keyword">async</span> () =&gt; {
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> AsyncStorage.setItem(<span class="hljs-string">'@MySuperStore:key'</span>, <span class="hljs-string">'I like to save it.'</span>);
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-comment">// Error saving data</span>
}
}
</code></pre>
<p>Fetching data:</p>
<pre><code class="hljs"><span class="hljs-keyword">try</span> {
<span class="hljs-keyword">const</span> <span class="hljs-keyword">value</span> = <span class="hljs-keyword">await</span> AsyncStorage.getItem(<span class="hljs-string">'@MySuperStore:key'</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">value</span> !== <span class="hljs-literal">null</span>){
<span class="hljs-comment">// We have data!!</span>
console.log(<span class="hljs-keyword">value</span>);
}
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-comment">// Error retrieving data</span>
<pre><code class="hljs">_retrieveData = <span class="hljs-keyword">async</span> () =&gt; {
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">const</span> <span class="hljs-keyword">value</span> = <span class="hljs-keyword">await</span> AsyncStorage.getItem(<span class="hljs-string">'TASKS'</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">value</span> !== <span class="hljs-literal">null</span>) {
<span class="hljs-comment">// We have data!!</span>
console.log(<span class="hljs-keyword">value</span>);
}
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-comment">// Error retrieving data</span>
}
}
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
docs/next/tutorial.html
+6 -3
View File
@@ -14,17 +14,20 @@
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HelloWorldApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>Hello world!<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>Hello world!<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></span>
);
}
}
</code></pre><iframe style="margin-top: 4" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%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" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20HelloWorldApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%20world!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A" frame-border="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>App.js</code> file to create a real app on your local machine.</p>
<h2><a class="anchor" aria-hidden="true" id="what-s-going-on-here"></a><a href="#what-s-going-on-here" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What's going on here?</h2>
<p>Some of the things in here might not look like JavaScript to you. Don't panic. <em>This is the future</em>.</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>, and <code>extends</code> 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/learn-es2015/">this page</a> has a good overview of ES2015 features.</p>
<p>The other unusual thing in this code example is <code>&lt;Text&gt;Hello world!&lt;/Text&gt;</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>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, you use React components. In this case, <code>&lt;Text&gt;</code> is a built-in component that just displays some text.</p>
<p>The other unusual thing in this code example is <code>&lt;View&gt;&lt;Text&gt;Hello world!&lt;/Text&gt;&lt;/View&gt;</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>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, you use React components. In this case, <code>&lt;Text&gt;</code> is a built-in component that just displays some text and <code>View</code> is like the <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="components"></a><a href="#components" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Components</h2>
<p>So this code is defining <code>HelloWorldApp</code>, a new <code>Component</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>
<h2><a class="anchor" aria-hidden="true" id="this-app-doesn-t-do-very-much"></a><a href="#this-app-doesn-t-do-very-much" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>This app doesn't do very much</h2>