Getting Started with React Native Tutorial
Recently I’ve been playing around a lot with mobile app development. I’ve looked at a number of frameworks out there and tried some of them. Finally I settled on React Native and thought I’d put together a React Native tutorial series.
I have an upcoming project at work which requires both a web app and native mobile app, plus I’ve wanted to build a native mobile app for Tiebreak for a long time now – so this seems like a great opportunity to learn and blog through the process.
Enough waffle – let’s crack on…
What is React Native?
As I learn myself, I’ll be putting together a number of tutorials on here on how to do various things. There are a lot of resources out there but I’m already finding it a bit of a minefield, so if I document my findings it’ll serve as my own reference and hopefully help you guys out too!
Where do I start?
The first confusing this I came across was that there a number of different ways to start a project, and all generate slightly different project structures. Unfortunately what this means is that you’ll find articles and videos out there that have different project structures and in some cases different code.
It took me a while to get used to and realise to focus on the important parts of the example code I’m looking at rather than worrying about the fact my directory structure is different.
In this guide I’ll be concentrating on using Expo, which provides a set of tools for React Native that will help your development and build processes.
For starters, you’ll need Node 10+ on your system.
Next we’ll install the Expo CLI
npm install -g expo-cli
And finally, let’s start a new project so we can get coding
expo init NewApp
Previewing your app
At this stage you can preview the boilerplate app that Expo has installed. Do this by running the following command
Expo will start up and launch a browser window for you. In the opened screen you’ll see a number of options and a console. From here you can launch a simulator (you’ll need Xcode or Android Studio installed) or, if you download the Expo app on your smart device you can scan the QR code displayed to launch the app preview directly on your device.
Having this preview available through Expo is huge. As you code your project the preview will live reload so you can see your changes immediately. Coming from a web development background this functionality will be a massive help as I start coding.
Let’s get coding…
We’ve got the basics down, so now let’s get coding. Next time we’ll start going through the basics of coding our first app.
Want more React Native tutorial action?
This tutorial is the first in a series of React Native tutorials I’m putting together as I learn myself. If you’d like to follow along you can find the rest here.