React Native – Hello World

I hope you have read the post about React Native – Introduction

Now, we will learn how to create a sample React Native application.

Prerequisites

In order to start with React Native, you should have the following experience.

  • Javascript
  • HTML/CSS

Tools

  • Node.js 6.x or later
  • Code Editor

After installing Node.js you need to install create-react-native-app. To install this execute a command in terminal.

npm install -g create-react-native-app

Now you can use create-react-native-app to create a new applications.

 


$ npm i -g create-react-native-app
$ create-react-native-app hello-world
$ cd hello-world
$ npm start

Now change your App.js with the following:


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

You can run a react-native project by the following command.

– yarn android
– yarn ios # you need to use macOS to build the iOS project – use the Expo app if you need to do iOS development without a Mac
– yarn web

We will run the yarn web command and check this example. So that we don’t need any device to run,

yarn web will install expo-cli.

You will see the following output in the browser.

Author: Jaydip Panchal

Hello, This is jaydip panchal here, who do code, dream code, eat code, drink code, walk code. #CodeWithJaydip #CodeWithGeek

Leave a Reply

Your email address will not be published. Required fields are marked *