Painless React Native Setup for Mac, Windows, & Linux

Part One — Mac

This is Part 1 of a three-part series covering React Native setup for Mac, Windows, & Linux.

During my teaching with Infinite Red Academy, one of the initial challenges I’ve noticed when students are getting started with React Native is installing and running React Native on their machines. Our classes and workshops are filled with students running a mix of Mac OS, Windows, and Linux so the set-up process for each individual student varies greatly across all three operating systems. If you’re a student in one of our workshops or just getting started with React Native on your own, this step-by-step guide will help you painlessly set up React Native on your Mac!

PRO TIP: Make sure you’re connected to the internet!

Setting up for Mac OS

Dependencies (Install instructions below)

• Node
• Watchman
• CocoaPods
• Xcode

LET’S GET STARTED

Homebrew (if you don’t already have it):

Paste all of the following into your terminal prompt at your root directory:

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

Install Node (you’ll need ≥ 8.3):

brew install node

Install Watchman

brew install watchman

Install CocoaPods:

sudo gem install cocoapods

If you get an error, try installing npm directly with:

curl -0 -L https://npmjs.org/install.sh | sudo sh

Install Xcode:

Via the Appstore

Install the Xcode Command Line Tools:

1. Open Xcode
2. ⌘, to open Preferences or (Xcode > Preferences)
3. Goto the Locations tab
4. Install the Command Line Tools by selecting the most recent version from the Command Line Tools dropdown

Create a React Native App:

npx react-native init YourProjectName

Run the app:

cd YourProjectName

npx react-native run-ios

If a packager isn’t running, you might need to yarn start in a separate terminal window.

ENJOY!

About Frank

Frank von Hoven III is a Software Engineer at Infinite Red, specializing in React Native mobile development, an instructor with Infinite Red Academy, and the Editor-in-Chief of The React Native Newsletter. He lives in New Orleans, LA.