「基礎から学ぶReact Native入門」で2024年に入門した記録 その２

古い“Global Expo CLI”と新しい“Local Expo CLI”

前回の記事の時点で気が付くべきでしたが、古い“Global Expo CLI”はNode.jsのバージョン17以降をサポートしていないみたいです。

$ npm install -g expo-cli

でインストールして

$expo init my-first-react-native-app

でプロジェクトをセットアップするやつが古い“Global Expo CLI”です。
新しい“Local Expo CLI”は事前インストールが不要です。

npx create-expo-app my-first-react-native-app

のようにnpxで一時的にパッケージを利用してプロジェクトをセットアップするやつが新しい“Local Expo CLI”です。

P.39 サンプルプロジェクトを作成する

$ expo init component-sample

は

$ npx create-expo-app component-sample

に置き換えます。以降、expo initはすべてnpx create-expo-appに変えて実行していきましょう。

  return (
    <Text>Hello, {props.name}</Text>{/* (2) */} 
  ); 

この部分はコメントの位置が悪いみたいでエラーになってしまいます。

  return (
    <Text>Hello, {props.name}</Text>
  );{/* (2) */}   

であればオッケー。

P.46 クラスコンポーネントのstateを表示に使う

ここでクラスコンポーネントが出てきますが、次の５章の冒頭に

前章ではクラスコンポーネントで状態管理やライフサイクルを利用する方法について解説しましたが、関数コンポーネントでも同様の機能を実現することができます。

P.57

と書いてある通り、クラスを使わなくてもstateは使える。
React入門でつまづいた ～function App()とclass App extends Componentの違い～ #React - Qiita

しかし、新規プロジェクトでわざわざクラスコンポーネントを使う必要はありません。関数コンポーネントの方がシンプルに書けるからです。
クラスコンポーネントは古いプロジェクトで使わざるを得ないときに、必要に応じて勉強するのが良いようです。

とのことなので、ここは飛ばして第５章を進める。

P.64 リスト5.7 表示するデータが変わったら再フェッチする

このサンプルコードが断片的なコードでこれだけでは実行できないので、countを監視する以下のようなコードで試す。

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count > 3) return alert('3を超えました。');
  }, [count]);

  const onPressMinusOne = () => {
    setCount(count - 1)
  };
  const onPressPlusOne = () => {
    setCount(count + 1)
  };

  return (
    <View style={styles.container}>
      <Button title='-1' onPress={onPressMinusOne} />
      <Text>{count}</Text>
      <Button title='+1' onPress={onPressPlusOne} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

5章までの主な差分はこれでおしまい。