As we know React native uses react for building components in the application, so in order to understand react native, we need to understand some basic concepts that react native uses from the react libraries like JSX, components, state, and props, etc.
In this tutorial, we will understand all these things with examples:
-
JSX
-
components
-
props
-
state
Here is the simple hello world program in react native that just prints the hello world in the app:
import React from 'react';
import { Text, View } from 'react-native';
const HelloWorld = () => {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default HelloWorld;
Let's understand this program line by line to understand these concepts.
First, we imported React from the react library because we want to use JSX components so without importing React we can't use JSX syntax in our App.
Then we imported Text and View from react-native. These are basic components that we have used in our app. The View is used to create a view just like a div tag in HTML and the Text is used to print text in the app just like the p tag in HTML.
Then we defined a function based component HelloWorld that returns a view component containing a text component.
Every component in react-native can be further modified using style property just like we use CSS with HTML. We used style property to add some style to the view component to center all the components that come under this view component, in above example, we have just one text component.
After that, we export the HelloWorld component as a default component.
What is JSX?
It is a syntax for embedding XML within Javascript. Using JSX we can write markup language inside our code. For example:
<Text>Hello, world!</Text>
React Native Component
The component is a thing or place where we write all our code. Like in the above example, we created a function-based component HelloWorld and we wrote all our code in that function.
So anything we see on the screen is just some kind of component.
React Native Props
To understand props let's take an example. Below we have an example program from the official documentation of react-native:
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
center: {
alignItems: 'center'
}
})
const Greeting = (props) => {
return (
<View style={styles.center}>
<Text>Hello {props.name}!</Text>
</View>
);
}
const LotsOfGreetings = () => {
return (
<View style={[styles.center, {top: 50}]}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
Here we created two components Greeting and LotsOfGreetings. In the Greeting component we declared a View and in that view we declared a Text component and in Greeting, we also passed props which we access inside the component function using value of name in props. Whenever we call this Greeting component then we need to pass the name as a default, because without passing the value of the name we can't call the Greeting component, because we are using it inside the Greeting component.
As you see in the above example in LotsOfGreetings we call the Greeting component three times with different values of names.
So props are nothing but the parameters(or properties) that are set on a component when we create any component. And by using props we can use the same component with different props values, just like in the above example.
Note: After creating a component using props we can't modify it further. So here comes State that allows us to change our output over time to time using user action.
React Native State
The state is same as props but the difference is that they are not passed as parameters but rather a component initializes a state itself and manages it internally based on the user action.
Note: Whenever we update anything using a state then react-native refreshes all the components itself. This feature makes react native so cool. Let's see an example to understand it.
Here is an example program from the official documentation of React Native.
import React, { Component } from 'react'
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
class App extends Component {
state = {
count: 0
}
onPress = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text>Click me</Text>
</TouchableOpacity>
<View>
<Text>
You clicked { this.state.count } times
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
marginBottom: 10
}
})
export default App;
As you see in the above example we set the count variable to 0 initially but whenever we click on the button then it calls the onPress method and using the setState function we increment the value of count variable by 1. And the moment we set a new value of count variable, react-native automatically reloads all the components.
So in this tutorial, we covered all the core basics of react native and also created a few programs to get a feel of the react native code. In the next tutorial, we will learn how to create a project of react native.
You may also like:
