はじめてつくる React アプリ

// useState をインポートする
import { useState } from 'react'

cost Func = () => {
  // hoge が state
  // setHoge が state を操作する仕組み（慣例的に set + State名 とされる）
  // useState(） の引数が初期データ
  const [hoge, setHoge] = useState('')

  return {
    ...
    // setHoge() で state に値を書き込む（この場合、onChange 時に input の値が hoge に入る）
    <input type="text" name="hoge" onChange={e => setHoge(e.target.value)} />

    // { hoge } で state の値を読み込む（この場合、input に入力した値が表示される）
    { hoge }
    ...
  )
}

export default Func

// axios をインポート
import axios from 'axios'

const Func = () => {
  const getWeather = (e) => {
    // データを get する
    axios.get('https://api.weatherapi.com/v1/current.json?key=***')
      // get したデータを hoge() に渡す
      .then(res => hoge(res))
  }

  return (
    ...
    // onClick 時に getWeather を実行する
    <button onClick={ getWeather }>Get Weather</button>
    ...
}

export default Func

// 親

...
  const [hoge, setHoge] = useSate('')
  const getWeather = (e) => {
    axios.get('https://api.weatherapi.com/***')
      .then(res => fuga())
  ...

  return (
    ...
    // コンポーネントの属性？に渡すデータを追加する
    <Form setHoge={setHoge} getWeather={getWeather} />
    ...
  )
...

// 子

// 引数に props を追加
const Func = (props) => {
  return (
    ...
      // props.hoge で渡された props にアクセスする
      <input type="text" name="hoge" onChange={e => props.setHoge(e.target.value)} />
      <button onClick={ props.getWeather }>Get Weather</button>
    ...
  )
}

...
  // テンプレートリテラルを使用する
  //  - 引用符ではなくバッククオートで囲む ``
  //  - ${state} で state の値を呼び出す
  axios.get(`https://api.weatherapi.com/v1/current.json?key=***&q=${city}&aqi=no`)
...

import countriesJson from '../countries.json'

const Selector = () => {
  return (
    <div>
      <select>
        {
          countriesJson.map((country) => {
            console.log(country.Country)
            // ↓ return が無かった
            return <option>{country.Country}</option>
          })
        }
      </select>
    </div>
  )
}

export default Selector

  const getCountryData = () => {
    fetch(`https://example.com/${country}`)
      .then(res => res.json())
      .then(data => setCountryData({
        date: data[data.length - 1].Date,
        newConfirmed: data[data.length - 1].Confirmed - data[data.length - 2].Confirmed,
        totalConfirmed: data[data.length - 1].Confirmed,
        newRecovered: data[data.length - 1].Recovered - data[data.length - 2].Recovered,
        totalRecovered: data[data.length - 1].Recovered
      }))
  }

const getCountryData = async () => {
  const response = await fetch(`https://example.com/${country}`);
  const data = await response.json();
  const lastData = data[data.length - 1];
  const secondLastData = data[data.length - 2];
  setCountryData({
    date: lastData.Date,
    newConfirmed: lastData.Confirmed - secondLastData.Confirmed,
    totalConfirmed: lastData.Confirmed,
    newRecovered: lastData.Recovered - secondLastData.Recovered,
    totalRecovered: lastData.Recovered
  });
}

import { Route, Routes, BrowserRouter } from 'react-router-dom'
...

export default function App() {
  ...  

  return (
    <BrowserRouter>
      <Routes>
        // path: パス
        // element: 表示するコンポーネント
        <Route path="/" element={<TopPage countriesJson={countriesJson} setCountry={setCountry} getCountryData={getCountryData} countryData={countryData} />} />
        <Route path="/world" element={<WorldPage allCountriesData={allCountriesData} getAllCountriesData={getAllCountriesData} />} />
      </Routes>
    </BrowserRouter>
  )
}

// App.js
import { useState } from 'react'
...

const getAllCountiresData = () => {
  fetch('https://example.com/api/corona-tracker/summary')
    .then(res => res.json())
    .then(data => setAllCountriesData(data.Countries))
}

// Card.js
...

// button をクリックした際にデータを取得して表示
<button onClick={props.getAllCountriesData>Get All Data</button>

// App.js
import { useState, useEffect } from 'react'
...

useEffect(() => {
  fetch('https://example.com/api/corona-tracker/summary')
    .then(res => res.json())
    .then(data => setAllCountriesData(data.Countries))
}, [])

// Card.js
...

// button を削除
// <button onClick={props.getAllCountriesData>Get All Data</button>

<Link to="/">Linkt to Home</Link>

const Results = (props) => {
  return (
    <div className="results-container">
      <div>
        <p>日付： <span>{props.countryData.date.slice(0, 10)}</span></p>
        <p>新規感染者： <span>{props.countryData.newConfirmed.toLocaleString()}</span></p>
        <p>感染者総数： <span>{props.countryData.totalConfirmed.toLocaleString()}</span></p>
        <p>新規回復者： <span>{props.countryData.newRecovered.toLocaleString()}</span></p>
        <p>回復者総数： <span>{props.countryData.totalRecovered.toLocaleString()}</span></p>
      </div>
    </div>
  )
}

...

const Results = (props) => {
  const { date, newConfirmed, totalConfirmed, newRecovered, totalRecovered } = props.countryData
  return (
    <div className="results-container">
      <div>
        <p>日付： <span>{date.slice(0, 10)}</span></p>
        <p>新規感染者： <span>{newConfirmed.toLocaleString()}</span></p>
        <p>感染者総数： <span>{totalConfirmed.toLocaleString()}</span></p>
        <p>新規回復者： <span>{newRecovered.toLocaleString()}</span></p>
        <p>回復者総数： <span>{totalRecovered.toLocaleString()}</span></p>
      </div>
    </div>
  )
}

...

const Results = ({countryData}) => {
  const { date, newConfirmed, totalConfirmed, newRecovered, totalRecovered } = countryData
  return (
    <div className="results-container">
      <div>
        <p>日付： <span>{date.slice(0, 10)}</span></p>
        <p>新規感染者： <span>{newConfirmed.toLocaleString()}</span></p>
        <p>感染者総数： <span>{totalConfirmed.toLocaleString()}</span></p>
        <p>新規回復者： <span>{newRecovered.toLocaleString()}</span></p>
        <p>回復者総数： <span>{totalRecovered.toLocaleString()}</span></p>
      </div>
    </div>
  )
}

...

...

const getCountryData = () => {
  fetch(`https://example.com/api/corona-tracker/country/${country}`)
    .then(res => res.json())
    .then(data => setCountryData({
      date: data[data.length - 1].Date,
      ...
    }))
    // 追加）
    // fetch が失敗した場合、アラートを表示する
    .catch(err => alert('エラーが発生しました。ページをリロードして、もう一度トライしてください。'))
}

...

// App.jsx
...

export default function App() {
  // loading 中を判定するための state を追加
  const [loading, setLoading] = useState(false)
  ...

  const getCountryData = () => {
    // 読み込みを開始する際に true にする
    setLoading(true)
    fetch(`https://example.com/${country}`)
      .then(res => res.json())
      .then(data => {
        setCountryData({
          ...
        })
        // 読み込みが成功したら false にする
        setLoading(false)
      })
  }

  ...

  return (
    <BrowserRouter>
      <Routes>
        // 表示するコンポーネントに state を追加
        <Route path="/" element={<TopPage countriesJson={countriesJson} setCountry={setCountry} getCountryData={getCountryData} countryData={countryData} loading={loading} />} />
      </Routes>
    </BrowserRouter>
  )
}

// TopPage.jsx
...
    // 表示するコンポーネントに state を追加
    <Results countryData={countryData} loading={loading} />
...

// Results.jsx
...

const Results = ({ countryData, loading }) => {
    return (
      {loading ?
        // 読み込み中に表示する
        <Loading />
      :
        // 読み込み前後に表示する
        <div>
          ...
        </div>
      }
    </div>
  )
}

...

export default function App() {
  // 初期値 japan を設定する
  const [country, setCountry] = useState('japan')
  ...

  useEffect(() => {
    // データを取得する関数を useEffect に移動する
    const getCountryData = () => {
      setLoading(true)
      fetch(`https://example.com/api/corona-tracker/country/${country}`)
      ...
    }
    // 関数を実行する
    getCountryData()
  }, [country])  // country state が更新されたら実行するように設定する