React ハンズオンの企画
もとは、あまり React を触ったことのない方へ向け教育用リポジトリを作成しました。
今回は、プロジェクトに限り知見を発信させていただいております。
詳細は下記ウェブサイトを見ていただきます。
そもそも React で Hooks を使って書くのが今の流行りで、コンポーネントを書く際、クラスコンポーネントと関数コンポーネントに分けられる。
今回扱った教材の Hooks API は後者の範疇に入る。
Hooks 導入以前まで、関数コンポーネントに state を持たせられなかった代わりに state を持たせるためクラスコンポーネントを実装する他なかった。
関数コンポーネントを使うべき理由
主な理由を下記の通り。クラスコンポーネントでは this
を用いて state を参照しなければいけず、更新する際も state に this
を用いて参照しなければいけない。
this
を使う必要が無くなる- メソッドを bind する必要が無くなる
- 初期化する
constructor
を書く必要が無くなる
クラスコンポーネント
クラスコンポーネントの例。
class Example extends React.Component {
constructor(props) {
super(props)
this.state = { count: 0 }
this.handleCount = this.handleCount.bind(this)
}
handleClick() {
this.setState({ count: this.state.count + 1 })
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.handleClick}>+1</button>
</div>
)
}
}
関数コンポーネント
関数コンポーネントの例。
const Example = () => {
const [count, setCount] = React.useState < number > 0
function handleClick() {
setCount(() => count + 1)
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>+1</button>
</div>
)
}
今回のゴールである Pokemon API をフェッチして Vercel へのデプロイを果たした。
今回はフェッチと検索を扱う
目標を Hooks API をベースとした Web アプリケーションを作ることとした。今回のターゲットを考慮して、フレームワーク Next.js を一切使わない選択をとった。
その目標を達成するため複数の技術的なマイルストーンを合わせ準備している。
useSWR
を利用して API をフェッチするuseState
を利用した状態管理useMemo
を利用した再描画の仕組み
今回は状態管理やユニットテストを扱っていない。次回以降、この辺りを中心にテーマを選定したい (ご気軽に Issue や PR ください)
useEffect
も存在する
状態管理で別の手段 API のフェッチを useEffect
で行い state を useState
で管理する方法も存在する。
const [pokemonData, setPokemonData] = React.useState<Array<{ name: string; url: string }>>()
React.useEffect(() => {
const data = fetch(`https://pokeapi.co/api/v2/pokemon?limit=200&offset=200`)
setPokemonData(data.results)
}, [])
{/*読み込み中*/}
if (!pokemonData) return <div>Loading..</div>
{/*読み込みに成功した*/}
return (
<React.Fragment>
{pokemonData?.map((pokemon: { name: string; url: string }) => (
<div key={pokemon.name}>
{pokemon.name}
</div>
))}
</React.Fragment>
)
useSWR
を使うか useEffect
を使うのは各プロジェクトの設計方針により決定しましょう。