Beginner’s guide to React-Native CLI setup on Mac

It’s not hard as you might think.. wait, it might be I’m not really sure..

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. Since it uses JavaScript and by far my experience the easiessssssssttt language out there, I can’t emphasize it more. So, coding in JavaScript is easy peasy, but setting the environment is lemon in eye.

Okay, now that I’ve scared you enough let’s dive straight into setup.

Homebrew:

Homebrew is an open-source software package manager that makes it easier to install software on macOS (Apple’s operating system) and Linux.

Basically, a package manager’s job is to find and install the right software packages that will allow you to compile and run various apps/software on your specific operating system. A package manager, like Homebrew, does a lot of tedious time-consuming work that you would otherwise have to do manually.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

npm:

Now that we have Homebrew it can help us install other stuff like node and you’ll have npm on your mac.

brew install node

Watchman:

React Native uses watchman to detect when you’ve made code changes and then automatically build and push the update your device without you needing to manually refresh it, pretty cool right?

brew install watchman

Android:

For Android we need Android Studio yes, obvious. This comprehended guide will take you from android studio installation to setting home variables, click this link.

JDK/JRE

Now Android build needs JDK/JRE to run for that you’ll need complete java setup on your system only having android studio doesn’t help, if you don’t have it you can check this link or run this

brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

patience…

iOS

For iOS we need xcode that’s pretty easy you can get latest version of app on appstore, no extra things needed, but the legends has it takes two eternal days to download so go on put it on download learn to bake a cake and comeback for next step..

cocoapods

Okay, have the xcode? I’ll go with yes! Now we need to install cocoa pods on our machine

$ sudo gem install cocoapods

Phew, finally, we’re done with native setup!! coming easy so far, huh? Okay wipe those tears and put a fullstop on it by installing react-native cli.

This line installs the npm package react-native-cli along with its dependencies(from the npm repository host) inside the globally shared node_modules folder.

npm install -g react-native-cli

Now comes the best part, where we can do hello world :D that’s right now you’re gonna make your first react-native app.

just a pro tip create a new folder in your Documents name it anything like SAQ_REACTNATIVE and keep all your react-native projects under one roof.

Now navigate to your folder in your terminal:

cd documents/SAQ_REACTNATIVE 

and:

react-native init HelloWorldApp 

It’ll take a few minutes…

now navigate to your project

cd HelloWorldApp

and

react-native run-ios
or
react-native run-android

VScode

Open your project in VScode or your other favouite IDE, if you don’t have VScode install it from the link, it’s easy and lightweight.

Hello World

Go to file App.js remove everything in file that comes by default we need to adhere to tradition of our ancestors and display text Hello World now

import React from 'react';
import { Text, View } from 'react-native';
const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

This is just a plain view that’ll display the magic words in center of your mobile screen.

So, finally we did it, we came across alive with this little saga of starting on react-native.

If you have any troubles comment down below not that I’ll know the solution but we can always google together. ;)

Now that you’re starting your journey with React-Native, remember kids, don’t forget to read documentation of every library you use.