React Native: Components, JSX, Props, State

Introduction.

Since I will be developing apps with React Native at this year, I started learning about React Native. First of all, I will briefly summarize only the important parts as a memorandum.

The official documentation is available, and you can read it here as you go along.

https://reactnative.dev/docs/getting-started

What is React Native?

React Native is a framework for developing mobile apps in JavaScript (or TypeScript) that enables the development of apps for both iOS and Android with a single code base (cross-platform development).

• API communication and application logic are written in JavaScript.
• The look and behavior of the UI are described using React Native components; React is a JavaScript library (not a programming language) for building user interfaces (UIs), which are primarily component-based.

What is a React Native component?

React provides a mechanism to define UI components in the form of extensions to JavaScript. components are the basic unit of UI construction in React. the components provided by React Native are a type of React component, but strictly speaking they are “React Native components specifically for Native.”

The actual code is written in JavaScript, but by using the JSX syntax, a UI structure like HTML can be described.

React Components

• UI components designed for web browsers.
• It is composed of HTML tags (e.g. <div>, <span>, <button>).
• React DOM (a renderer for the web) generates HTML elements.

React Native Components

• UI components designed for mobile apps.
• Use native UI elements (iOS and Android views) instead of HTML tags.
• The components provided by React Native (e.g. <View>, <Text>, <Image>) are converted into native UI elements such as UIView for iOS and View for Android. You can think of <View> as equivalent to HTML’s <Div> and <Text> as equivalent to HTML’s <p>.

React Native components are “siblings” of React components, but they differ in the environment in which they are used (apps, not web) and their behavior (converted to native UI elements).

import React from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  const handlePress = () => {
    fetch('https://api.example.com/data')  // API通信はJavaScript
      .then(response => response.json())
      .then(data => console.log(data));
  };

  return (
    
      Hello, React Native!  {/* UIはReactコンポーネント */}
      <Button title="Fetch Data" />
    
  );
};

In the above example,

• API communication fetch is a standard JavaScript feature.
• View andText are components provided by React Native to build the UI.

Components are reusable and can be combined with other components to build complex UIs. It is common to define them as function components.

import React from 'react';
import { Text } from 'react-native';

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

export default Cat;

In the above example, the function component named Cat element is returned.

JSX (JavaScript XML)

JSX is a syntax for describing UI components in JavaScript (an extended syntax of JavaScript), which enables descriptions similar to XML and HTML. When a developer writes in JSX, a transpiler (Babel) converts JSX into normal JavaScript, the converted JavaScript runs in the browser, and React generates the UI.

Previously, React used React.createElement() to build the UI, but this was introduced to make UI construction intuitive and easy to understand, as the code was lengthy and difficult to understand.

Example: Without JSX (conventional method)

const element = React.createElement('div', { className: 'container' },
  React.createElement('h1', null, 'Hello, world!'),
  React.createElement('p', null, 'Welcome to React')
);

Description using JSX

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>Welcome to React</p>
  </div>
);

Use braces {} to embed the result of a variable or function within JSX. In the following example, the value of the name variable is embedded within the following example, which embeds the value of the name variable within an element.

const name = 'Whiskers';

const Cat = () => {
  return Hello, I am {name}!;
};

Props (Properties)

Props is short for property, which acts similarly to function arguments. However, it is a concept specific to React components and a means to customize behavior by passing values to components externally.

The difference between function arguments and

• Since props are passed in object form and multiple values can be handled together, there is no need to prepare many arguments for each property, as is the case with function arguments.
• It is read-only and values passed from the parent component cannot be changed by the child component. If you want to change the state of the parent, use a callback function to update the parent’s data

A dynamic UI can be built by passing values from a parent component to its child components: the Cafe component passes a property named name to the Cat component.

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

const Cafe = () => {
  return (
    
      
      
    
  );
};

State

State is a mechanism for managing changeable data within a component. State is updated in response to user operations and events, and the UI is re-rendered accordingly.

In React, useState hooks are used to manage States.

Basic usage of useState

const [count, setCount] = useState(0);

• 0 inuseState(0)is the initial value
• count is a variable that holds the current state
• setCount is a function to update count

useState always returns only two (a variable that holds the current state and a function that updates the state), and the array never has three or four elements.

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

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

  return (
    
      
        I am {isHungry ? 'hungry' : 'full'}!
      
      <Button> {
          setIsHungry(false);
        }}
        title="Feed me"
      />
    
  );
};