12 KiB
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.
Unsupported
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 selectReload
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 usingreact-native start
.
If you hit a
ERROR Watcher took too long to load
on Windows, try increasing the timeout in this file (under yournode_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 selectReload
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.