Getting started with React Native

Hello and welcome again.
Today, I would be talking about React Native.
There is a probability that some of you might have worked with this guy and some do not even know what React Native is. Keep your mind at rest. It is something you can work with perfectly.

React Native is simply a JavaScript framework for building native mobile apps at once. Imagine you were to develop an android app and an IOS app for a client. You would probably be someone who knows JAVA and Swift or maybe one out of the two. This means that you might have to outsource or get someone to help you with the language you are probably not familiar with. When I say native, I mean Native.

React Native helps you to build apps that no one would ever tell you that you did not use a custom native language such as JAVA or Swift or Objective C. React Native gives you that extra feel. There are tons and tons of benefits of using React native.

• React native is an open source framework
• React Native runs on JavaScript. This means that even your web developer who writes JavaScript for you can become a mobile developer in one night without having to go learn a new language. Isn’t that just awesome? To get started with React Native, all you need is a basic understanding of JavaScript ES6.

To be honest, installing some features or tools to use might be tasking and annoying. You begin to wonder why we cannot just make use of a next-to-next GUI kind of installation and why sometimes we have to use command line and the likes. I also have that thought. To get started with React Native, you might not necessarily have to go through some rigorous steps to get your workspace running. This article is targeted towards the basic or newbie installation of getting started with React Native.

Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required.

STEP 1: Install Node.

Lucky for you, Node has a GUI installation so you do not have to do to your command line to have to start writing some lines that you might not probably understand or seems a little bit confusing. You can get the installer package from nodejs.org/en/download/

A download file for both Windows and Mac are made available there.

STEP 2: Install the Create React Native App

At this point, you would need to use the command line. Do not be scared. You are only writing one single line.
Open your command prompt or terminal and type in

npm install -g create-react-native-app
npm stands for Node package manager. 
-g stands for global. 

This is how your terminal should look like. Press enter once you type that in.
Once that is done, type in

create-react-native-app myFirstProject

Press enter once you type that in. This would take a while for it to get completed.
NOTE: myFirstProject can be any name you wish to give your project or Application.
Once this is complete, you are set to begin your deployment.

Do a change of directory to the location where you installed the React Native App. From the snippet above, my folder would be inside Peter. So, all you need to do is make your way to the folder holding all your application files. This can be done using the change directory command as shown below.

Type in cd myFirstProject and press enter.

Type npm start and press Enter.

This will start a development server for you, and print a QR code in your terminal.

STEP 3: Running Your Application.

Go to your app store from an Apple enabled device or the Google play store from an Android device.

Search for Expo. Download and install.

Make sure your phone is on the same network with your computer.

Open the Application and Select to scan code.

In your command prompt or terminal, your code would have displayed when you wrote npm start. Use your phone to scan the QR code.

Tadaaa.. You are now done with the setup for your React Applications.

To modify your application, locate the App.js file in your folder or directory and open it with your preferred text editor. Do some little changes to the Text section and save your document. Notice the change on your phone instantly.

In case you do not notice any change immediately, shake your phone to open up the developer menu.

When the Menu is opened, select Enable Hot Reloading.

Your mobile app should now immediately reload once any change has been made to your source codes.

NOTE: Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, you would have to learn how to install Xcode and set up your Android development environment. I would be giving the step by step approach on this in the next article.
Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios (macOS only).

Happy Coding.. See You soon…