【画像検索アプリ】ReactとWebAPIを使ってPixabayクローンを作ってみよう

Рет қаралды 9,224

Күн бұрын

#入門 #react #javascript #api #webアプリ #プログラミング
【MERNでフルスタックを勉強したい方はこちら】
shincode.info/2...
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-...
-----------------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・React基礎～応用が学べる
・画像検索アプリが作れる
・WebAPIの叩き方が分かる
・データフェッチのfetch()の使い方が学べる
・ReactHooksのuseStateとuseRefが学べる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ2000人突破
・Webアプリ/サイト開発数：200以上
★チャンネル登録はこちらから★
/ @programming_tutorial_...
★今回のソースコード★
github.com/Shi...
CSSはこちらからコピペしてください。
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンドマイクアームスタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。

Пікірлер: 12

@kennakatani395 2 жыл бұрын

クローンは既存のアプリがどのように作られているのかイメージしやすい上に、作るのが楽しいのでモチベーション維持も兼ねてよく観てるのでありがたいです。

@programming_tutorial_youtube 2 жыл бұрын

kenさん、ご視聴ありがとうございます。クローン系は楽しいですよね笑私もよくクローン系を作っているので、kenさんのモチベーション維持に繋がれば幸いです。

@yuta8249 2 жыл бұрын

この方の動画はわかりやすいな。。。

@ts-jb6ed 2 жыл бұрын

React+cognitoのユーザー認証、サインイン、認証後のLambdaトリガーでDynamoDBにユーザーデータを保存するなど動画を見てみたいです！

@gindaka_x Жыл бұрын

自分なりに応用でPixabay以外のサイトでやってみて無事表示することができました！ひとつだけ質問なのですが、map関数で配列のデータをとってくるときにdata.hitsとなるのはわかるのですが、中の画像をとってくるのにdata.hits.largeImageURLではなくdata.largeImageURLになることに少し疑問を感じました。

@ho389 2 жыл бұрын

inputのvalueを取得する際に、useRefを使う場合とuseStateを使う場合との使い分けみたいなものはありますか？

@mk-rf9mf 2 жыл бұрын

useState：入力値をもとにインタラクティブに絞り込む場合に使用 useRef：入力で再レンダリングを抑えたい場合に使用絞り込み検索みたいな連続した入力をトリガーに何かしらのイベントを発火させたい場合にuseStateで入力値を監視します。それ以外はuseRefを使います。（ざっくりですが）また、入力値が多いと初めから確定してるならreact-hook-formを導入するなどの選択が必要になってくると思います。個人的な回答ですが、参考になれば幸いです。

@ho389 2 жыл бұрын

@@mk-rf9mf ありがとうございます！