Getting Started With React Native Expo: A Drama In 3 Acts

My wife and brother have started a business (https://swervedating.com — we’re in open BETA!), and the next logical step for their service is to build an app. Not in a “we need an app, right?” kind of way. Their service and customers demand the benefits that a native experience offers: speed, access to camera and geolocation, push notifications, and a slick, speedy, “touchy” experience.

Both of them have learned some JavaScript, and I’m constantly impressed with their innate ability to break-down both mundane workflows and complex challenges into discrete steps; after over twenty years in tech, I feel strongly that this fundamental skill is the foundation of software engineering.

So I tell my brother, “hey, I’ve done some React Native, and it can be really good, especially Expo.” He says, “okay, I know some JavaScript.” He has a Mac, time on his hands, a drive to be successful, and he is ignorant of the entire stack. The stage is set, so let our drama begin.


Act I — The Tools You Don’t Know You Need

A sane development environment is actually quite “thick.” For those who might say, “just install Docker and…” I’ll stop you right there: adding another system for a single developer who is just getting started isn’t necessary. I understand the benefits, but there’s enough to explain to him without _also_ explaining what Docker is, why it’s cool (and it is!), and how it can bring repeatability to his setup. So…

To get a base OSX environment up for Expo, you need a few things to make your life better, namely all of the source control, node, and CLI accoutrements.

  1. If you’re doing a lot at the terminal (and you WILL be for this), I think a better terminal is in order. Snag iTerm2 and also add the key bindings for editing commands with the native editing shortcuts.
  2. Start with homebrew, you’ll need it for yarn and you’ll likely find packages down the road that you need.
  3. Next is … NOT node. It’s git. Yup. Install it from here.
  4. Any JS developer who’s been bitten by node or npm differences will agree that you need some means of managing node and npm. NVM fits the bill.
  5. Microsoft is on their game these days, and VSCode has excellent support for the React ecosystem and pretty much everything you’d need. Download VSCode and install a React Native extension.
  6. Now that you have some basics, take a deep breath and install the LTS version of node and npm. It’ll take a minute, so grab a coffee.

Act II-Use Your Shiny New Tools

Open your terminal and be prepared to be wowed. By which I mean, let’s install the expo-cli and read about React Native:

  1. Download and install the Expo tools for iOS or Android.
  2. While you’re on that page, install the Expo CLI.
  3. And while you’re waiting for that, sign up for an account and check out your first Snack!
  4. If your head is spinning and you don’t recognize React, then dig in and read about it. Trust me, it’ll help.
  5. Oh, and if you don’t recognize some of that JavaScript syntax, it’s okay. We use ES6 and beyond in our React Native ecosystem.
  6. Also, all of this magic is really just sugar in most cases. Behind the scenes, it’s plain JS. Babel, WebPack, and Metro transpire that stuff for you. It’s black magic, and you should always understand the dark arts.
  7. Okay, you’re nearly ready. Take a deep breath.

Act III-Embrace Uncertainty

There are a lot of moving pieces in those tools you just acquired. You’re staring at cutting-edge JavaScript, transpired automatically, including an HTML-like syntax that separates concerns (presentation vs business logic).

You now have some choices to make:

  1. How do you handle state management? Redux?
  2. What about GraphQL for schema management and isolation of fetching? Optimistic updates are cool. And you might not need Redux.
  3. If Redux is out, do you use Immer for immutability?
  4. You’d better plan for Async rendering and understand the Context API.
  5. Oh, and you need a theming library.
  6. And an Apple Dev account.
  7. (And Google Play)

Grab an another cup of joe. It’s time to make the truly hard decisions. NOW you can start developing your app.