Skip to content

Latest commit

 

History

History
334 lines (240 loc) · 11.9 KB

GettingStarted.md

File metadata and controls

334 lines (240 loc) · 11.9 KB
Raw
id title layout category permalink next
quick-start-getting-started
Getting Started
docs
The Basics
docs/getting-started.html
tutorial

Welcome to React Native! This page will help you install React Native on your system, so that you can build apps with it right away. If you already have React Native installed, you can skip ahead to the Tutorial.

The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick one to start with, since the setup is a bit different.

<style> .toggler a { display: inline-block; padding: 10px 5px; margin: 2px; border: 1px solid #05A5D1; border-radius: 3px; text-decoration: none !important; } .display-os-mac .toggler .button-mac, .display-os-linux .toggler .button-linux, .display-os-windows .toggler .button-windows, .display-platform-ios .toggler .button-ios, .display-platform-android .toggler .button-android { background-color: #05A5D1; color: white; } block { display: none; } .display-platform-ios.display-os-mac .ios.mac, .display-platform-ios.display-os-linux .ios.linux, .display-platform-ios.display-os-windows .ios.windows, .display-platform-android.display-os-mac .android.mac, .display-platform-android.display-os-linux .android.linux, .display-platform-android.display-os-windows .android.windows { display: block; }</style> Mobile OS: iOS Android Development OS: Mac Linux Windows

Unsupported

Unfortunately, Apple only lets you develop for iOS on a Mac. If you want to build an iOS app but you don't have a Mac yet, you can try starting with the Android instructions instead.

Dependencies for Mac + iOS

You will need Xcode, node.js, the React Native command line tools, and Watchman.

Dependencies for Mac + Android

You will need Android Studio, node.js, the React Native command line tools, and Watchman.

We recommend installing node and watchman via Homebrew.

brew install node
brew install watchman

Node comes with npm, which lets you install the React Native command line interface.

npm install -g react-native-cli

If you get a permission error, try with sudo: sudo npm install -g react-native-cli.

If you get error Cannot find module 'npmlog', try this before: curl -0 -L http://npmjs.org/install.sh | sudo sh.

The easiest way to install Xcode is via the Mac App Store.

Download and install Android Studio.

If you plan to make changes in Java code, we recommend Gradle Daemon which speeds up the build.

Dependencies for Linux + Android

Dependencies for Windows + Android

You will need node.js, the React Native command line tools, Watchman, and Android Studio.

Follow the installation instructions for your Linux distribution to install Node.js 4 or newer.

We recommend installing node.js and Python2 via Chocolatey, a popular package manager for Windows. Open a Command Prompt as Administrator, then run:

choco install nodejs.install
choco install python2

Node comes with npm, which lets you install the React Native command line interface.

npm install -g react-native-cli

Download and install Android Studio.

Watchman is a tool by Facebook for watching changes in the filesystem. Installing it should improve performance, but you can also try not installing it, if the installation process is too annoying. You can follow the Watchman installation guide to compile and install from source.

If you plan to make changes in Java code, we recommend Gradle Daemon which speeds up the build.

Testing your React Native Installation

Use the React Native command line tools to generate a new React Native project called "AwesomeProject", then run react-native run-ios inside the newly created folder.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

You should see your new app running in the iOS Simulator shortly. react-native run-ios is just one way to run your app - you can also run it directly from within Xcode or Nuclide.

Use the React Native command line tools to generate a new React Native project called "AwesomeProject", then run react-native run-android inside the newly created folder.

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

If everything is set up correctly, you should see your new app running in your Android emulator shortly. react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

Modifying your app

Now that you have successfully run the app, let's modify it.

  • Open index.ios.js in your text editor of choice and edit some lines.
  • Hit Command⌘ + R in your iOS Simulator to reload the app and see your change!
  • Open index.android.js in your text editor of choice and edit some lines.
  • Press the R key twice or select Reload from the Developer Menu to see your change!

That's it!

Congratulations! You've successfully run and modified your first React Native app.

Testing your React Native Installation

Use the React Native command line tools to generate a new React Native project called "AwesomeProject", then run react-native run-android inside the newly created folder.

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

A common issue is that the packager is not started automatically when you run react-native run-android. You can start it manually using react-native start.

If you hit a ERROR Watcher took too long to load on Windows, try increasing the timeout in this file (under your node_modules/react-native/).

Modifying your app

Now that you have successfully run the app, let's modify it.

  • Open index.android.js in your text editor of choice and edit some lines.
  • Press the R key twice or select Reload from the Developer Menu to see your change!

That's it!

Congratulations! You've successfully run and modified a React Native app.

Now What?

  • If you want to add this new React Native code to an existing application, check out the Integration guide.

  • If you can't get this to work, see the Troubleshooting page.

  • If you're curious to learn more about React Native, continue on to the Tutorial.

<script> // Convert
......
// Into
......
var blocks = document.getElementsByTagName('block'); for (var i = 0; i < blocks.length; ++i) { var block = blocks[i]; var span = blocks[i].parentNode; var container = span.parentNode; container.insertBefore(block, span); container.removeChild(span); } // Convert
...content...
// Into
...content...
blocks = document.getElementsByTagName('block'); for (var i = 0; i < blocks.length; ++i) { var block = blocks[i]; while (block.nextSibling && block.nextSibling.tagName !== 'BLOCK') { block.appendChild(block.nextSibling); } } function display(type, value) { var container = document.getElementsByTagName('block')[0].parentNode; container.className = 'display-' + type + '-' + value + ' ' + container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), ''); } // If we are coming to the page with a hash in it (i.e. from a search, for example), try to get // us as close as possible to the correct platform and dev os using the hashtag and block walk up. var foundHash = false; if (window.location.hash !== '' && window.location.hash !== 'content') { // content is default var hashLinks = document.querySelectorAll('a.hash-link'); for (var i = 0; i < hashLinks.length && !foundHash; ++i) { if (hashLinks[i].hash === window.location.hash) { var parent = hashLinks[i].parentElement; while (parent) { if (parent.tagName === 'BLOCK') { var devOS = null; var targetPlatform = null; // Could be more than one target os and dev platform, but just choose some sort of order // of priority here. // Dev OS if (parent.className.indexOf('mac') > -1) { devOS = 'mac'; } else if (parent.className.indexOf('linux') > -1) { devOS = 'linux'; } else if (parent.className.indexOf('windows') > -1) { devOS = 'windows'; } else { break; // assume we don't have anything. } // Target Platform if (parent.className.indexOf('ios') > -1) { targetPlatform = 'ios'; } else if (parent.className.indexOf('android') > -1) { targetPlatform = 'android'; } else { break; // assume we don't have anything. } // We would have broken out if both targetPlatform and devOS hadn't been filled. display('os', devOS); display('platform', targetPlatform); foundHash = true; break; } parent = parent.parentElement; } } } } // Do the default if there is no matching hash if (!foundHash) { var isMac = navigator.platform === 'MacIntel'; var isWindows = navigator.platform === 'Win32'; display('os', isMac ? 'mac' : (isWindows ? 'windows' : 'linux')); display('platform', isMac ? 'ios' : 'android'); } </script>