Unsplashは無料で商用利用もできる写真素材サイト。Reactを使ってUnsplashで公開されている画像を検索するWebアプリを作成しましょう！ブログでも解説してるので、コードのコピペなどはこちらを参照してください→ https://www.webcreatorbox.com/tech/react-unsplash-api
【目次】
0:00 Unsplashとは
0:35 こんなアプリを作ってみよう
0:52 Unsplash APIの開発者登録
2:17 ViteでReactアプリのベースを作成
5:14 タイトル部分の作成（Title.jsx）
7:50 検索フォームの作成（Form.jsx）
9:00 Unsplashのデータを取得
17:07 検索結果の表示（Results.jsx）
24:33 環境変数の作成（.env）
26:25 完成！
26:38 白黒画像の検索版も作ってみたよ
【紹介しているWebサイト】
– 作成したアプリのGitHub https://github.com/manabox/image-search-app
– Unsplash API登録 https://unsplash.com/developers
– Unsplash API ドキュメント https://unsplash.com/documentation
– Vite https://ja.vitejs.dev/
– Viteの使い方説明記事 https://www.webcreatorbox.com/tech/vite-react
– 白黒画像検索アプリ BW Photos https://manabox.github.io/BWPhotos/
【ブログ】
ブログ「Webクリエイターボックス」にて、Web制作やWebデザインのトレンドなどを書いています。素敵なWebデザインを紹介したギャラリーページや、Web制作・デザイン関連のおすすめ書籍、お得なクーポンも用意しています！→ https://www.webcreatorbox.com/
【ショップ】
マグカップやTシャツなど、オリジナルグッズ販売中！→ https://webcreatorbox.shop/
#JavaScript #React #Vite
Twitter: https://twitter.com/webcreatorbox/
Facebook: https://www.facebook.com/webcreatorbox.fb/
Instagram: https://www.instagram.com/webcreatorbox/
コメント