Beginners Guide To Setup a React native project | Mac Users
Welcome to your React Native journey! Are you looking for environment setup instructions? You are at the right place.
Setting a React Native CLI would be easier if you have experience working with mobile development.
Android studio, Xcode or visual studio is a must before setting a react server. Though I personally prefer the Visual studio Code as it is faster than the others, you can use any of the others. But Visual studio Code does have a few advantages over others. We’ll get to that later.
You can install the visual studio code for mac from HERE.
Visual studio code is a lighter version of Visual studio.
You will need Node, Watchman, the React Native command line interface and a JDK.
Node & Watchman
Step 1: Install homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Step 2 :
brew install node
brew install watchman
Java Development Kit
brew cask install adoptopenjdk/openjdk/adoptopenjdk8
if you already have jdk installed in your system, make sure it is JDK 8 or latest version.
Android development environment
If you have experience in android development,You would have already Android studio installed , if so please move to ios setup.
- Install Android studio:
You can install it from HERE
- Install the Android SDK:
Android Studio installs the latest Android SDK by default.
- Configure the ANDROID_HOME environment variable:
Add the following lines to your
export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools
If you are not able to find .bash_profile file then create one using the following steps:
- Start up Terminal
- Type “cd ~/” to go to your home folder
- Type “touch .bash_profile” to create your new file.
- Edit .bash_profile with your favorite editor (or you can just type “open -e .bash_profile” to open it in TextEdit).
- Type “. .bash_profile” to reload .bash_profile and update any functions you add.
To import your react Native project go inside the project folder and import the android folder from there. Now you can run it. You might need to set the proper Gradle version and SDK path.
Xcode & CocoaPods
Install Xcode to support the IOS support. The best place to install Xcode is the apple app store.
If it is already have installed Xcode then make sure it is the updated one.
sudo gem install cocoapods Command in your terminal.
To run ios build import ios package from complete react native project.
Now try to run it on the simulator.
Creating a new application
To create a new react-native project type following commands in your terminal:
npx react-native init SampleProject
If you already have a project and just want to run it, go to the project folder by using CD command in your terminal.
Now you need to start react-native server by the following command:
npx react-native start
Run android build through the terminal after running react-native server:
step 1: check connected android devices
./adb devicesMake sure only one device is connected at a time. You can run on the emulator as well.
step 2: Command to run the android package:
npx react-native run-android
Run IOS build through the terminal after running react-native server:
You can either directly run ios build through simulator using Xcode or run it from the terminal.
First run simulator through Xcode.
To run from terminal type following command:
npx react-native run-ios It takes iPhone X by default, but if you are running any other device then type the following command in your terminal:
npx react-native run-ios — simulator “iPhone 11”
Now lets discuss about why Visual studio code is better choice for react native code.
1. it is lightweight
2. It is easy to switch between files, when I was using Android studio to do coding i was unable to move to files by method calling. It might be they don't support react code.
Still having problems with setting the development environment? Feel free to reach out to me. Always happy to help.