Manish's Blog

#React-Native First Program

Writing your first "Hello World" Program in React-native .

Manish Pandey's photo
Manish Pandey
·

2 min read

Today you will get to know how can we run a simple program to display "Hello World".Don't worry I'll be coding right alongside with you ;)

Pre-Requisite :

  • We need NodeJS.

  • Android Studio (or we can use our Android phone since we will be building this app to run on Android/iOS devices).

  • IDE to edit your code.

Step 1:

We need only one file that is <App.tsx>, which you can find in the root directory of the react-native.

Now, We will start writing our first "Hello World" program.

Writing "Hello World" program:

After opening App.tsx file, simply use these lines to write your first program ...

import React from "react";
//in simple words this will import react dependencies of react to our file
import { 
  View,
  Text, 
  SafeAreaView, 
  Alert
} from 'react-native'
//we are importing elements from react-native
//we will use JSX while writing code
function App() {
return(
    <SafeAreaView>
        <View>
            <Text>Hello World</Text>
        </View>
    </SafeAreaView>
)
}
export default App;

Save this and run the program and you will get a hello world displayed in your app.

Notes

  • We use this import {} from 'react-native' to import elements from the react-native.

  • The "View" can be used to wrap many elements like we have div.

  • Safeview is used to avoid any kind of notches of mobile phones.

  • If we don't use a return(), nothing will be displayed on the app. because the function has to return something since we are using JSX to write code.

Voila !! You have just displayed "Hello World" on your first app.

Thank you for this read, I am always open for suggestion since i am a beginner to React-native and ..... Thanks for reading, hope to See you Soon !! . Jay Hind.

React NativecodingJavaScript