How to Set-up Development Environment to get Started with React-Native and Expo?

How to Set-up Development Environment to get Started with React-Native and Expo?

Hi everyone! This is my very first article and I am going to show on how to set up development environment for react-native projects using expo.

What is React-Native and Expo? ->React-Native is the open source UI software framework developed by Facebook Inc. It is used to create cross-platform apps both for Android and iOS. The biggest advantages of using react-native is that we don't need to learn two different languages to build mobile applications for Android and iOS like Kotlin and Swift.

->Expo in other hand is just a framework built on top of react-native which helps beginners to quickly get started building react-native projects without setting up Android Studio and all.

What are the things that we need in order to setup development Environment? Actually there are only two things:

  1. Visual Studio Code You can use any code editor but in this article I will show about VS Code editor.
  2. Node
  3. Expo
  4. Expo-Client( For Android) or Expo-Client (For iOS)

Go and download vs code editor, node.js and sign up for expo by clicking on those link. Make sure those three things are ready. You need to download Expo-client in your mobile phones in order to run application on physical device.

STEP 1:

To check if you have installed the lastest version of node open up the command prompt and just add following command

node -v

This will show you up the version of node that you are using.

STEP 2:

Install Expo-Cli

npm i -g expo-cli

or

sudo npm i -g expo-cli

STEP 3

Open up the VS-Code Editor terminal and Initialize Your First App

expo init your-project-name

Choose the Blank template for the project.

Now you have initialized your first project and it's time to run the applications. There are few more steps on how you can run your applications on physical device.

STEP 1

Go to the VS Code terminal where your project is currently in and type the following command

npm start

This will open up the Expo Dev tools on your browser

expo dev.png

on the left side you can see the QR-Code.

Scan this QR-Code by opening up the Expo Go App from your mobile phones and you can see your projects running on your phone That's all you need to know to get started with react-native at the very first step.

Thank you so much for taking your time and reading this article. I will post the React-Native based content on everyday basis. I hope this has added some value. Please suggest me where I can improve. I will highly appreciate the comments from you.