Chandrasekar Kuppusamy's Blog

Getting started with React Native for Mac

Chandrasekar Kuppusamy's photo
Chandrasekar Kuppusamy
·

3 min read

Getting started with React Native for Mac

Do you know who is the creator of react native? Yes, the answer is Facebook. React Native is a mobile cross-platform framework that lets to create a native Android/iOS application.

Tools and development environment?

Similar to other frameworks and programming languages, React Native expects the following setup to be in place for a beginner.

  1. Xcode

Do you wanna build apps for iOS as well? Then please go ahead with the Xcode installation from the app store. Hey! Again I support only Mac. Sadly no support for Windows, Linux and other platforms.

  1. Brew

Brewing coffee even takes some time, but installing or updating apps is just made simple using Brew. Yeah! It provides an easy option to install software, packages, SDK’s and libraries using simple terminal commands.

For example:

brew install mysql — Installs mysql into your mac.

brew update mysql — Updates mysql to latest version.

brew cask install google-chrome  — Installs Google chrome.

3. Node/NPM

Oooh! Here comes the main warrior who helps to make Javascript work outside the browser environment and NPM manages the dependencies.

Let’s take this ahead and see further to install Node on your machine.

brew install node — This installs node and other related packages to your Mac. (Really Brew made it simple!).

It’s time to verify your installation of the node using the node -v command from a terminal. It should say v8.8.1 or any versions which are installed.

4. Watchman

Watchman is a tool by Facebook for watching changes in the filesystem. It keeps an eye on the modified changes or updates that are made to particular files.

brew install watchman — This installs watchman to your mac.

5. Editors (Sublime or Atom or Vscode)

Though there are few IDE exist like Deco, the editors like Sublime or Atom provide ample amount of customization when it comes to Autosuggestion, lint, error correction, etc. I prefer Atom for React Native development. (Not really biased;-))

6. The React Native CLI

Node comes with npm, which lets you install the React Native command line interface.

Run the following command in a Terminal:

npm install -g react-native-cli

7. Lint/ESLint

This is one of the cool features of Atom, which lets you to debug the issues by pointing out your syntax errors.

Setup:

  1. Navigate to the root project and enter npm install — save-dev eslint-config-standard

  2. Create .eslintrc in the project root folder and paste the following snippet

{"extends": "standard"}

For example:

  • I have a habit of missing or closing brackets ‘()’

  • Fail to add semicolons ‘;’ at times

Installation: Navigate to Atom — Preferences — Install — Search for eslint and Install in your Atom

Some common React Native Terminal Commands?

  1. react-native init HelloWorld — Creates new React Native project

  2. react-native run-ios *—*Build and run the React Native project in your iOS simulator or device (Fingers crossed if XCode is not installed or updated properly)

  3. react-native run-android — Build and run the React Native project in your Android emulator or device (Make sure your Android Sdk and Gradle are installed)

  4. npm install — — save-dev eslint-config-standard — Used to configure elslint in atom

  5. npm start — — reset-cache — Reset Cache

  6. npm install — — save redux react-redux — Enables redux support

  7. npm install native-base — save- Initialise Native Base libray

Happy coding!

React Native