Day 2: Setting up and Testing a React Native Environment

React Native

This is day two of my 30 days React Native journey. Below are the things I will cover for day two (2):

• Setting up an environment
• Creating a react native app
• Running the app
• A reference to the Github repository.

Abbreviations:

NPM: Node Package Manager

cd: Change directory

CLI: Command Line Interface

IDE: Integrated Development Environment

Setting up an Environment

Before one can create a react native applications, some tools need to be installed: Node.js / NPM, Expo CLI, Text Editor / IDE

Node.js / NPM

Developing applications using react native requires that you set up a development environment. First of all one will need to install Node.js. Node.js is a JavaScript runtime environment built on Chrome’s V8 JavaScript engine.

Node comes along with a package manager called NPM. NPM allows one to install packages or libraries when building an application. One can find the installation guide on Node js official website.

Expo CLI

The easiest way to get started with react native, especially for beginners who are new to mobile development, is to install the Expo CLI. This is because Expo CLI provides one with a simpler workflow by abstracting most of the native code. This brings less flexibility because one is limited to what Expo exposes them to.

Another alternative is to use React Native CLI which requires Xcode or Android Studio to get started. This approach is mostly for people who are already familiar with mobile development.

Expo CLI is a command-line interface that allows one to start writing react-native apps within minutes with just a simple line of command. Expo CLI comes with a set of tools and relevant features to build your react-native apps. All you will need is to have Node.js installed (which I have already done) and a phone or an emulator.

To install Expo CLI, run the command npm install -g expo-cli in your terminal. This is done once since it installs Expo CLI globally (can be accessed anywhere) on your machine

Text Editor / IDE:

Lastly, you should have a text editor or IDE installed. If you haven’t already then I will recommend vscode to you. There are other alternatives as well such as Android Studio, Atom, etc

Creating a new React Native app

1. Run the command expo init react-native30 in your terminal. Note, react-native30 is the name of my application

Initializing expo

2. Select blank by pressing on the enter key.

3. Type a display name for your application. Mine will be react-native30.

4. Respond with yes to install dependencies

5. cd react-native30. Done

Running the application

I am going to run the newly created react-native application on my physical device using the Expo client. Expo client is a free mobile application that runs on both Android and iOS platforms.

In case you don’t have the Expo client, you can head over to the play store or app store to download it by searching for Expo client.

Now run the command expo start to start the application. This will open the Expo DevTools both in your terminal and browser. To have the application run on our mobile phones, we need to open the Expo client app on our mobile device and scan the QR code.

Expo dev tool

Github Repository link

You can find the source code to this project on Github

Day 3: React Native folder structure