React Native: Introduction

ASHMI JOSEPH
2 min readMay 10, 2020

--

Let’s start with the basics.

First of all, we need to know what are Native Apps.

Native apps are applications that are written for a particular device platform. The two main OS platforms that are widely used are iOS(Apple) and Android(Google).

For example, developers use Objective-C or Swift for iOS applications and Java for Android Apps.

Over the years, developers have started to prefer React Native Framework compared to iOS and Android Development.

So, what is REACT NATIVE ? In a nutshell, React Native helps you build native mobile apps using React and JavaScript. It’s a great choice if you are already familiar with React.
Moreover, the UI elements(e.g. Buttons) get compiled into native code depending on the platform we are running.

There are a couple of different ways to set up React Native Apps.

  1. React Native CLI (if familiar with mobile development)
    Requires Xcode or Android Studio
  2. Expo CLI (if new to mobile development)
    It works like a wrapper around your code and provides a simple app development workflow.

Step 1 — Install expo-cli globally in your computer
npm install expo-cli — global

Step 2 — Create your Project
expo init projectName
cd projectName
expo start or npm start

For more detailed steps, you can refer to the following.

3. You can also run React Native in your browser using Expo Snack.
It is very easy to use and convenient, if you don’t wish to download anything.

Now let’s run through the file structure, once you have started your React Native Project.

File structure for React Native using Expo-CLI
  1. The expo and expo-shared folders are for expo configuration settings.
  2. The assets folder is used to keep the images in your project.
  3. The node_modules folder contains all the dependencies and packages we need for our project.
  4. App.js file kick-starts our project and app.json contains information about our project e.g. Name, version

That’s all for the basics.

P.S Please click the clap icon to show your support. Happy Coding.

--

--