React Native is built on top of React, a popular JavaScript library for building user interfaces. React Native can be most effectively used by understanding React.

React consists of three core concepts: components, JSX, and the property state. If you want to learn more, see React’s official documentation.

This is your First Component

To illustrate this principle, we will use ‘Pet’ as an example: friendly, approachable animals that need a name and a home. Here’s your first ‘Pet’ component:

import React from ‘react’;
import { Text } from ‘react-native;
const Pet = () => {
return (
<Text>Hello, I am your pet!</Text>
);
}
export default Pet;

Output: Hello, I am your pet!

Using JavaScript’s import function, import the Text Core Component from React and React Native to define your Pet component:

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

Initially, your component will be a function:

const Pet = () => {};

Components are like blueprints. The function component’s output is rendered as a React element. Using React elements, you can specify what you want to display on the screen.

In this case, the Pet component will display a <Text> element:

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

JavaScript’s export default allows you to export your function component for use throughout your entire app, like this:

const Pet = () => {
return <Text>Hello, I am your pet!</Text>;
};
export default Pet;

Exporting your component in this way is just one of many options.

Let’s look closely at that return statement. <Text>Hello, I am your pet! is using JSX, a JavaScript syntax that facilitates writing elements.

JSX

React and React Native use an element syntax known as JSX, which lets you write texts within JavaScript like this: <Text>Hello, I’m your pet!</Text>. The JSX syntax allows you to use variables since it is JavaScript. You are declaring a name for the pet, name, and embedding it inside of the curly braces of <Text>.

Curly Braces

Example:

import React from ‘react’;
import { Text } from ‘react-native’;
const Pet = () => {
const name = “Andrew”;
return (
<Text>Hello, I am {name}!</Text>
);
}
export default Pet;

Output: Hello, I am Andrew!

 

import React from ‘react’;
import { Text } from ‘react-native’;
const getFullName = (firstName, secondName, thirdName) => {
return firstName + ” ” + secondName + ” ” + thirdName;
}
const Pet = () => {
return (
<Text> Hello, I am {getFullName(“Andrew”, “Michel”, “Watson”)} </Text>
);
}
export default Pet;

Output: Hello, I am Andrew Michel Watson!

Curly braces function as a portal to JS functionality in your JSX!
React includes JSX, so if you don’t import React from ‘react’ at the top of your file, it won’t work!

Custom Components

You can nest these components inside each other in React to create new components. Nestable, reusable components are at the heart of the React paradigm.

For example, you can mix Text and TextInput together, and React Native will render them together:

import React from ‘react’;
import { Text, TextInput, View } from ‘react-native’;
const Pet = () => {
return (
<View>
<Text>Hello…</Text>
<TextInput
style={{
height: 40,
borderColor: ‘gray’,
borderWidth: 1
}}
defaultValue=” Hi there!”/>
</View>
);
}
export default Pet;

Output: Hello…
Hi there!

Props

Props, short for “properties,” let you customize React components.
Props can also be used to customize React Native’s Core Components. The following is an example of how you specify the image to be displayed when using Image:

import React from ‘react’;
import { Text, View, Image } from ‘react-native’;
Const PetApp = () => {
return (
<View>
<Image
source={{uri: “https://reactnative.sample/docs/assets/d_pet.png”}}
style={{width: 200, height: 200}}
/>
<Text>Hello, I am your pet!</Text>
</View>
);
}
export default PetApp;

Output: (Image rendered)
Hello, I am your pet!

Props and the Core Components Text, Image, and View allow you to build many things! However, if you want to build something interactive, you’ll need state.

A component should generally be configured through props when it renders. If you expect component data to change over time, keep track of it using state.

React’s use state hook allows you to add state to a component. Hooks let you access the features of React. For instance, useState adds state to functions.

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=”Zeeva” />
<Cat name=”Zoe” />
</>
);
}
export default Cafe;

Output: I am Zeeva, and I am hungry!
POUR ME SOME MILK, PLEASE!
I am Zoe, and I am hungry!
POUR ME SOME MILK, PLEASE!