In a nutshell, react-native is an efficient way to develop apps with optimum performance and multiple platforms compatibility. This is the very first post about React Native for Android. We will continue learning it in upcoming posts. So lets start by setting up the development environment.
Environment Setup for React Native
To set up the work environment for react-native, we need to make a bunch of installations as follows:
#1 Installing Java Development Kit (JDK)
- If you already have JDK installed on your system, you may skip this step.
- JDK is required to use android studio on your system i.e. to make your system Java literate.
- To install it, Download JDK setup and thereafter install it once it is downloaded.
#2 Installing NodeJS
- To install Node.js go to this link and download the setup of NodeJS. Once downloaded, do install it.
- After installing confirm the installation. To do so open command prompt and type the command node -v and it shall show you version of NodeJS installed on your system as shown in the image below:-
#3 Installing Python
- To install python, download the setup from here Python. And simply install it as you install every other app.
#4 Installing Android Studio
- Assuming that you have Android Studio already setup on your system, let’s carry on with the further remaining installations.
#5 Installing react-native CLI
This involves the installation of react-native command line tools. These are required for the creation of a new project and then to debug the project. To do so,
- Open command prompt and type npm install -g react-native-cli
- On successful installation, you would see a screen as shown below:-
That’s it. All the installations required have been performed.
Building the First Reactive Native Project
To create a new project in react-native, follow the steps given below
- Open command prompt and change the directory to where you want to store your project.
- Type the command react-native init yourprojectname.
It’s gonna take a while to finish creating this project.
- On successful completion of this process, you shall see the screen as shown below:-
- Also, you’ll find a folder created by the name of your project which contains the project files having the file structure as shown below
- In the above image, you’ll notice two files by the names index.android.js and index.ios.js. These are files where most of the engineering is done to build the app.
- Assuming that you already have an emulator set up to test the apps, let’s move on to running our first react-native project.
- If not, then go and get it done. There’s plenty of tutorials available for the same.
Running your First React Native for Android Project
- Now that you have your project ready for the first run, open command prompt and navigate into the folder of your project in command prompt.
- To run the project in android, type the command react-native run-android
- To run the project in ios, type the command react-native run-ios assumming that you have a mac and an iphone simulator set up (But if you don’t have a MAC don’t worry we will be doing the android stuffs mainly).
- Once the project is successfully compiled, you shall see a screen as shown below
- Hurrah! You have successfully set up the work environment for react native.
So thats it for the beginning of React Native for Android. In the next section, we shall learn about the IDE for react-native, the project structure of react-native projects, layout elements in react-native and rendering them. So stay tuned!
Hope you successfully have set up the environment for react-native. If not, feel free to share the difficulties you faced in this course.