React初心者がAxiosをやってみた

はじめに

今回はReactでAxiosを使いデータ取得する方法を実践してみました。

参考にしたもの

あべちゃんのフロントエンド塾~Youtube教室~様の
【ReactHooks入門】第3回-2：useEffectの理解後編

非常に参考になりました。ありがとうございます!

Axiosとは

Axiosの公式サイトより引用

Axiosは、ブラウザとnode.jsのためのシンプルなプロミスベースのHTTPクライアントです。
Axiosは、非常に拡張性の高いインターフェイスを持つ小さなパッケージで、シンプルに使えるライブラリを提供します。

非常にわかりやすく言うとHTTP通信を簡単に行うことが出来るJavaScriptライブラリ

プロジェクト作成

npx create-react-app axios-tutorial --template typescript

Tailwind CSS導入

プラグインとしてdaisyUIも導入、以下の記事を参照してください。
ReactにdaisyUIを導入するまで

Axiosインストール

JSONPlaceHolderよりデータ取得をするためAxiosを導入

npm install axios

ItemList.tsx作成

src/components/ItemList.tsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

interface Post extends Todo {
  body: string;
}

interface Item {
  id: number;
  title: string;
}
type ResourceType = 'todos' | 'posts';

const ItemList: React.FC = () => {
  const [items, setItems] = useState<Item[]>([]);
  const [resource, setResource] = useState<ResourceType>('todos');

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const response = await axios.get(
          `https://jsonplaceholder.typicode.com/${resource}`
        );
        console.log(response);
        const itemData: Item[] = response.data.map(
          (responseData: Todo | Post) => {
            return { id: responseData.id, title: responseData.title };
          }
        );
        setItems(itemData);
      } catch (err) {
        console.error(err);
      }
    };
    fetchItems();
  }, [resource]);
  const onTodoButtonClick = () => {
    setResource('todos');
  };
  const onPostButtonClick = () => {
    setResource('posts');
  };
  return (
    <div>
      <button
        onClick={() => onTodoButtonClick()}
        className="btn btn-primary mx-2"
      >
        Todos
      </button>
      <button
        onClick={() => onPostButtonClick()}
        className="btn btn-secondary mx-2"
      >
        Posts
      </button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default ItemList;

App.tsx作成

App.tsx

import React from 'react';
import './App.css';
import ItemList from './components/ItemList';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1 className="m-7 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
        Axios Tutorial
      </h1>
      <ItemList />
    </div>
  );
};

export default App;

完成系

TODOSボタンとPOSTSボタンを押すと、それぞれデータ取得が出来るようになった