アプリ作る #3日目

$ expo startで開始。
うまく立ち上がらなかったので$ expo start -cでリフレッシュして再起動。

prettier

VS Codeにprettierをインストールして、作業フォルダに.prettierrcを作成。
prettierはインデントなどタグを自動で整形してくれるものとのことで、保存時に自動で整形するように設定しました。
.prettierrcを作成することで、より詳細に設定できるとのこと。
https://prettier.io/docs/en/configuration.html#basic-configuration
チームで開発するときなど作法を共通化するのにとても良い。

Expo

React Nativeをさらにお手軽に開発できるようにするツール。
Appストアの審査を通さずにアップデートできたり（OTAアップデート）、本来はビルドをするためにXcodeを使用したりするが、クラウドサーバーでExpoがその役割を担ってくれたりするので、スムーズに開発できるなどのメリットが有る。
変更がリアルタイムにビルドされる。

デメリットは開発できるものに少し制限がかかったりする。
基本的にExpoが提供しているAPIしか使えないため、ネイティブモジュールが使えない。
アプリ内課金やBluetooth、広告計測などのサードパーティーSDKなどはできない。こういうのがしたければExpoを使えない、ということ。
【要注意】podfile云々などがinstallの説明にあると、Xcode側のコマンドを叩く必要があるので使えない！

Expoを途中でやめることも可能（eject）だけれど、変換してもクセが残るので事前にやはり計画を建てるのは何事にも大事。
ejectすると逆に戻るということはできない。

クロスプラットフォーム：アンドロイドとiPhoneといっぺんに作れる

コンポーネント（小さな部品）について

・JSXでcomponentの“見た目”を定義
・Props…性質を表すもので、不変（props.gender:male）
　親から子に情報を渡す
・ State…状態を表すもので可変（state.hungry:true）
　stateを変更することで「画面が更新される」！
開発者はどういったタイミングで画面を書き換えるかを意識することなく、常にstateに今の状態を入れておけばよい。このあたりがReactがリアクティブである所以。

作法のメモ

・JSXの中で数式やjavascriptの構文を使う時は中括弧を使用する
・numberOfLines={3}３行取り出す＆超えたら省略記号つきでカットしてくれる！

Propsと書くパターンと直接展開する２種類の書き方

// propsと書くパターン
const ListItem = (props) => {
 return (
   <View style={styles.itemContainer}>
     <View style={styles.leftContainer}>
       <Image
         style={{ width: 100, height: 100 }}
         source={{ uri: props.imageUrl }}
       />
     </View>
略

// オブジェクトスプレッド演算子を使ってpropsを直接展開するパターン
const ListItem = ({imageUrl}) => {
 return (
   <View style={styles.itemContainer}>
     <View style={styles.leftContainer}>
       <Image
         style={{ width: 100, height: 100 }}
         source={{ uri: imageUrl }}
       />
     </View>
略

functionコンポーネントの２種類の書き方
１）export default function App() {
２）export default App = () => {
２番のアロー関数の書き方の方が今どきっぽいとのこと。

エラーの備忘録

ReferenceError: Cant't find variable:Image
→importにImageを入れるのを聞き逃してた

Warning: Each child in a list should have a unique "key" prop.
→Reactあるある。リストアイテムを配列でmapした場合、配列が複数ある場合どれを更新したらいいかわらかなくなるのでkeyにユニークな値を与えておく。２番めの引数にindexを入れることで順番に数字が入るように。

黄色い下に出るエラー
→確認したらDismissしないと解消しても残ってる

あってるのにエラーが出る
→Expoを再起動する

モリサキの気持ち

慣れ親しんだCSSの書き方がちょっと違うのが新鮮！
多分ハイフンを取り除いて、ハイフン後の１文字目を大文字にするのかな？
flex-direction→flexDirection
justify-content→justifyContent
いつものCSSだと綴り間違いや閉じ忘れがあってもできるところまでは描画してくれるけれど、そういうのがあると真っ赤になって何も表示してくれないのいっそ清々しい。

パッケージをちょこちょこインストールするけれど、package.jsonに追加されことが表示されるので、何を入れたか、きちんと入ったのが確認できるの良い。

面白い：）