React Native for Beginners: Getting Started with React Native; Creating your First Project in 10 minutes.

I am not big on definitions when it comes to programming. But I would briefly define what React Native is about. React Native is a programming language used in the development of Hybrid Mobile Applications (Hybrid apps are developed using one codebase, i.e creating one code that can be compiled for Android and iOS platforms).

These days, a large number of businesses would prefer to build an app that will be available on both Android and iOS platforms. However, building mobile apps for individual platforms would require more time and resources. Hybrid app development has bridged the gap, helping businesses provide more solutions at a lesser cost while programmers do not have to burn out in the process.

Away from definitions, the major point of this article is to expose you to how to build a React Native App in the simplest yet more efficient way.

First, you must have covered the basics in the following technologies to build your first Mobile application in React Native:

1. HTML.
2. CSS.
3. JavaScript.
4. React JS.

If you haven’t learned the above technologies, you might find it difficult to understand some basic concepts in React Native.

Moving on, you will need the following software installed on your laptop:

1. Vs Code — this is a text editor used in writing, compiling, and debugging codes. To install Vs code to your laptop, click here.
2. Node js — This is a Javascript runtime used to build dynamic web applications. For this project, we will be using the Node.js Command prompt to run some command lines for installations and compilation. To Install Node js to your laptop check here.
3. Android Studio: We are going to need the Android Studio for emulator purposes. To install and configure Android Studio on your laptop, click here.
4. JDK — Java development kit of version 18. You can download it from here.

Let’s Begin

From your search bar, search for Node.js Command Prompt. In the directory, you can navigate to another folder you want to create your first app.

cd “directory of folder”

Or create your first app on your hard drive ( this is however not advisable).

Next, we are going to create our first app by entering our first command line into your Node.js Command prompt.

npx react-native init nameOfApp

E.g npx react-native init walletApp

npx react-native init walletApp

Node.js will go through a series of installations and install your first app on your laptop.

After the installation (as seen above), we will load our first app to see what it would look like. Don’t forget to change the directory to the location of the app.

Next, we would input the command line to launch the application.

npx react-native run-android

This part should take a few minutes as the first time the App will be launched. And then your emulator should load to your screen as seen in the image below

Next, let’s make changes to what we can see on the screen. To do that, we need to open the folder from our VS code. When opened, navigate to the App.js file. Delete every piece of code you can see on the code and replace it with the following below:

When done, you can save by pressing the keys on the Keyboard “Ctrl + s”. This will automatically update the emulator to look like the image below:

And there we go, we have our first-ever app in React Native. Is this all? Definitely not! In the coming days, I will be releasing articles in bits for a Wallet.

You want to click on the follow button or follow me on Instagram @thetechbee for this one. Or follow me right here.

If you would also like to learn more about React Native, you can click to go here to get my full course (with backend development) on React Native Mobile App Development.

Cheers!