Beginners Guide To Setup a React native project | Mac Users

Photo by Charles Deluvio on Unsplash

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.

Installing dependencies

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.

1. Install Android studio:
   You can install it from HERE
2. Install the Android SDK:
   Android Studio installs the latest Android SDK by default.
3. Configure the ANDROID_HOME environment variable:
   Add the following lines to your $HOME/.bash_profile or $HOME/.bashrc config file:

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:

1. Start up Terminal
2. Type “cd ~/” to go to your home folder
3. Type “touch .bash_profile” to create your new file.
4. Edit .bash_profile with your favorite editor (or you can just type “open -e .bash_profile” to open it in TextEdit).
5. 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.

CocoaPods

Use 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
cd 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 devices
Make 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.