Hello World Tutorial App Using React Native For Android/ios

Installation

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:

Reload the metro builder in terminal by pressing r.

Check the Hello World! shown on app in expo.

Screenshot_20180929-165204.png

Introducing JSX

<View>
<Text>Hello world!</Text>
</View>

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.


Reference:

JSX

React

React Native

Create React Native App

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: