Getting Started with React Native on MacOS

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.

  1. Install Xcode
    Open up the Mac App Store and search for Xcode. Install it if you don’t have it already. This may take a bit of time to install.
  2. Check Xcode Command Line Tools
    Open Xcode “Preferences” then go to “Location” and make sure that the most recent version of Xcode is selected in Command Line Tools.
  3. Launch Your Simulator
    Open Xcode “Open Developer Tool” → “Simulator”
    This will launch a simulator that will begin booting up (you can always change your simulator device).
  4. Launch Your App on Simulator
    On your Expo Development Tools click “Run on iOS simulator” and it will open the Expo App and launch your project in that app, all on a simulator.

And there you have it! You should have a basic React Native App running on a mobile device, simulated or real.

Happy Coding!!

--

--

--

Software Engineering Student at Flatiron NYC. Learning day by day 💻

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Just Get To Know the Map Function and Use It

Are injection attacks still a problem in JavaScript?

Kogito Tooling 0.8.0 Released!

Comparing Polymer and Angular from a developer’s perspective

Top JavaScript Confusions

Chaotic search and delayed results mess in front-end

Subtle differences between the JavaScript and Node JS event loops (Part 2)

Important JavaScript Concepts Every Developer MUST Know

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajak Cyer

Ajak Cyer

Software Engineering Student at Flatiron NYC. Learning day by day 💻

More from Medium

Install React Native modules with Expo

Send Direct SMS from React Native App using React Native Bridge

React Native Google Login

Flutter vs React Native — What to Choose in 2022?