Getting started with React 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.
  • 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.
  • Do a change of directory to the location where you installed the React Native App.
  • 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.

Getting to know React Native

@ThePracticalDev: Getting started with React Native
{ author: @taiwo_xyz }

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.

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.

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

At this point, you would need to use the command line. Do not be scared. You are only writing one single line.

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

Once that is done, type in

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.

and press Enter.

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

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).

Getting started with React Native