Hello World Tutorial App Using React Native For Android/ios


Please install node.js if you haven’t already done. You can check if you have node already installed by using following command:

node -v
brew install node

Use brew commands given above to install node.

Create First App

npm install -g create-react-native-app

Create React Native App makes it significantly easier to get started with a React Native project. It is result of collaboration between Facebook and Expo

Check Create React Native App introduction here.

create-react-native-app AwesomeProject
cd AwesomeProject
npm start

npm start runs the app in an interactive fashion.

I have attached the screenshot of terminal and the webpage that opens in the browser after we do npm start.

This slideshow requires JavaScript.

Run The App In Your Mobile Device

  • Install the Expo client on your ios/android device from play store or ios store
  • Connect the mobile device to the same wireless network on which the laptop/development environment is connected to
  • Scan the QR code shown on terminal or the web page using the expo app

The expo app should look like the screenshot look like below:

This slideshow requires JavaScript.

Hello World App

Open your AwesomeProject folder in Sublime Text.  Your file structure should look like this:

Screen Shot 2018-09-29 at 4.52.39 PM

Open App.js and add the following code:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
view raw App.js hosted with ❤ by GitHub

Reload the metro builder in terminal by pressing r.

Check the Hello World! shown on app in expo.


Introducing JSX

<Text>Hello world!</Text>

This code is not HTML. It’s JSX. It’s a syntax extension to javascript. It is used with React to define how the UI should look like.

importfromclass, and extends in the example above are all set of improvements to JavaScript. This is next generation Javascript. Learn more about it here.




React Native

Create React Native App

If you liked this article and would like one such blog to land in your inbox every week, consider subscribing to our newsletter: https://skillcaptain.substack.com

2 thoughts on “Hello World Tutorial App Using React Native For Android/ios

Add yours

  1. Hey, I’m interested in paying you for some backlinks to one of my React Native websites. Let me know if you’re interested. Looking forward to your email! Thanks!

Leave a Reply

Up ↑

%d bloggers like this: