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

update website

Browse Source
This commit is contained in:
Christopher Chedeau
2015-03-25 19:28:52 -07:00
parent 52e4bfe64e
commit ac99c8e20f
48 changed files with 201 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_index.html
+3 -3
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | Build Native Apps Using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | Build 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="Build Native Apps Using React"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="">docs</a></li><li><a href="/react-native/support.html" class="">support</a></li><li><a href="http://facebook.github.io/react" class="">react</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><div class="hero"><div class="wrap"><div class="text"><strong>React Native</strong></div><div class="minitext">Build native apps using React</div></div></div><section class="content wrap"><section class="home-bottom-section"><div class="buttons-unit"><a href="docs/getting-started.html#content" class="button">Learn more about React Native</a></div></section><h2>Native iOS Components</h2><p>With React Native, you can use the standard platform components such as UITabBar and UINavigationController on iOS. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and NavigatorIOS.</p><div class="prism language-javascript"><span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</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>React Native | A framework for building native apps with React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | A framework for building native apps with 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 with React"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="">docs</a></li><li><a href="/react-native/support.html" class="">support</a></li><li><a href="http://facebook.github.io/react" class="">react</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><div class="hero"><div class="wrap"><div class="text"><strong>React Native</strong></div><div class="minitext">A framework for building native apps with React</div></div></div><section class="content wrap"><div class="buttons-unit"><a href="docs/getting-started.html#content" class="button">Get started with React Native</a></div><div style="margin:60px auto;width:800px;"><h2>Native iOS Components</h2><p>With React Native, you can use the standard platform components such as UITabBar and UINavigationController on iOS. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and NavigatorIOS.</p><div class="prism language-javascript"><span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span> TabBarIOS<span class="token punctuation">,</span> NavigatorIOS <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -10,7 +10,7 @@ module<span class="token punctuation">.</span>exports <span class="token operato
&lt;<span class="token operator">/</span>TabBarIOS<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2>Asynchronous</h2><p>All operations between the JavaScript application code and the native platform are performed asynchronously, and the native modules can also make use of additional threads as well. This means we can decode images off of the main thread, save to disk in the background, measure text and compute layouts without blocking the UI, and more. As a result, React Native apps are naturally fluid and responsive. The communication is also fully serializable, which allows us to leverage Chrome Developer Tools to debug JS while running the app in the full app environment, in the sim or on a real device.</p><img src="/react-native/img/chrome_breakpoint.png" width="800"><h2>Touch Handling</h2><p>iOS has a very powerful system called the Responder Chain to negotiate touches in complex view hierarchies which does not have a universal analog on the web. React Native implements a similar responder system and provides high level components such as TouchableHighlight that integrate properly with scroll views and other elements without any additional configutation.</p><div class="prism language-javascript"><span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2>Asynchronous</h2><p>All operations between the JavaScript application code and the native platform are performed asynchronously, and the native modules can also make use of additional threads as well. This means we can decode images off of the main thread, save to disk in the background, measure text and compute layouts without blocking the UI, and more. As a result, React Native apps are naturally fluid and responsive. The communication is also fully serializable, which allows us to leverage Chrome Developer Tools to debug JS while running the app in the full app environment, in the sim or on a real device.</p><img src="/react-native/img/chrome_breakpoint.png" width="800" height="606"><h2>Touch Handling</h2><p>iOS has a very powerful system called the Responder Chain to negotiate touches in complex view hierarchies which does not have a universal analog on the web. React Native implements a similar responder system and provides high level components such as TouchableHighlight that integrate properly with scroll views and other elements without any additional configutation.</p><div class="prism language-javascript"><span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span> ScrollView<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -71,7 +71,7 @@ module<span class="token punctuation">.</span>exports <span class="token operato
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><section class="home-bottom-section"><div class="buttons-unit"><a href="docs/getting-started.html#content" class="button">Get started with React Native</a></div></section></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
css/react-native.css
+2 -2
View File
@@ -324,7 +324,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
}
.buttons-unit {
margin-top: 60px;
margin-top: 40px;
text-align: center;
}
@@ -576,7 +576,7 @@ section.black content {
font-size: 24px;
}
.documentationContent h2 {
h2 {
margin-top: 30px;
}
docs/activityindicatorios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/alertios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/animation.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/appregistry.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/appstateios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/asyncstorage.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/cameraroll.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/datepickerios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/flexbox.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/geolocation.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/gesture-responder-system.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/getting-started.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/image.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/interactionmanager.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/layoutanimation.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/listview.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/mapview.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/nativemodulesios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/navigatorios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/netinfo.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/network.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/panresponder.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/pickerios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/pixelratio.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/pushnotificationios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/reactnavigator.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/scrollview.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/sliderios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/statusbarios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/style.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/stylesheet.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/switchios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/tabbarios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/testing.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/text.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/textinput.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/timers.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/touchablehighlight.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/touchableopacity.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/touchablewithoutfeedback.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/tutorial.html
+151 -4
View File
File diff suppressed because one or more lines are too long
docs/vibrationios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/videos.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/view.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/webview.html
+1 -1
View File
File diff suppressed because one or more lines are too long
support.html
+1 -1
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | Build Native Apps Using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | Build 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="Build Native Apps Using React"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="">docs</a></li><li><a href="/react-native/support.html" class="active">support</a></li><li><a href="http://facebook.github.io/react" class="">react</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><section class="content wrap documentationContent nosidebar"><div class="inner-content"><h1>Need help?</h1><div class="subHeader"></div><p><strong>React Native</strong> is worked on full-time by Facebook&#x27;s product infrastructure user interface engineering teams. They&#x27;re often around and available for questions.</p><h2><a class="anchor" name="stack-overflow"></a>Stack Overflow <a class="hash-link" href="#stack-overflow">#</a></h2><p>Many members of the community use Stack Overflow to ask questions. Read through the <a href="http://stackoverflow.com/questions/tagged/reactnative">existing questions</a> tagged with <strong>reactnative</strong> or <a href="http://stackoverflow.com/questions/ask">ask your own</a>!</p><h2><a class="anchor" name="irc"></a>IRC <a class="hash-link" href="#irc">#</a></h2><p>Many developers and users idle on Freenode.net&#x27;s IRC network in <strong><a href="irc://chat.freenode.net/reactnative">#reactnative on freenode</a></strong>.</p><h2><a class="anchor" name="twitter"></a>Twitter <a class="hash-link" href="#twitter">#</a></h2><p><a href="https://twitter.com/search?q=%23reactnative"><strong>#reactnative</strong> hash tag on Twitter</a> is used to keep up with the latest React Native news.</p><p><center><a class="twitter-timeline" data-dnt="true" data-chrome="nofooter noheader transparent" href="https://twitter.com/search?q=%23reactnative" data-widget-id="565960513457098753"></a></center></p></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps with React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | A framework for building native apps with 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 with React"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="">docs</a></li><li><a href="/react-native/support.html" class="active">support</a></li><li><a href="http://facebook.github.io/react" class="">react</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><section class="content wrap documentationContent nosidebar"><div class="inner-content"><h1>Need help?</h1><div class="subHeader"></div><p><strong>React Native</strong> is worked on full-time by Facebook&#x27;s product infrastructure user interface engineering teams. They&#x27;re often around and available for questions.</p><h2><a class="anchor" name="stack-overflow"></a>Stack Overflow <a class="hash-link" href="#stack-overflow">#</a></h2><p>Many members of the community use Stack Overflow to ask questions. Read through the <a href="http://stackoverflow.com/questions/tagged/react-native">existing questions</a> tagged with <strong>react-native</strong> or <a href="http://stackoverflow.com/questions/ask">ask your own</a>!</p><h2><a class="anchor" name="irc"></a>IRC <a class="hash-link" href="#irc">#</a></h2><p>Many developers and users idle on Freenode.net&#x27;s IRC network in <strong><a href="irc://chat.freenode.net/reactnative">#reactnative on freenode</a></strong>.</p><h2><a class="anchor" name="twitter"></a>Twitter <a class="hash-link" href="#twitter">#</a></h2><p><a href="https://twitter.com/search?q=%23reactnative"><strong>#reactnative</strong> hash tag on Twitter</a> is used to keep up with the latest React Native news.</p><p><center><a class="twitter-timeline" data-dnt="true" data-chrome="nofooter noheader transparent" href="https://twitter.com/search?q=%23reactnative" data-widget-id="565960513457098753"></a></center></p></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)