Mobile App Development
So, you want to delve into the world of building apps, but want to be able to build for multiple platforms at once. You’ve probably heard of React Native as a tool to do this, and you may have also seen the term Expo used in relation to React Native.
“Are they linked? Can I use one or the other? What is the actual difference between them? ” These were some thoughts that went through my head when getting started with React Native, and I hope this blog post clears this up for you.
After reading this blog post, you should have a basic understanding of React Native and Expo, after which I will share some resources that I felt helped me when getting started. 💡
The main difference between React and React Native is the platform you’re building for: React is solely for web development, whereas React Native is for iOS, Android, and Web. Running an application in a browser vs. a mobile phone are totally different, so the build process of a React Native app (as opposed to a React app) is also different.
Expo is a third-party technology, not created or maintained by the creators of React Native, which has been built to make the life of a React Native developer easier. It does a few things, but here are a couple of big features I found useful:
Setting up your development environment is much quicker when using Expo. It abstracts a lot of the build process of the app, so all you need to do is use the Expo tool to execute your code and build your app, and it should load up in a simulator with no issues.
When building an app without Expo, you’ll be responsible for following steps to alter code for any packages that require changes to native iOS / Android code. This can be time-consuming and take away from precious development time.
Expo has a library of common packages that you can plug into your application with a single command - read more about Expo specific packages here.
Expo Go is Expo’s own app to be able to load Expo built apps onto your device. This is useful for both local development, and also when sending preview builds to clients.
Local development: When you’re running your app locally using the expo-cli tool, a local server is started. This server can be accessed by the Expo Go app, pulling in all the latest changes to your app.
Deployed app: This works similarly to a local app, except the server being hit is Expo’s own servers rather than local. Read more about how Expo works here.
I only touched on some of the basics of React Native and Expo in the previous sections, but you can read some common FAQs about Expo here, written by Expo themselves.
Hopefully you now understand the different aspects of React Native and Expo, enough to get going with some development. Below is the path I recommend to get yourself started with building some cross-platform applications using Expo 🎉:
These docs explain the core fundamentals of React Native, with some live code examples. There is even a section titled “React Fundamentals” if you don’t know React. (Side note: I’d recommend understanding React separately, but this section can give you a super basic overview of React if you need it).
If you don’t like written guides, I wouldn’t worry, as each section of the guide isn’t too long and as stated before, there are some live coding examples to keep you going.
Once you’ve understood the basics of React Native, you’re ready to setup your first project! To get started with Expo, you need to globally install the expo-cli tool. Run the following command in your terminal below:
### Install expo-cli # npm npm install -g expo-cli # yarn yarn global add expo-cli
Once you’ve done this, you can then create a new Expo project using the following command:
### Create a new Expo project # Initialise your new app expo init my-app # Navigate into the newly created project cd my-app # Start the Expo Development Server yarn start # or "npm start" or "expo start"
There’s two ways to run your app: on a simulator or on your own phone. The latter option can be achieved the quickest through using Expo (using Expo Go), whilst the first option requires some OS specific setup to run a simulator.
I personally like to run on a simulator, so I can test on a variety of devices. To get setup for this, click the tab labelled “React Native CLI Quickstart” in the guide linked above, and select your machine OS and the platform (iOS or Android) you want to setup.
Alternatively, if you just want to run your app on a physical device that you own, click the tab labelled “Expo CLI Quickstart”, and follow the steps under “Running your React Native application”.
These are some resources which I found useful when I was a React Native Engineer - some of them are purely documentation, whilst others are guides / courses:
We’ve covered a fair amount of content here, but hopefully you now have an understanding of React Native and Expo, with enough basic knowledge to go and give React Native a go yourself using Expo.
If you have any questions about any of the contents on this post, reach out to me on Twitter!