Basically , React Native Class extends a component
React Native class has a Component state and lifecycle
Example of React Native code structure
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.