2 Ways to Getting Started With The Current React Native Technology – React Native is all about the way we can start making React Native app. Like any other JavaScript framework here we also need nodejs to start working with React Native. Getting Started With React Native
Before dive right into React Native if you want to minimize confusion, then you should spend a bit of time understanding the basics of a React application.
There’s some terminology you would like to understand. React Native is an extension of React. It’s just a special client target that’s using React and its principles to make 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 the primary steps required to start working with React Native.
Install nodejs and npm
First of all, you would like to install the node js and npm which is a node package manager. to install the node and npm on your machine. you’ll follow this Guide to install npm and node js.
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 a method to start out with. Before this post on March 13, 2017 everybody was using an equivalent. you’ll need Node, React Native CLI (Command Line Interface), JDK, Android Studio, Xcode and every one the other dependencies that you simply need while making your native app. If you’re a native app developer with experience in both of the app development environment then you’ll be able to start with this but if you’ve got experience in any one of them then it’ll be tough for you to set up the development environment for the opposite one. So my suggestion is to begin within a different way that’s create-react-native-app.
1.1. Install The React Native CLI
So lets get 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 an Android development environment which will show you the installation of all the things you need. You will need the following things if you have an android studio installed already.
- JDK (Java Development Kit)
- Android Studio.
- SDK.
- Android Virtual Device.
1.3. Creating First Project With react-native init
react-native init my-project
cd my-project
react-native run-android
1.4. Modifying Your App
Now that you have successfully run the app, let’s modify it.
- Open
App.jsin your text editor of choice and edit some lines. - Press the
Rkey twice or selectReloadfrom the Developer Menu (Ctrl + M) to see your changes!
Congratulation
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 method to start out building a new React Native application. It allows you to start out a project without installing or configuring any tools to create native code – no Xcode or Android Studio installation required, and you’ll develop for your iOS device using Linux or Windows. you simply have to be compelled to install node and npm to begin with. It’s heavily inspired by the design of Create React App and is that 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 cd my-project npm start
This will start the React Native packager and print a QR code.
2.2. Run your React Native application
Open it in the Expo app to load your JavaScript.
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.
Congratulation
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 doubts about the topic you can comment below or contact us Appfinz Technologies.
