Getting Started with React Native on MacOS
By: Ajak Cyer
Tags: Mobile App Development, Flatiron School, React Native

Photo by Firmbee.com on Unsplash

What is React Native?

React Native is a mobile development framework written in JavaScript. It uses React.js which is a JavaScript library for building user interfaces. It also has its own special components that know how to communicate with the native device’s platform so you can build a user interface. Mobile devices don’t use HTML tags so React Native gives us those components that can render our user interface. It gives us access to the device’s API like the device’s camera, and more.

It gives us everything we need to create a real mobile app that we could have in the IOS and Andriod app stores.

All you need is basic knowledge of JavaScript and React.js and a computer you enjoy coding on.

Expo

Expo is one of the two ways you can create a React Native App, the other being React Native CLI.

Expo is a free third-party service that gives you a managed app development platform. It takes away some of the complexities of developing the app and is more convenient. It gives you wrappers for common device features you need like the camera or a map. Though you are limited by the Expo Ecosystem, it removes some of the control you would have if you built a raw React Native CLI.

I’d recommend Expo for people getting started. If you ever feel like you need more control you can always switch to React Native CLI.

Getting Started

Download NodeJS

Check if you already have NodeJS downloaded by entering node -v on your terminal. If not, go to nodejs.org and download the latest version and walk through the installation process.

Get the Command Line Tool

Enter npm install expo-cli --global on your terminal which will install the Expo CLI tool that will help you create and manage your React Native projects globally on your computer.

Create your Expo Project

In the folder or directory you want your project to be in, run:

expo init <enter your project name here>

You will be asked what kind of template you want to use, choose “blank”

Choose if you want to download dependencies with Yarn or NPM (doesn’t matter much but I used Yarn)

Starting up your project

cd into your React Native project folder open it on your favorite IDE (ahem VScode) and on the terminal, run:

expo start

As long as your working on your project, make sure to leave this command line running.

This will open up a new tab or window with the Expo Development Tools. It’s a window that allows you to run your app on different devices or simulators and manage part of your app where you can see warnings.

Running your App on your Device

Download the Expo app on your personal device.

(If using an iPhone) Navigate to the Expo Development Tools tab or window that just opened up and scan the QR code shown using your phone’s camera.

This will prompt you to open the Expo app.

Without even signing up this will take your app and compile it onto your Expo app so you can interact with it.

React Native Project Folder

We’ll ignore everything right now and only focus on the App.js file. The code looks quite similar to the code we see when you use React to create our web application. We still use Class and Function components, and we still have React imported.

The difference is that we’re also importing things from the react-native library which gives us special components that are compiled to the native platform’s widgets. Remember, mobile applications don’t recognize HTML.

React Native does not use CSS for styling, it uses JavaScript with CSS-like property names from the react-native library.

Check out React Native’s core components here!

Running your App on a Simulator

I recommend using a device simulator during the development process. You can also use your own personal device to see it run on a real mobile device but in my opinion, using a simulator makes things easier because everything is on my computer screen AND I can test my app on different mobile devices.