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.
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:
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:
import React, { Component } from 'react'; | |
import { Text, View } from 'react-native'; | |
export default class HelloWorldApp extends Component { | |
render() { | |
return ( | |
<View> | |
<Text>Hello world!</Text> | |
</View> | |
); | |
} | |
} |
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:
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
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!
Hey! Sent you a linked In request.