テックコミットさんのお年玉企画でTecpitさんの「楽曲をリアルタイム検索してみよう！【React】」を試させていただきましたので、情報をまとめて見ました！

教材の概要

検索したキーワードに応じて、リアルタイムでitunsAPIから情報を引用し、
キーワードにhitしたアルバムや曲情報を50件まで画面に表示させます。
実際の概要[ https://www.techpit.jp/courses/530899/lectures/9701851 ]
progateのjs ES6を一度やっておくことを推奨されています。

Reactを使い、ハンズオン形式（テキストベース）で作る教材でした。
一般公開しているAPIデータを引っ張ってくるので、データベースとかは使いません。
フロント側だけの技術で作ることができるコンテンツになります。

自分の前提知識

JavaScriptのFWはVue.js、react、redux、backboneもオンラインスクール/ネット情報でざっと基礎的な動作を学んだことがあります/
が、Vue以外は触った時間も短く、ほぼ忘れている状態ですw

この教材で学べる知識

・yarnを使ったreact関連データのインストール方法
・Reactの基本的な書き方（renderやメソッド、ライフサイクルなんか）
・Componentの作成と相互データの受け渡し
・Parcelを使ったバンドル
・axiosによる非同期でのデータの引用方法
・RsJSの概要

progateでjsを学んだだけであれば、全てが新しい知識になるので少し敷居は高いかもしれません。
ただ、それぞれの項目に基本的な概念などはきちんと書いているので「これはこういうものなんだ」という概要理解までは問題なくできると思います。

yarnは何度か使ったことがありますが、バンドルは今まではvue.jsやreactを使うときにはwebpackとかで構築してたのでparcelという簡易的なものがあるんだーということを知れて良かったです。
あとは検索ボタンで検索ではなく、文字入力で非同期検索を少し時間差で行う処理をRsJSというものでやっています。
これも初めて知りました。うっすらと覚えときたい！

少しカスタマイズしたところ/実際の動き

itunesの検索結果は50件までしか取得できないのですが、
せっかくなので11件以上の検索結果があれば「次へ」「前へ」を出すようなページネーションの動作を行いました。APIのhit件数に応じて、ページネーションコンポーネントを出すかどうかをif判定しているような感じです。
参考：　http://bashalog.c-brains.jp/19/10/04-164802.php

フロントの表示は、背景画像や2列並び、ページネーション出すようにしたくらいのカスタマイズになります。

全体の感想

環境構築について、parcelなんかでのバンドル方法は見たことがなかったのですが
シンプルな反面、キャッシュファイルを大量に作るなど癖もあるような印象もあったので、
初めてやる人でも、参考情報が多いイメージのあるwebpackでの構築でも良いのかなーと思いました。

良かったところとして、前述したように、それぞれの説明が概要理解まではできるようになっており、また説明もわかりやすかったです。
特にコンポーネント間の関連性の説明がわかりやすく、より理解を深められたと思います。

ただ、もちろん概要までなので、きちんと自分の中に落とし込むにはドキュメントなどの情報も読んだり、自分でも何度か作って見る必要はあると思います。

また、記述ミスや、公開後の処理についてうまくいかないところがあり質問なども結構たくさん投げているのですが、きちんと丁寧に答えていただき、とてもありがたいなと思いました！

お読みいただき、ありがとうございました！