React Fundamentals

React Native runs on React, a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course.

We’re going to cover the core concepts behind React:

• components
• JSX
• props
• state

If you want to dig deeper, we encourage you to check out React’s official documentation.

Your first component

The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component:

import React from 'react';
import {Text} from 'react-native';
 
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};
 
export default Cat;

You additionally import Component from React:

import React, {Component} from 'react';

Your component starts as a class extending Component instead of as a function:

class Cat extends Component {}

Class components have a render() function. Whatever is returned inside it is rendered as a React element:

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

And as with function components, you can export your class component:

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

Now take a closer look at that return statement. <Text>Hello, I am your cat!</Text> is using a kind of JavaScript syntax that makes writing elements convenient: JSX.

JSX

React and React Native use JSX, a syntax that lets you write elements inside JavaScript like so: <Text>Hello, I am your cat!</Text>. The React docs have a comprehensive guide to JSX you can refer to learn even more. Because JSX is JavaScript, you can use variables inside it. Here you are declaring a name for the cat, name, and embedding it with curly braces inside <Text>.

import React from 'react';
import {Text} from 'react-native';
 
const Cat = () => {
  const name = 'Maru';
  return <Text>Hello, I am {name}!</Text>;
};
 
export default Cat;

Any JavaScript expression will work between curly braces, including function calls like {getFullName("Rum", "Tum", "Tugger")}:

import React from 'react';
import {Text} from 'react-native';
 
const getFullName = (
  firstName: string,
  secondName: string,
  thirdName: string,
) => {
  return firstName + ' ' + secondName + ' ' + thirdName;
};
 
const Cat = () => {
  return <Text>Hello, I am {getFullName('Rum', 'Tum', 'Tugger')}!</Text>;
};
 
export default Cat;

You can think of curly braces as creating a portal into JS functionality in your JSX!

Custom Components

You’ve already met React Native’s Core Components. React lets you nest these components inside each other to create new components. These nestable, reusable components are at the heart of the React paradigm.

For example, you can nest Text and TextInput inside a View below, and React Native will render them together:

import React from 'react';
import {Text, TextInput, View} from 'react-native';
 
const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />
    </View>
  );
};
 
export default Cat;

Any component that renders other components is a parent component. Here, Cafe is the parent component and each Cat is a child component.

You can put as many cats in your cafe as you like. Each <Cat> renders a unique element—which you can customize with props.

Is this page useful?