Day 1: Getting Started with Mobile App Development Using React Native

Introduction

Welcome to Day 1 of your journey into mobile app development! Over the next 10 days, you’ll learn how to build a mobile application from scratch using React Native. Today, we’ll focus on setting up the necessary tools and frameworks to start developing your first app.

In this series, we’ll incrementally build up your app by focusing on UI components, user interaction, state management, and external data handling over the next several days.

By the end of this tutorial, you’ll have a “Hello World” app running on your mobile device. Let’s get started!

What You Will Learn Today:

1. Installing Node.js and npm (Node Package Manager)
2. Installing and setting up Expo CLI
3. Creating your first React Native project
4. Running your project on a mobile device using the Expo Go app

Step 1: Install Node.js and npm

React Native relies on Node.js and npm to manage dependencies and build processes. Node.js is a JavaScript runtime, and npm is its package manager. Let’s start by installing Node.js:

Installing Node.js:

1. Go to the Node.js website.
2. Download the LTS version (recommended for most users).
3. Run the installer and follow the instructions to complete the installation.

To check if Node.js is installed, open a terminal (or command prompt) and type the following commands:

node -v
npm -v

You should see the version numbers of Node.js and npm if the installation was successful.

Step 2: Install Expo CLI

React Native can be developed with the React Native CLI or the Expo framework. For simplicity and ease of use, we will use Expo, which allows you to develop, build, and run your apps easily.

Installing Expo CLI:

Expo CLI is a command-line tool that helps you create, run, and build React Native apps with Expo.

1. Open your terminal (command prompt on Windows).
2. Run the following command to install Expo CLI globally:
   bash npm install -g expo-cli

To verify the installation, type:

expo --version

If the version number appears, Expo is installed and ready to use.

Step 3: Create Your First React Native Project

Now that you have Node.js and Expo CLI installed, let’s create your first React Native project. This project will serve as the foundation for all the upcoming tutorials.

Creating a New React Native Project:

1. Open your terminal (or command prompt).
2. Run the following command to create a new React Native project:
   bash expo init MyFirstApp
3. You will be prompted to choose a template. Select the blank template for now. The setup process will begin, and Expo will install all the necessary files and dependencies.
4. After the installation, navigate to your project directory:
   bash cd MyFirstApp

Step 4: Run Your App on a Mobile Device

Using Expo Go to Run the App:

One of the most powerful features of Expo is the ability to instantly preview your app on your mobile device. To do this, we will use the Expo Go app.

1. Install Expo Go on your mobile device:

• For Android, install Expo Go from the Play Store.
• For iOS, install Expo Go from the App Store.

1. In your terminal, start the Expo development server by running: npm start This will launch the Expo development tool in your browser, showing a QR code.
2. Scan the QR code using the Expo Go app on your mobile device. The app will instantly load on your phone!

Step 5: Understanding the Basic Structure of Your Project

At this point, your app should be running, displaying a simple “Hello World” screen. Let’s take a look at the files and folders in the project directory to understand what’s going on.

• App.js: This is the main file of your React Native project. Everything you want to render on the screen is controlled here. Here’s the default code you’ll see in App.js:

  import { StatusBar } from 'expo-status-bar';
  import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';

  export default function App() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

• package.json: This file contains the metadata about your project and its dependencies. For example, it lists the packages needed for the project to work, such as react-native, expo, and more.
• node_modules: This directory contains all the external libraries and dependencies that your project relies on.

Step 6: Modify the App and See Changes in Real-Time

Let’s make a small change to the App.js file and see how it affects your app. Open App.js in your code editor (we recommend using VS Code for ease of use).

Edit App.js:

Replace the text inside the <Text> tag with something new, like this:

<Text>Hello World! This is my first React Native app!</Text>

When you save the file, you’ll notice that the app on your mobile device instantly updates. This is one of the great benefits of using Expo—live reloading allows you to see changes without having to rebuild or restart the app.

Step 7: Optional – Running Your App on an Emulator

If you prefer, you can also run your app on an Android or iOS emulator. Here’s how:

Running on Android Emulator:

1. Install Android Studio and set up the Android emulator by following this guide.
2. Once the emulator is running, you can start your app by typing:
   bash npm run android

Running on iOS Simulator:

1. If you are using a Mac, you can run your app on the iOS simulator. Install Xcode and set up the iOS simulator.
2. Then start your app by running:
   bash npm run ios

Conclusion

Congratulations! By the end of Day 1, you have successfully set up your development environment, created your first React Native project, and run it on your mobile device using Expo. Over the next nine days, we will continue to build on this foundation, adding features and functionality step by step.

In the next tutorial (Day 2), we’ll dive deeper into the React Native component structure and start customizing the user interface. Stay tuned!

Recap: What You Learned Today

• Installed Node.js and npm
• Installed Expo CLI
• Created a new React Native project
• Ran the project on a mobile device using Expo Go
• Made real-time updates to the app using live reloading

This concludes the Day 1 tutorial. Get ready for Day 2, where we’ll start building the core components of your app! In Day 2, we will start exploring the structure of a React Native app, diving into creating components, handling user input, and laying out your app using Flexbox for an organized UI. By the end of tomorrow’s lesson, you’ll have a much more interactive app to showcase!