- テンプレートを開く
- 「Fork」する
- ファイル名をわかりやすいものに変更する（ログインしていなくても再度編集ができる）(githubアカウント持っている人はログインしてOK)
こちらのサンプルコードを適宜参照して進行する。 困ったら公式ドキュメントがわかりやすい。日本語翻訳もされている。
- 今回のハンズオンではReactの関数コンポーネント（Functional Component）で実装します。
- セクションごとに「講師が話すターン」「一緒に手を動かすターン」があります！
- ユーザーの「いいね！」ボタンクリックを検知してカードを（一枚）スワイプすることができる。
- Reactを用いたユーザーイベント（クリックなど）の制御方法
- (Functional Componentでの)Stateの定義/使用方法
- Reactのイベント処理
- コンポーネントに関数を渡す
- Stateとは？
- functional componentでStateが利用できたりするフック早わかり
- フックAPIリファレンス
- className
- 三項演算子
- カード部分を外部ファイルに定義してコンポーネント化し、index.jsから呼び出せている
- カードではpropsを受け取れるようにして、呼び出し元(index.js)から渡した値を画面に表示できている
- カードを2枚表示できている
- コンポーネントの定義と利用方法
- コンポーネントに外部から値を渡す方法
- 外部から受け取った値をコンポーネントで使う方法
- カードが何枚のときでもスワイプできるようになっている
- 最低限のコンポーネントでn枚のスワイプカードに対応できている
- カード2枚分のコンポーネントでn枚似対応するためのtips
https://codesandbox.io/embed/swipe-card-complete-yjlpo?codemirror=1
- スキップにも対応する
- 関数の定義にuseCallBackを使う。(パフォーマンスの向上)
- ユーザーの情報がない場合もカードが表示できるようにする。(コミュニティ/歳が無い場合への対応)
- TypeScriptを使ってみる