Reactに入門する #1

前提条件

Node.jsがインストールされていること

node -v
#16.17.0と表示される

Reactセットアップ

npx create-react-app --template typescript myapp
# myappフォルダが生成される
cd myapp
npm start
# localhost:3000でアプリが動くことを確認

掃除

# いらないファイル削除していく
rm src/logo.svg 
rm src/setupTests.ts 
rm src/App.test.tsx 

いらないファイルを削除したエラーを取り除くためApp.tsxを修正する。

App.tsx

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header"></header>
    </div>
  );
}

export default App;

データ取得準備

TMDBでアカウント登録する。

その後、API KEYを取得する。

データ取得部分実装

ファイル準備して、ライブラリもインストールする

touch src/axios.js
touch src/request.js
npm i aixos

実装する

axios.js

import axios from "axios";

const instance = axios.create({
  baseURL: "https://api.themoviedb.org/3",
});

export default instance;

request.js

const API_KEY = "XXX"; #取得したAPI KEYを設定

export const requests = {
  feachTrending: `/trending/all/week?api_key=${API_KEY}&language=en-us`,
  feachNetflixOriginals: `/discover/tv?api_key=${API_KEY}&with_networks=213`,
  feactTopRated: `/discover/tv?api_key=${API_KEY}&languager=en-us`,
  feactActionMovies: `/discover/tv?api_key=${API_KEY}&with_genres=28`,
  feactComedyMovies: `/discover/tv?api_key=${API_KEY}&with_genres=35`,
  feactHorrorMovies: `/discover/tv?api_key=${API_KEY}&with_genres=27`,
  feactRomanceMovies: `/discover/tv?api_key=${API_KEY}&with_genres=10749`,
  feactDocumentMovies: `/discover/tv?api_key=${API_KEY}&with_genres=99`,
};

Reactコンポーネントを準備してデータ取得をテスト

コンポーネントファイルを準備する

mkdir src/components
touch src/components/Row.tsx

実装する

src/components/Row.tsx

import React, { useState, useEffect } from "react";
import axios from "../axios";

const base_url = "https://image.tmdb.org/t/p/original";

type Props = {
  title: string;
  fetchUrl: string;
  isLargeRow?: boolean;
};

type Movie = {
  id: string;
  name: string;
  title: string;
  original_name: string;
  poster_path: string;
  backdrop_path: string;
};

export const Row = ({ title, fetchUrl, isLargeRow }: Props) => {
  const [movies, setMovies] = useState<Movie[]>([]);

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(fetchUrl);
      setMovies(request.data.results);
      return request;
    }
    fetchData();
  }, [fetchUrl]);

  return (
    <div className="Row">
      <h2>{title}</h2>
      {movies.map((movie, i) => (
        <img
          width="70"
          key={movie.id}
          src={`${base_url}${movie.poster_path}`}
          alt={movie.name}
        />
      ))}
    </div>
  );
};

APIから取得したデータが表示されるか実行してみる

npm start

うまくいくとこんな感じに表示される