How to Install React Native in Windows for Android Development

in #utopian-io7 years ago (edited)

header.png
source

Hi, in this tutorial I will show you how to install react native on a windows computer for android development.

What Will I Learn?

  • Install react native package with node.js
  • Create and run react native apps.

Requirements

  • Java (JRE and JDK).
  • Node.js
  • Python2
  • Android Studio

Difficulty

  • Basic

Get Started

Okay, to get started first we need to download and install certain application before we get straight to react native.

Install Java

Android requires both JRE (Java Runtime Environment) and JDK (Java Development Kit) to work. You can download java here https://java.com/en/download/. After you have download and install both JRE and JDK, you need to setup PATH for JDK. In my case I name it JAVA_HOME.
path.png

Install Android Studio

Okay, why we need Android Studio when we are going to use React Native to develop android apps? Because React Native require Android Studio gradle to sync and build the project. To install Android Studio you can go here https://developer.android.com/studio/index.html.

Install Python2

Why do we need python? Because react native build system was based on Python2. You can download it here https://www.python.org/downloads/. Make sure to download Python2 not Python3.

Install Node.js

We will need node.js package manager called npm to install react native package. Go ahead to https://nodejs.org/en/ to download. The node.js version I'm using in this tutorial is version 8.9.4 LTS. After you have installed node.js, you need to make sure it is installed properly. You can check it by opening the command prompt and type node -v. If it shows you the node.js version, then you are good to go.
Untitled.png

Install React Native

Now it's time to install React Native. We can install react native package by typing npm install -g react-native-cli from the command line.
Untitled1.png
Alright now you have successfully installed React Native on Windows. But let's try to create an app and run to see if it is working.

Create React Native Apps

To create react native apps, you can do it with typing react-native init HelloWorld. In my case I named it HelloWorld but you can name it whatever you like.
create-project.png

Okay now you have create your project, now we need to open the project from Android Studio. Open the android folder inside project directory, in my case it is D:/Project/React Native/HelloWorld/android.
directory.png
If Android Studio shows an error "Failed to sync with gradle", don't panic just click sync and let Android Studio handle everyting. Once sync is finished, it's time to create a virtual device. You can either use a real android device or create virtual device. In this tutorial I will just create a virtual device. You can create a virtual device using AVD Manager inside Android Studio. Then run the virtual device.
avd.png

We are almost done. Now open the command line and run react native by typing react-native start.
react-native-start.png

And now we will run the apps by typing react-native run-android inside the project directory. Once it finish building the project, it will show up directly in your virtual device.
run-app.png
result-when-run.png

Congratulations! You have just create your first Android apps with React Native.
If you want to dive deeper into react native, you can check out the documentation below.

Documentation

https://github.com/facebook/react-native



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @sametceylan, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

Your contribution cannot be approved yet. See the Utopian Rules. Please edit your contribution to reapply for approval.

  • It is attached wrong repository. You should replace with this repository.

You may edit your post here, as shown below:

You can contact us on Discord.
[utopian-moderator]

The repository has been updated. Thanks @sametceylan.

Hey @steven.tjg I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • This is your first accepted contribution here in Utopian. Welcome!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x