If you’ve been keeping up with the Making Sense blog, you’ll know that we are huge fans of React Native. If you’re also a fan, here’s a beginner’s guide to creating your first application with this great technology. And in case you’re unfamiliar with this tech, here’s your chance to learn some of its helpful advantages that we’ve discovered here at Making Sense.

React Native, From the Beginning

When you want to create a React Native application you have two options:

  1. Create-react-native. This is a tool that makes it significantly easier to get started with a React Native project. It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent). With Create React Native App, there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.
  2. React-native-cli. This version is a lightweight package that should be installed globally (npm install -g react-native-cli) and allows you to create a React Native application based on the platform. Using the init command you can create a plain React Native app template with native iOS and Android projects that you can modify.

If you are new with React Native, your best approach will be to start using create-react-native and then use the ’detach’ feature provided by Expo. This allows you to convert a CRNA project into something similar to the plain project created by react-native init. The beauty of it is that you get access to the entire Expo SDK functionality.
Installing the Package

Let’s start installing the create-react-native package:
npm install -g create-react-native-app

Once the package is installed, you can start creating your project. Let’s called it “myFirstReactApp”:

create-react-native-app myFirstReactApp
cd myproject

The folder structure will contain an .expo folder with all the scripts related to it. In addition, it will contain the src folder, in which you will create all your frontend code.

Since we are using create-react-native, you will need to install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer.

Time to see the app! Let’s run the following commands:

  • npm start (you will see a QR code on your terminal)
  • Using the Expo app, scan the QR code from your terminal to open your project. This will open your app in your phone.
  • If you want to try the “live reload” feature, you have to shake your phone. Then you will see the Expo Settings page. Tap the “Enable live reload” option.
  • Make some changes in the App.js file. The app should reload automatically in the device.

Debugging Your Code

What if you want to debug your JavaScript code while the app is running? That’s easy!

You can debug Expo apps using Chrome DevTools. Rather than running your app’s JavaScript on your phone, it will instead run it inside a web worker in Chrome. Open the app on your device, reveal the developer menu then tap on Debug JS Remotely. This should
open up a Chrome tab with the URL http://localhost:19001/debugger-ui.

From there, you can set breakpoints and interact through the JavaScript console. Shake the device to stop Chrome debugging when you’re done.

More Useful Commands

There are several other useful commands provided by create-react-native:

  • npm test
    Runs the jest test runner on your tests
  • npm run ios
    Like npm start, but also attempts to open your app in the iOS Simulator if you’re on a Mac and have it installed
  • npm run android
    Like npm start, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see React Native docs for detailed setup)
  • npm run eject
    This will start the process of “ejecting” from Create React Native App’s build scripts. You’ll be asked a couple of questions about how you’d like to build your project

To run the iOS app:

  • $ cd AwesomeProject
  • Open ios/AwesomeProject.xcodeproj and hit run in Xcode
  • Open index.ios.js in your text editor of choice and edit some lines
  • Hit ⌘-R in your iOS simulator to reload the app and see your change!

To run the Android app:

  • $ cd AwesomeProject
  • $ react-native run-android
  • Open index.android.js in your text editor of choice and edit some lines
  • Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!

Finally…

Well, that about covers the basics of using React Native to create an application. Hopefully, this will provide you with enough to get you started on your first project. If you’ve been inspired by this post, we’d love to know what you think. And if you’re feeling uncertain about your own project, contact us and I will be happy to help you. Good luck!