Tuesday, 18 December 2018

Create Hello World Application using React Native

In this Article, we will learn How to create the first application using React Native. We can create native mobile apps using JavaScript and React. It uses React in order to create rich mobile UI interfaces. As Stated on the React Native official Website,

“With React Native, you don’t build a “mobile web app”, an “HTML 5 app” or a “Hybrid App”. You build a real mobile app that’s indistinguishable from the app developed using Java or Objective-C. Native use the same fundamental blocks as in IOS and Android.”


Now Question comes in your mind, who’s using React Native? As per the Official website, thousands of apps are using React Native, from established fortune 500 to hot new startups. Some of the popular apps which are using react native are Facebook, Instagram, Bloomberg, Pinterest, Uber, Skype etc.
Before getting started, it’s recommended that you must have the basic knowledge of the JavaScript and React as well so that you can understand the React Native apps.

Setting Up the Environment:
In order to start, we need the below application installed in the system
  • Node JS and NPM
  • Python and Java SE Development Kit (JDK)
  • Android SDK, Android Virtual Devices
  • Visual Studio Code (Editor)

You can find more details about the Environment setup in the React Native official website. (https://facebook.github.io/react-native/docs/getting-started)
Now, open the command prompt, and run the below command.
It will download the packages required in order to create a react native app. Type create-react-native-app <name-of-the-app> and Hit Enter.
During Installation, npm will ask for one additional package i.e. expo which loads and runs CRNA project written in pure JavaScript without compiling any native code. It is free and open source toolchain built around react native to help you build iOS and Android Projects using JavaScript and React. In case, npm ask for installation of expo, select “Y” i.e. Yes. Then it will ask to choose a Template. Select the Blank template, as we are trying to keep it as simple as possible.
It will take a few minutes in order to Extract project files and installing the dependencies. 
Once the project is created successfully, change the directory to the app name provided by you during application creation (in my case it is HelloWorld)
Run npm start command in order to start the application.
It will start the Expo and shows a QR Code which can be scanned using Expo in Android Devices and starts a metro bundler as a server on localhost.
You can directly run the application on a physical device with the Expo App. Open Play Store in your Android Device.
After installing the Expo app, you need to Scan the QR Code.
Or you can run it on the Android Virtual Machines. Open the AVD Manager in your system, Create an Android Machine by clicking on the Create button. It will ask you few details to provide Device Name, Select Image, Memory Size and other option for the virtual machine. Once Everything is done, click on Start, it will take some time and starts the Virtual Machine.

In Metro Bundler, click on Run on Android device/emulator and application will be loaded in the Android Virtual Device.
An application will be loaded or Started in the Android Virtual Device.
Let’s open the application in the Visual Studio Code and click on App.js file in order to edit.
To show a Simple Message i.e. “Hello World”, we need to change the text between the Text tags. Change the Text to the Hello World and again run the application, you will see the Hello World on the application.
On scanning the QR Code with the Android Device, you will see the desired output as well.
Hope this will help you.
Thanks.

5 comments:

  1. This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.

    website builder for reseller

    ReplyDelete
  2. Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.

    private label website builder

    ReplyDelete
  3. Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.

    white label website builder

    ReplyDelete
  4. You have shared a nice article here about the android app development. Your article is very informative and useful for those who are interested to know more about the App development. Thank you for sharing this article here. mobile app developers California

    ReplyDelete
  5. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.website development agency

    ReplyDelete

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Subscribe us on YouTube

Like us on Facebook

Follow us on Google+