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