This is a short, basic guide on how to get you started with your React Native app using Expo. Don't know anything about Expo or React Native, but still insist on using it? Perfect, this is for you. I'll explain what Expo actually is and why you want to use it, the whats and whys of installation, and then the practical bits of how to install and create an app. This is your absolute first baby step in this process.
I've lately noticed that every time I go back to visit my old bootcamp, I'm inevitably directed to a student with questions about React Native. They're starting their final project soon, you see, and they're thinking of taking the plunge with React Native. There's always someone with questions and not a lot of people around with answers, until someone like me comes along and suddenly I'm the old crone who's been there, done that and the local expert to boot, because I went through the gauntlet of creating a React Native app for my own final project. I'm not an expert, by the way, but I always try to help where I can. Considering I can't always be lurking around campus, I thought I'd be most useful by writing some blogs about React Native. This is for those students who need a little help getting started, by a former student who was very much overwhelmed by it all the first time around.
What is Expo?
Expo is a framework and a platform that helps you develop React Native apps. A bit like Rails for Ruby and create-react-app for React. It helps you build the basic scaffolding of your app without you needing to understand everything beforehand; great for students with a deadline.
Expo continues React Native's pursuit in creating universal apps that work with both Android, iOS, as well as web apps. All from the same code. That means built-in tools Expo uses, like icons, are also made to be universal.
Expo helps you develop and run your app, whether as a snack, with a simulator or through their client app. Expo comes with a lot of tools at your disposal.
I'll be skipping over all of these tools to focus on what a student with a time crunch would need and only tell you that they're there, in case your specific project needs them.
The good thing about Expo is that it's easy to use and great for those who want a quick introduction to React Native and mobile apps in general. Expo's documentation is excellent, and they guide you most of the way through the setup and creation of an app with Expo. And because Expo is big on creating apps for any device, you can test a simulation of your app through Xcode, Android Emulator or web at any time in the development process and develop from any environment as well. You don't have to do much with Expo.
On the other hand, because Expo does so much for you, you don't always have a concrete understanding of what's going on 'under the hood.' Which might be fine but could be a big crutch if you ever need to develop without it. Heavy libraries and a complicated Expo-specific deployment process might also make Expo not worth it in certain circumstances. My worst complaints were the vague error messages and the buggy live reloading which could force you to rebundle and relaunch your app every time an error caused it to crash. Definitely have a debugging tool at your disposal.
Using Expo
The basic flow of development would include running your app with live reloading, either through the Expo client app, with the Android emulator, iOS simulator, or with your web browser. And you can switch between any of these!
Installation
Before you get started make sure you have Node.js installed, which you'll be using to install the Expo CLI. Expo will be creating your app for you, so there is no react-native command to start you with.
npm install -g expo-cli
And that's it!
Creating Your App
To create a new project, run expo init and the name of your project:
expo init ProjectName
Managed or Bare?
This will prompt you to choose a template. There are a few different options, first between a "Managed Workflow" and a "Bare Workflow". The managed workflow is what helps build out the skeleton of your app without you having to do much work. Unless you're an experienced React Native developer, that's what you'll probably want to use.
Blank or Tabs?
Then you'll need to choose between a 'blank' template or a 'tabs' template. The difference is about as you'd expect; one has tabs and one doesn't. But there's more. What it really means is that the tabbed template comes with React Navigation already installed and sets you up with different screens and a tab-style navigation. You may or may not want this option depending on your project. React Native Navigation and screens are, in my opinion, the trickiest difference between React and React Native.
If you know you'll be using different screens in your app, choosing the tabbed template would give you the chance to have the overall setup already done (like below), and all you'd have to do is figure out how to work upon what's already there. But if you know you aren't bothering with screens and React Native Navigation, I'd consider the blank template as shown above, as it would otherwise add a lot of unnecessary complexity to your app.
Some things to note before starting:
First, know that there are different tags used in React Native than what you would use in React. The div tag doesn't exist in React Native but is replaced with a View tag. There's a ScrollView which you would want to use if you want your user to be able to interact with the screen with a scroll. Thankfully, the Button tag does what you would think! But for anything else that you want your user to touch and trigger something that isn't a button, you'll want to use the TouchableOpacity or the TouchableNativeFeedback tag.
You've taken your first baby step! Hopefully, you're comfortable so far and have a good idea of what's going on. From here on out will be the actual building of your mobile app. Good luck and have fun!
Resources:
Top comments (0)