Setup development environment for React Native
Hi guys! In this article I will talk about how to set up your development environment on Windows to use React Native and Android Studio.
These are the tools we need to download :
- Node JS
- JDK
- Android studio
- React native CLI
- YARN Package Manager
- Visual studio code
Node JS
How to Install Node JS
Go to the url : https://nodejs.org/en/download/ and download the setup according with your system configuration.
Install the nodeJs and Open the Command Prompt : check the version
JDK
How to Install JDK and set the path
Go to the url : https://www.oracle.com/in/java/technologies/javase-downloads.html and download the JDK tool.
Install the JDK setup and Now go to the path
“C:\Program Files\Java\jdk1.8.0_241\bin” — Copied
Then go to My Computer(Right click) — Properties — Advanced System Settings — Select the tab Advanced — Search the path variable in System variables — Click on Edit and paste the JDK path
Android Studio
How to Install Android studio and Set the Path
Go to the url : https://developer.android.com/studio and download the Android studio.
Install the Android studio. After successfully installed, pop-up will be show and choose the option “do not import settings”
After that click on the SDK manager and download the marshmallow SDK platforms, GPU Debugging tools, Android Auto API Simulators, Android Auto Desktop Head Unit emulator, Google play services, Google USB Driver, Google Web driver, Inside Support Repository — Android support repository and google repository. These are required components for using react native.
Now, create an Avd by clicking on Create virtual device .
Set the Path of Android SDK, Emulator & Platform Tools folder
Copy the path of SDK , Copy the path of Platform tool and Copy the path of Emulator
“C:\Users\hp\AppData\Local\Android\Sdk”
“C:\Users\hp\AppData\Local\Android\Sdk\platform-tools”
“C:\Users\hp\AppData\Local\Android\Sdk\emulator”
Right click on the My Computer — Properties — Advanced system settings — Select Tab Advanced — Select the Path from the System Variable — Click on Edit — Paste all the path.
Creating ANDROID_HOME variable :-
“C:\Users\hp\AppData\Local\Android\Sdk” and Right click on the My Computer — Properties — Advanced system settings — Select Tab Advanced — create new variable inside User Variables and give the variable name “ANDROID_HOME” and value is paste the path of sdk.
Installing React Native CLI & Set the Path
Click on window — Search cmd — Run as administrator
nmp install -g react-native-cli
Copy the path of nmp
“C:\Users\hp\AppData\Roaming\npm” and Right click on the My Computer — Properties — Advanced system settings — Select Tab Advanced — Select the Path from the System Variable — Click on Edit — Paste the path.
Now, open the cmd and check the react native successfully installed or not.
Installing YARN Package Manager
Open cmd and execute the command :
npm install -g yarn
Installing Visual Studio code & Installing React Native Tools Plugin
Go to the url : https://code.visualstudio.com/download and download the visual code according to your system configuration.
Install the vs code by run as administrator and after successfully installed, open the visual studio code. Go to the Extensions — install the react native tools.
Vola! We are all done with installation. Now, how to create default react native project and run the app.
Go to terminal section and type command to create react native default app
react-native init AppName(TestApp) and it will take some time.
Now, click on file menu and Open the folder of your app.
After that, click on Terminal menu and execute the command “react-native run-android.
In your android emulator you can see the execution of the default app as -
That’s all folks, I hope you can enjoy your first React Native App. Let me know if you have any question or if these steps didn’t work for you.
Thanks for reading!
