Before dive right into React Native if you want to minimize confusion, then you should spend a bit of time to understand the basics of a React application.
There’s some terminology you need to know. React Native is an extension of React. It’s just a different client target that’s using React and its principles to create the application.
Learning a little bit of React is a good use of time. Looking through the homepage alone will help you quite a bit. I also suggest you look through the official tutorial to have a better understanding. But if you don’t want to do that or you did it already then let’s get started.
Here we will suggest you the primary steps required to start working with React Native.
Install nodejs and npm
First of all, you need to install the nodejs and npm which is a node package manager. To install the node and npm on your machine. You can follow this Guide to install npm and nodejs.
Building a React Native app with two way
There are two ways to start with react native and we will tell you the difference between them.
1. react-native init <Your Project Name>
It is the one way to start with. Before this post on March 13, 2017 everybody was using the same. You will need Node, React Native CLI (Command Line Interface), JDK, Android Studio, Xcode and all the other dependencies that you need while making your native app. If you are a native app developer with the experience in both of the app development environment then you can start with this but if you have experience in any one of them then it will be tough for you to set up the development environment for the other one. So my suggestion is to start with another way that is create-react-native-app.
1.1. Install The React Native CLI
To start with this you need to install the react-native-cli. Assuming that you have Node installed, you can use npm to install the react native CLI. Run the following command in a Command Prompt or shell:
npm install -g react-native-cli
1.2. Install Android Studio and Configure the ANDROID_HOME Environment Variable
After the installation of react-native-cli, we have to set up the environment for one of the platforms (Android/IOS).
Download and install Android Studio from the official website. To install the android studio and to configure the ANDROID_HOME environment variable for the react you can follow the post on the installation of the android studio and setting up Android development environment which will show you the installation of all the things you need. You will need the following things if you have android studio installed already.
- JDK (Java Development Kit)
- Android Studio.
- Android Virtual Device.
1.3. Creating First Project With react-native init
react-native init my-project
1.4. Modifying Your App
Now that you have successfully run the app, let’s modify it.
App.jsin your text editor of choice and edit some lines.
- Press the
Rkey twice or select
Reloadfrom the Developer Menu (
Ctrl + M) to see your changes!
Hurray!! You’ve successfully run and modified your first React Native app using react-native init.
2. Expo CLI (Formally create-react-native-app)
Expo CLI is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code – no Xcode or Android Studio installation required, and you can develop for your iOS device using Linux or Windows. You just need to install node and npm to start with. It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).
2.1. Creating the First Project with Expo CLI
Assuming that you have Node installed, you can use npm to install the Expo CLI utility:
npm install -g expo-cli
expo init AwesomeProject
This will start the React Native packager and print a QR code.
2.2. Run your React Native application
Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link.
2.3. Modifying your app
Now that you have successfully run the app, let’s modify it. Open
App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.
You’ve successfully run and modified your first React Native app using Expo CLI.
Running your app on a simulator or virtual device
Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.
Once you’ve set these up, you can launch your app on an Android Virtual Device by running
npm run android, or on the iOS Simulator by running
npm run ios (macOS only).
To Include all the custom native module
Because you don’t build any native code when using Create React Native App to create a project, it’s not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
If you want to build and deploy your app yourself, you’ll need to eject from CRNA (create-react-native-app) and use Xcode and Android Studio. This is usually as simple as running
npm run ejectin your project, which will walk you through the process. Make sure to install react-native-cli using
npm install -g react-native-cli.
That was the 2 ways to getting started with the current technology – React Native
If you have any doubt about the topic you can comment below or contact us here.
Hope you liked it 🙂