Tortoise Shell

デザイン、システム開発、ライフハックについてゆるく書きます

Reactのチュートリアルで遊ぶ

特に予定がなかったのと、何となく React に入門したくなったので、チュートリアルをやってみることにした。

まずは、公式チュートリアルをやることにした。三目並べゲーム(tic-tac-toe)を作りながら React を学べる。

ちなみに、三目並べというゲームは初めて知った。CodePenを使って、ブラウザ上で進めていけるのでスムーズだった。

ja.reactjs.org

次に、犬画像ギャラリーのチュートリアルを見つけたので、今後はローカルで進めてみた。こちらは、日本大学文理学部情報科学科の教材とのことで、とても分かりやすかった。

zenn.dev

ざっくりコンポーネントの概念と、JSX、props、stateについて作りながら学べたので、やって良かったなと思った。

わたしのポートフォリオサイトは Nuxt.js で作っているが、そのうち Next.js で置き換えてみたくなった。

Dog API から犬の画像を取ってきて表示させる、というのをやって、こんなにかわいい API があったとは知らなかった。

dog.ceo

チュートリアルだと柴犬と秋田犬だったが、エンドポイントを変えるだけで犬種が指定できる仕様だったので、コーギーも入れてみた。かわいい。

f:id:tamusan100:20220319190505p:plain

もう何個かチュートリアルをやって、React の感覚が掴めたら、Next.js に入門しよう。