エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
約2分程度で読めるので最後まで読んでもらえると幸いです。
対象
- Reactのインプットが完了してお手頃なアプリを開発したい方
- フロントのみで実装したときの『データの流れ』を理解したい方
サイトのURL
アプリのご紹介
こんなアプリが開発できます。
何が学べるか？
CRUDの開発
登録（Create）・参照(Read)・更新(Update)・削除(Delete)に加えて、参照後のtodoリストへの絞り込みの開発について学べます。
コンポーネントの使い方
メインページを一通り開発した後、コンポーネント化できる箇所をピックアップします。
具体的には『Todo』『FilterButton』『Form』コンポーネントとしてファイルの切り出しをします。切り出す時の開発手順が学べます。
propsの使い方
コンポーネント間（親と子という表現をよく使います）でデータの渡す時の書き方です。
JSXにpropsを渡すことで、同じコンポーネントを複数利用したとき、コンポーネントごとに名称を変更したり、ブール値を設定したい時の開発手順が学べます。
フックの使い方
データの状態監視（初期表示や更新）で使う『useState』をメインに、フックの開発手順が学べます。今回のアプリでは『useState』の他に以下2つのフックも使います。
useRef
DOMへのアクセスする時・再レンダリングに影響を与えずに値を保持する時に使う
useEffect
コンポーネントを外部システムと同期させる時に使う
その他
- 注意点としては英語を翻訳した日本語になっているため、少し読みづらさはあります
- 後半は英語のみになります
- TypeScriptの開発は本アプリでは未対応です
- バックエンドの開発は未対応です
さいごに
弊社のご紹介もさせてください。
▼ コーポレートサイト
▼ Wantedly求人
弊社メンバーは学習した内容を日々Qiitaの記事にアウトプットしております。
弊社にご興味のある方、まずは求人を見てみてください！
ご応募お待ちしておりますー！