【React Native】React Native の基本【備忘録】

React Native とは

React Nativeとは

iOS と Android との__異なるプラットフォーム__のプロジェクトを、
__共通のコード__で開発できるようにしたライブラリである。
React と同様に Facebook がオープンソースで開発をしている。

主要な Components

各プラットフォームの対応表↓

React Native UI	Android	iOS	Web	詳細
<View>	<ViewGroup>	<UIView>	<div>	色々な仕様を適用できる"箱"
<Text>	<TextView>	<UITextView>	<p>	文章などを表現する
<Image>	<ImageView>	<UIImageView>	<img>	画像を表現する
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	スクロール可能な「箱」
<TextInput>	<TextEdit>	<UITextField>	<input type="text">	ユーザーが入力可能

React の基礎知識

Components

コンポーネントとは

UI について、__独立した再利用できる部品__に分割する。
それによって、部品それぞれを__分離して考える__ことができるようになる。
__生産性やコード可読性の向上__に大きく貢献する。
※2021年7月現在は、関数コンポーネントでの記述が推奨されている¹。

以下は例↓

Cafe

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>
  );
}

export default Cafe;

JSX

__JavaScript 内に記述可能__な文法である。
※最終的に JavaScript に変換される。

Props

コンポーネントをカスタマイズできる__読み取り専用の__プロパティである( properties の省略形)。

React には1つだけ厳格なルールがある。

全ての React コンポーネントは、
自己の props に対して__純関数__のように振る舞わなければならない。
React公式

ここでの純関数とは、以下の関数を指す。

• 入力されたものを__変更しようとせず__、同じ入力に対して同じ結果を返す 「純粋 (pure)」 な関数

State

State は、何度も変更されたり、
ユーザーとの対話的やり取りを扱うのに便利である。
コンポーネントのプライベートなデータストレージのようなものである。

以下は例↓

Cafe

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;

Expo CLI と React Native CLI

Expo CLI

Expo は何かを準備しなくても、すぐにネイティブアプリを作成できる。
ネイティブアプリ開発が初めてでも、気軽に始められる。
アプリの機能は Expo のエコシステム内に限られる(とはいえ日々機能が拡大・追加されている)。

React Native CLI

Xcode か Android Studio のインストール・設定が必要である。
ネイティブアプリ開発に慣れていれば、すぐに始められる。
大規模なアプリ開発向けである。

まとめ

• クロスプラットフォーム開発の選択肢の1つ
• React に慣れている人はすぐに始められる
• 開発環境には、以下の2つの選択肢がある
  
  ○ Expo CLI
  
  ○ React Native CLI
  

参考

React
React Native

1. 関数コンポーネントを使うべき理由 ↩