Getting started with React Native and Expo XDE
As the popularity of Javascript continues to explode and the world trends further to mobile React Native has become an increasingly popular tool for developers. React Native is a framework that lets you write Javascript code, which will then be compiled into native Swift for iOS apps or Java for Android Apps. It’s built with the same principles of React in mind, meaning that your application UI is built from easy to plug and play component modules. If you’re at all familiar with Javascript and React, then you’re very much prepared to hit the ground running with React Native.
Building your first React Native App
When building my first React Native app I did what pretty much every developer working on a new technology does… I hit the docs. Facebook (the creator of React Native) will link you to an npm module called “create-react-native-app” which they state as “the easiest way to start building a new React Native application.” This node module is easy, but it provides only the bare bones. I prefer to use Expo’s XDE, where you get two project templates to choose between as well as an intuitive GUI and easy testing simulator environment.
The Expo SDK “is a native-and-JS library which provides access to the device’s system functionality (things like the camera, contacts, local storage, and other hardware).” This all means the team has done a lot of work to provide you easy ways to use components in your app which would normally require native Swift or Java code and difficult to manage ejecting and importing of those components into your React Native project.
Let’s get building! You’ll need a few things installed to get up and running.
First: If you’re developing an iOS app you’ll need Xcode. Install Xcode here: https://developer.apple.com/xcode/
Second: You’ll need Expo XDE. This app will provide a nice GUI for creating boilerplate React Native code as well as managing, testing, and deploying your Expo projects. Install Expo XDE here: https://docs.expo.io/versions/v29.0.0/introduction/installation.html
Third: Install the Expo app on your mobile device. You’ll need this app to connect to Expo XDE and test your apps. You can find the link to this installation on the Expo XDE installation guide linked above.
Fourth: Download the latest version of Node.js. Install Node.js here: https://nodejs.org/en/
Fifth*: The Expo installation guide recommends you install watchman to avoid potential issues on macOS machines. Watchman is a great tool which watches your files for changes and can be configured to trigger actions such as rebundling of webpack. If you aren’t already using watchman I’d highly recommend it to speed up the iterative process in your programming. Install watchman here: https://facebook.github.io/watchman/docs/install.html
Now that everything’s installed!
Creating your first project:
Open up Expo XDE and create an account if you haven’t already. This account will provide you easy access to your projects throughout devices.
Then you should land on the homepage which should look very similar to mine but without any projects.
You have two options to start a new project. You can click on the “project” icon, then “new project” or simply the “Create New Project” box.
The following prompt allows you to select between two templates. For the purposes of this tutorial I’ve selected the second template which provides some extra boilerplate including several prebuilt screens. Choose a project name, and select a directory to save your project.
Your project will download, extract, and then bundle in Expo XDE. Congratulations you’ve created a React Native app using Expo!
You can run your app in the iOS simulator by clicking Device, then iOS simulator. This will open XCode’s iPhone simulator.