React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.
In below youtube video, I have covered this blog already so incase you do not want to read through you can watch it as well:
So let’s begin… in this blog, I will explain how to set up an environment for React Native Framework.
Many different kind of people use React Native: from advance iOS/android developers to React beginners as well.
To work with React Native, you should have good understanding of the Javascript fundamentals.
Set up Environment
There are two ways with which we can set up React Native framework on our local machine.
- React Native CLI
- Expo CLI
In this tutorial, I will show you how to set up React Native with expo-cli
. To install expo-cli
, you need to have node already installed. Till today, expo-cli
support node till version #13. So in case you have node > 13
, you may need to downgrade it. There is an NVM utility to manage multiple node version.
So now lets install expo-cli
assuming you have node version below 13. Open up Terminal and write command:
$ npm install -g expo-cli
The command will install the expo-cli
library on your local machine and then you are ready to build your first React Native project.
Set up 1st React Native Project
Once the installation of expo-cli completes, you can type below command:
$ expo init reactnativetraining
This command will ask you to select any one of the following templates
- blank – a minimal app as clean as an empty canvas
- blank (Typescript) – same as blank but with Typescript configuration
- minimal – bare and minimal, just the essentials to get you started
- minimal (Typescript) – same as minimal but with Typescript configuration
You should select according to you liking, here I am selecting blank with Typescript
as it will allow me to use typescript and it will also give me folder structure.
Once the project setup is done, please go to the project folder and use any one command listed below:
$ cd reactnativetraining $ npm run start // you can open ios, android or web from here... OR $ npm run ios // OR $ npm run android // OR $ nom run web
If you have run $ npm run web
It will compile the project and will fire up the webpage in your local browser on port 19006
Open up the project in your editor and look around to get familiarise. App.tsx
is the main file where you can change something in the <Text />
node and see the change reflect in the browser.
This is it… your React Native environment & project setup is done and ready to explore.