🍣

Reactロードマップ(1) ~簡単なアプリ編~

2024/03/12に公開

JavaScript

React

初心者

tech

はじめに

最近インターンで必要になるということもありReactを学習しているのですが、今回はQiitaで読んだReactロードマップの記事を参考にボタンをクリックしたらランダムな画像に切り替わる簡単なアプリを実装してみようと思います！以下参考にさせていただいた記事です。

実装してみた

import { useState } from "react";
import axios from "axios";

function App() {
  const [image, setImage] = useState("https://source.unsplash.com/random");

  const onClickGetRandomImage = () => {
    axios
      .get("https://source.unsplash.com/random")
      .then((res) => setImage(res.request.responseURL));
  };

  return (
    <>
      <img src={image} width="500px" height="500px" alt="ランダムな画像" />
      <button onClick={onClickGetRandomImage}>画像を変更</button>
    </>
  );
}

export default App;

悩んだところ

最初はクリック時の画像取得を下記のように実装したのですが、これだと画像がうまく表示されずGPTに投げてみたところ(脳死)、resには画像のURLではなく画像データが直接入っているためresデータのURLを指定してあげることで無事画像が表示されました。

//画像が正しく表示されない
  const onClickGetRandomImage = () => {
    axios
      .get("https://source.unsplash.com/random")
      .then((res) => setImage(res));
  };

//正しく表示される
  const onClickGetRandomImage = () => {
    axios
      .get("https://source.unsplash.com/random")
      .then((res) => setImage(res.request.responseURL));
  };

おわりに

今回はReactで簡単なアプリを実装してみました。ロードマップに沿って次はTODOを実装してみようと思います！

↓次回

はじめに

実装してみた

悩んだところ

おわりに

Discussion