Homebrew, in order to install the required NodeJS, in addition to some -recommended installs.
We recommend periodically running
brew update && brew upgradeto keep your programs up-to-date.
Use Homebrew to install Node.js.
NodeJS 4.0 or greater is required for React Native. The default Homebrew package for Node is +recommended installs.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Node #
Use Homebrew to install Node.js.
NodeJS 4.0 or greater is required for React Native. The default Homebrew package for Node is currently 6.0, so that is not an issue.
brew install nodeReact Native Command Line Tools #
The React Native command line tools allow you to easily create and initialize projects, etc.
npm install -g react-native-cliIf you see the error,
EACCES: permission denied, please run the command:sudo npm install -g react-native-cli.- XCode #
Xcode 7.0 or higher. Open the App Store or go to https://developer.apple.com/xcode/downloads/. This will also install
gitas well.+ Xcode #
Xcode 7.0 or higher. Open the App Store or go to https://developer.apple.com/xcode/downloads/. This will also install
gitas well.- Android Studio #
Android Studio 2.0 or higher. This will provide you -the Android SDK and emulator required to run and test your React Native apps.
Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type +
Android Studio #
Android Studio 2.0 or higher.
Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type
javac -versionto see what version you have, if any. If you do not meet the JDK requirement, you can -download it.You will need to customize your installation:
- Choose a
Custominstallation
- Choose both
PerformanceandAndroid Virtual Device
- After installation, choose
Configure | SDK Managerfrom the Android Studio welcome window.
- In the
SDK Platformswindow, chooseShow Package Detailsand underAndroid 6.0 (Marshmallow), make sure thatGoogle APIs,Intel x86 Atom System Image,Intel x86 Atom_64 System Image, andGoogle APIs Intel x86 Atom_64 System Imageare checked.
- In the
SDK Toolswindow, chooseShow Package Detailsand underAndroid SDK Build Tools, make sure thatAndroid SDK Build-Tools 23.0.1is selected.
ANDROID_HOME Environment Variable #
Ensure the
ANDROID_HOMEenvironment variable points to your existing Android SDK. To do that, add +download it.Android Studio will provide you the Android SDK and emulator required to run and test your React +Native apps.
Unless otherwise mentioned, keep all the setup defaults intact. For example, the +
Android Support Repositoryis installed automatically with Android Studio, and we need that +for React Native.You will need to customize your installation:
- Choose a
Custominstallation
- Choose both
PerformanceandAndroid Virtual Device
- After installation, choose
Configure | SDK Managerfrom the Android Studio welcome window.
- In the
SDK Platformswindow, chooseShow Package Detailsand underAndroid 6.0 (Marshmallow), make sure thatGoogle APIs,Intel x86 Atom System Image,Intel x86 Atom_64 System Image, andGoogle APIs Intel x86 Atom_64 System Imageare checked.
- In the
SDK Toolswindow, chooseShow Package Detailsand underAndroid SDK Build Tools, make sure thatAndroid SDK Build-Tools 23.0.1is selected.
ANDROID_HOME Environment Variable #
Ensure the
ANDROID_HOMEenvironment variable points to your existing Android SDK. To do that, add this to your~/.bashrc,~/.bash_profile(or whatever your shell uses) and re-open your terminal:# If you installed the SDK without Android Studio, then it may be something like: # /usr/local/opt/android-sdk export ANDROID_HOME=~/Library/Android/sdk@@ -69,11 +71,11 @@ Flow as part of your codebase). brew iAdd Android Tools Directory to your
PATH#You can add the Android tools directory on your
PATHin case you need to run any of the Android tools from the command line such asandroid avd. In your~/.bashor~/.bash_profile:# Your exact string here may be different. PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}" -export PATHGradle Daemon #
Enable Gradle Daemon which greatly improves incremental build times for changes in java code.
Other Optional Installs #
Git #
Git version control. If you have installed XCode, Git is +export PATH
Gradle Daemon #
Enable Gradle Daemon which greatly improves incremental build times for changes in java code.
Other Optional Installs #
Git #
Git version control. If you have installed Xcode, Git is already installed, otherwise run the following:
brew install git- Nuclide #
[Nuclide] is an IDE from Facebook providing a first-class development environment for writing, -running and +
Nuclide #
Nuclide is an IDE from Facebook providing a first-class development environment +for writing, running and debugging React Native applications.
Get started with Nuclide here.
@@ -104,13 +106,15 @@ sudo ln -s / Fire up the Termimal and use Chocolatey to install NodeJS.
choco install nodejs.installReact Native Command Line Tools #
The React Native command line tools allow you to easily create and initialize projects, etc.
npm install -g react-native-cliIf you see the error,
EACCES: permission denied, please run the command: -sudo npm install -g react-native-cli.Android Studio #
Android Studio 2.0 or higher. This will provide you -the Android SDK and emulator required to run and test your React Native apps.
Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type +
sudo npm install -g react-native-cli.Android Studio #
Android Studio 2.0 or higher.
Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type
javac -versionto see what version you have, if any. If you do not meet the JDK requirement, you can download it, or use a pacakage manager to install it (e.g.choco install jdk8, -apt-get install default-jdk).+ apt-get install default-jdk).
Android Studio will provide you the Android SDK and emulator required to run and test your React +Native apps.
Unless otherwise mentioned, keep all the setup defaults intact. For example, the +
Android Support Repositoryis installed automatically with Android Studio, and we need that +for React Native.
You will need to customize your installation:
Custom installation
Android Virtual Device
PATH #You can add the Android tools directory on your PATH in case you need to run any of the Android
tools from the command line such as android avd.
In your ~/.bash or ~/.bash_profile:
In your ~/.bashrc or ~/.bash_profile:
index.ios.js in your text editor of choice (e.g. Nuclide) and edit some lines.R key twice OR open the menu (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logsindex.android.js in your text editor of choice (e.g. Nuclide) and edit some lines.R key twice OR open the menu (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logsCongratulations! You've successfully run and modified your first React Native app.
Congratulations! You've successfully run and modified your first React Native app.
A common issue on Windows is that the packager is not started automatically when you run +
A common issue is that the packager is not started automatically when you run
react-native run-android. You can start it manually using:
Or 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/).
Now that you successfully started the project, let's modify it:
R key twice OR open the menu (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logsCongratulations! You've successfully run and modified your first React Native app.
Or 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/).
Now that you successfully started the project, let's modify it:
index.android.js in your text editor of choice (e.g. Nuclide) and edit some lines.R key twice OR open the menu (F2 by default, or ctrl-M in the emulator) and select Reload JS to see your change!adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logsCongratulations! You've successfully run and modified your first React Native app.
JavaScript Environment # | Edit on GitHub |
When using React Native, you're going to be running your JavaScript code in two environments:
While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.
Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.
Here's a full list of React Native's enabled transformations.
ES5
React Nativepromise.catch(function() { });ES6
<C onPress={() => this.setState({pressed: true})}let greeting = 'hi';Math.max(...array);class C extends React.Component { render() { return <View />; } }const answer = 42;var {isActive, style} = this.props;for (var num of [1, 2, 3]) {}import React, { Component } from 'react-native';var key = 'abc'; var obj = {[key]: 10};var obj = { method() { return 10; } };var name = 'vjeux'; var obj = { name };function(type, ...args) { }var who = 'world'; var str = `Hello ${who}`;ES7
var extended = { ...obj, a: 10 };function f(a, b, c,) { }async function doStuffAsync() { const foo = await doOtherStuffAsync(); };Specific
Many standards functions are also available on all the supported JavaScript runtimes.
Browser
ES6
ES7
Specific
__DEV__JavaScript Environment # | Edit on GitHub |
When using React Native, you're going to be running your JavaScript code in two environments:
While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.
Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.
Here's a full list of React Native's enabled transformations.
ES5
promise.catch(function() { });ES6
<C onPress={() => this.setState({pressed: true})}let greeting = 'hi';Math.max(...array);class C extends React.Component { render() { return <View />; } }const answer = 42;var {isActive, style} = this.props;for (var num of [1, 2, 3]) {}import React, { Component } from 'react-native';var key = 'abc'; var obj = {[key]: 10};var obj = { method() { return 10; } };var name = 'vjeux'; var obj = { name };function(type, ...args) { }var who = 'world'; var str = `Hello ${who}`;ES7
var extended = { ...obj, a: 10 };function f(a, b, c,) { }async function doStuffAsync() { const foo = await doOtherStuffAsync(); };Specific
Many standards functions are also available on all the supported JavaScript runtimes.
Browser
ES6
ES7
Specific
__DEV__JavaScript Environment # | Edit on GitHub |
When using React Native, you're going to be running your JavaScript code in two environments:
While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.
Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.
Here's a full list of React Native's enabled transformations.
ES5
promise.catch(function() { });ES6
<C onPress={() => this.setState({pressed: true})}let greeting = 'hi';Math.max(...array);class C extends React.Component { render() { return <View />; } }const answer = 42;var {isActive, style} = this.props;for (var num of [1, 2, 3]) {}import React, { Component } from 'react-native';var key = 'abc'; var obj = {[key]: 10};var obj = { method() { return 10; } };var name = 'vjeux'; var obj = { name };function(type, ...args) { }var who = 'world'; var str = `Hello ${who}`;ES7
var extended = { ...obj, a: 10 };function f(a, b, c,) { }async function doStuffAsync() { const foo = await doOtherStuffAsync(); };Specific
Many standards functions are also available on all the supported JavaScript runtimes.
Browser
ES6
ES7
Specific
__DEV__JavaScript Environment # | Edit on GitHub |
When using React Native, you're going to be running your JavaScript code in two environments:
While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.
Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.
Here's a full list of React Native's enabled transformations.
ES5
promise.catch(function() { });ES6
<C onPress={() => this.setState({pressed: true})}let greeting = 'hi';Math.max(...array);class C extends React.Component { render() { return <View />; } }const answer = 42;var {isActive, style} = this.props;for (var num of [1, 2, 3]) {}import React, { Component } from 'react-native';var key = 'abc'; var obj = {[key]: 10};var obj = { method() { return 10; } };var name = 'vjeux'; var obj = { name };function(type, ...args) { }var who = 'world'; var str = `Hello ${who}`;ES7
var extended = { ...obj, a: 10 };function f(a, b, c,) { }async function doStuffAsync() { const foo = await doOtherStuffAsync(); };Specific
Many standards functions are also available on all the supported JavaScript runtimes.
Browser
ES6
ES7
Specific
__DEV__