Basic of react-native

Photo by Carlos Murillo on Unsplash

Let’s take the first step with react native. I am going to cover the basics of RN that are components, JSX, probs, and state. As I describe in the previous block in react native we write the API in the form of a component. we can say that a component is a building block of a react-native project. let’s start with the component.

Component :

A component is made up of JSX, probs, and state, and they are mainly two types

1. functional component
2. class component.

Let’s take the example of Cat and for cat, we will make components

functional component

import React from ‘react’;
import { Text } from ‘react-native’;

const Cat = () => {
return (
<Text>Hello, I am your cat!</Text>
);
}

export default Cat;

class component

React, { Component } from ‘react’;
import { Text } from ‘react-native’;

class Cat extends Component {
render() {
return (
<Text>Hello, I am your cat!</Text>
);
} import
}

export default Cat;

java script XML (JSX) and currly braces

In react and native both JSX is used to write the text element like <Text>Hi I am Rajendra Verma</Text> and curly braces are used to write the javascript

like this calls like {getFullName(“Rum”, “Tum”, “Tugger”)}:

import React from ‘react’;
import { Text } from ‘react-native’;

const getFullName = (firstName, secondName, thirdName) => {
return firstName + “ “ + secondName + “ “ + thirdName;
}

const Cat = () => {
return (
<Text>
Hello, I am {getFullName(“Rum”, “Tum”, “Tugger”)}!
</Text>
);
}

export default Cat;

Probs (properties)

If you are aware of HTML then you know that you can give properties to the tags, for example, same here we can customize our own component and define certain properties.

import React from ‘react’;
import { Text, View } from ‘react-native’;

const Cat = (props) => {
return (
<View>
<Text>Hello, I am {props.name}!</Text>
</View>
);
}

const Cafe = () => {
return (
<View>
<Cat name=”Maru” />
<Cat name=”Jellylorum” />
<Cat name=”Spot” />
</View>
);
}

In the above code, we create one component called cat and declare one property called name and call the cat component three times with the name properties Maru, Jellylorum, and Spot

State

To perform certain actions for example toggle a button, let’s get data from the server and show it in UI and things are used called state. A state can save the data locally for a certain interval of time or until a certain situation is not satisfying.

import React, { useState } from “react”;
import { Button, Text, View } from “react-native”;

const Cat = (props) => {
const [isHungry, setIsHungry] = useState(true);

return (
<View>
<Text>
I am {props.name}, and I am {isHungry ? “hungry” : “full”}!
</Text>
<Button
onPress={() => {
setIsHungry(false);
}}
disabled={!isHungry}
title={isHungry ? “Pour me some milk, please!” : “Thank you!”}
/>
</View>
);
}

const Cafe = () => {
return (
<>
<Cat name=”Munkustrap” />
<Cat name=”Spot” />
</>
);
}

export default Cafe;

useState is a react-native component and here in the above example, it changes from true to false and vice-versa on the click of a button which changes the text.

I hope you now have a little understanding of the basics of react-native and I will post the video on the basic in the youtube channel also there I am sure that you will understand completely. hope you enjoy the reading. I am a new blogger so please boost my confidence and comment on my content so that I can improve in my self