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:

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.

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.

import, from, class, 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

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