Files
react-native/website/versioned_docs/0.22/getting-started.md
T
2017-10-27 11:51:58 -07:00

6 lines
5.5 KiB
Markdown

---
id: version-0.22-getting-started
title: getting-started
original_id: getting-started
---
<a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="getting-started"></a>Getting Started <a class="hash-link" href="docs/getting-started.html#getting-started">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/GettingStarted.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="requirements"></a>Requirements <a class="hash-link" href="docs/getting-started.html#requirements">#</a></h2><ol><li>OS X - This guide assumes OS X which is needed for iOS development.</li><li><a href="http://brew.sh/" target="_blank">Homebrew</a> is the recommended way to install Watchman and Flow.</li><li>Install <a href="https://nodejs.org/" target="_blank">Node.js</a> 4.0 or newer.<ul><li>Install <strong>nvm</strong> with <a href="https://github.com/creationix/nvm#installation" target="_blank">its setup instructions here</a>. Then run <code>nvm install node &amp;&amp; nvm alias default node</code>, which installs the latest version of Node.js and sets up your terminal so you can run it by typing <code>node</code>. With nvm you can install multiple versions of Node.js and easily switch between them.</li><li>New to <a href="https://docs.npmjs.com/" target="_blank">npm</a>?</li></ul></li><li><code>brew install watchman</code>. We recommend installing <a href="https://facebook.github.io/watchman/docs/install.html" target="_blank">watchman</a>, otherwise you might hit a node file watching bug.</li><li><code>brew install flow</code>, if you want to use <a href="http://www.flowtype.org" target="_blank">flow</a>.</li></ol><p>We recommend periodically running <code>brew update &amp;&amp; brew upgrade</code> to keep your programs up-to-date.</p><h2><a class="anchor" name="ios-setup"></a>iOS Setup <a class="hash-link" href="docs/getting-started.html#ios-setup">#</a></h2><p><a href="https://developer.apple.com/xcode/downloads/" target="_blank">Xcode</a> 7.0 or higher is required. It can be installed from the App Store.</p><h2><a class="anchor" name="android-setup"></a>Android Setup <a class="hash-link" href="docs/getting-started.html#android-setup">#</a></h2><p>To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See <a href="docs/android-setup.html" target="_blank">Android setup guide</a> for instructions on how to set up your Android environment.</p><p><em>NOTE:</em> There is experimental <a href="docs/linux-windows-support.html" target="_blank">Windows and Linux support</a> for Android development.</p><h2><a class="anchor" name="quick-start"></a>Quick start <a class="hash-link" href="docs/getting-started.html#quick-start">#</a></h2><p>Install the React Native command line tools:</p><div class="prism language-javascript">$ npm install <span class="token operator">-</span>g react<span class="token operator">-</span>native<span class="token operator">-</span>cli</div><p><strong>NOTE</strong>: If you see the error, <code>EACCES: permission denied</code>, please run the command: <code>sudo npm install -g react-native-cli</code>.</p><p>Create a React Native project:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native init AwesomeProject</div><p><strong>To run the iOS app:</strong></p><ul><li><code>$ cd AwesomeProject</code></li><li>Open <code>ios/AwesomeProject.xcodeproj</code> and hit run in Xcode.</li><li>Open <code>index.ios.js</code> in your text editor of choice and edit some lines.</li><li>Hit ⌘-R in your iOS simulator to reload the app and see your change!</li></ul><p><em>Note: If you are using an iOS device, see the <a href="docs/running-on-device-ios.html#content" target="_blank">Running on iOS Device page</a>.</em></p><p><strong>To run the Android app:</strong></p><ul><li><code>$ cd AwesomeProject</code></li><li><code>$ react-native run-android</code></li><li>Open <code>index.android.js</code> in your text editor of choice and edit some lines.</li><li>Press the menu button (F2 by default, or ⌘-M in Genymotion) and select <em>Reload JS</em> to see your change!</li><li>Run <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal to see your app's logs</li></ul><p><em>Note: If you are using an Android device, see the <a href="docs/running-on-device-android.html#content" target="_blank">Running on Android Device page</a>.</em></p><p>Congratulations! You've successfully run and modified your first React Native app.</p><p><em>If you run into any issues getting started, see the <a href="docs/troubleshooting.html#content" target="_blank">troubleshooting page</a>.</em></p><h2><a class="anchor" name="adding-android-to-an-existing-react-native-project"></a>Adding Android to an existing React Native project <a class="hash-link" href="docs/getting-started.html#adding-android-to-an-existing-react-native-project">#</a></h2><p>If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:</p><ol><li>Update the <code>react-native</code> dependency in your <code>package.json</code> file to <a href="https://www.npmjs.com/package/react-native" target="_blank">the latest version</a></li><li><code>$ npm install</code></li><li><code>$ react-native android</code></li></ol></div><div class="docs-prevnext"><a class="docs-next" href="docs/getting-started-linux.html#content">Next →</a></div>