Import React,{Component } from ‘react’;
Import {View,Text,StyleSheet} from ‘react-native’;
export default class Helloworld extends Component {
render () {
return (
<View style={styles.container}>
<Text>Hello World</Text>
</View>
)
}
}
Const Styles = StyleSheet.create({
Container:{
flex:1,
justifyContent:”center”,
alignItems:”center”
}
})


Explanation:

Imports:

Import React,{Component} from ‘react’;
Import { View, Text } from ‘react-native’;
React Native was actually made with react library and it extends the component feature from it.
First import is including a base React library into your app.
View,Text are the components which are used through JSX to build the app UI.

Class:

React native class extends all its features from the parent component.
The Class component has its own life cycle and state condition,and a render method.
Render() method returns the JSX code which will be build as app UI.

Render():

Each class can have a render() method which draws the app UI from JSX code.
Render method returns only the JSX code.

JSX:

JSX stands for JAVASCRIPT XML.
React Native uses JSX to render UIs.
React library supports HTML whereas ,React Native Supports JSX only.

UI Components and Stylesheet:

As we saw JSX file renders the app UI components like View,Text,TextInputs,Images and etc.
View is a UI Component which represents the layout of the page.
If render() method has more than a one UI component,it should be wrapped inside View Component.
Stylesheet takes care of styles for all the UI Components.
Almost every UI Component possess a style prop which defines the style of Components like their position,width,height and alignment.