「Reactハンズオンラーニング」の感想・備忘録5

Reactハンズオンラーニング第2版

posted with ヨメレバ

Alex Banks/Eve Porcello オライリー・ジャパン 2021年08月06日頃

楽天ブックスで見る

Amazonで見る

Kindleで見る

データ

データ

8.2 データの送信

const [text, setText] = useState("")
const handleClick = () => {
  fetch("./hoge", {
    method: "POST",
    body: JSON.stringify({text})
  })
}
// 〜省略〜
<input type="text" value={text} onChange={e=>setText(e.target.value)}/>
<button onClick={handleClick}>送信</button>

ファイルアップロード

const [file, setFile] = useState(null)
const handleClick2 = (e) => {
  const formData = new FormData()
  formData.append("file", file)
  fetch("./hoge", {
    method: "POST",
    body: formData
  })
}
// 〜省略〜
<input type="file" onChange={e=>setFile(e.target.files[0])} />
<button onClick={handleClick2}>ファイル送信</button>

8.2.2 リクエストの認証

トークンが要求されるAPIは、以下のようにAuthorizationヘッダを付加する。

fetch("./hoge", {
  method: "GET",
  headers: {Authorization: `Bearer ${token}`}
})

Githubからリポジトリ一覧を取得するサンプル

GithubのSetteings⇒Developer Settingsでトークンを作成しスコープのrepoをチェックしておく

const handleClick = () => {
  fetch("https://api.github.com/user/repos", {
      method: "GET",
      headers: {Authorization: `token ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`}
    })
    .then(response=>response.json())
    .then(console.log)
}

8.3 データの保存

localStorage.setItem("xxx", JSON.stringify(data))
JSON.parse(localStorage.getIem("xxx"))
// セッションの間だけの場合はsessionStorage

8.4.2 仮想リスト

大量のデータを表示する際、スクロールする度に表示しているリストをアンマウントして新たなリストを描画するテクニックを仮想リストまたはウィンドウリストと呼ぶ。
例えば、11件だけ読み込んで画面には5件表示し、上下に3件ずつ非表示のデータを描画する。
有名なライブラリとしてreact-windowがある。

react-windowの使い方

npm install react-windowでインストール
レンダープロップ関数(JSXを返す関数)をタグボディにして、FixedSizeListタグで囲む
レンダープロップ関数の第2引数で受け取ったstyleをルート要素にのstyle属性にセットする（これにより高さがセットされる）

import {faker} from "@faker-js/faker"
import {FixedSizeList} from "react-window"

const users = [...Array(1000)].map((_, index) => ({
  id: index + 1,
  name: faker.person.fullName(),
  email: faker.internet.email(),
  avatar: faker.internet.avatar()
}))

function FakerSample() {
  const renderRow = ({index, style}) => (
    <div key={users[index].id} style={{...style, display: "flex"}}>
      <img src={users[index].avatar} width={128} style={{marginBottom: "10px"}}/>
      <div><h2>{users[index].id}: {users[index].name}</h2><h3>{users[index].email}</h3></div>
    </div>
  )
  return (
    <FixedSizeList height={window.innerHeight} width={window.innerWidth-20} itemCount={users.length} itemSize={120}>
      {renderRow}
    </FixedSizeList>
  );
}

export default FakerSample;