[A-00245] React 1000本ノック (1)

Reactを理解するため、1000本ノックシリーズを開始しました。

実際はReactだけではなく、Next.jsやViteなど様々なReact関連のプロダクトを触っていきます。

Next.js作成コマンド

npx create-next-app@latest [projectName]

fetch APIを使う

下記のfetch関数を使って対象のURLからJSONデータを取得します。

export default async function Page() {
    const data = await fetch('https://api.vercel.app/blog');
    const posts = await data.json();

    return (
       <ul>
        {posts.map((post) => (
            <li key={post.id} >{post.title}</li>
        )
        )}
       </ul>
    );
}

Interfaceを作ってPostsを取得・表示してみる

先ほどは直接JSONの内容を表示しましたが、今度はJSONをPostインターフェースのオブジェクトに格納して表示してみる方法です。

interface Post {
    id: string;
    title: string;
    content: string;
}

export const revalidate = 3600;

export default async function Page() {
    const data = await fetch('https://api.vercel.app/blog');
    const posts: Post[] = await data.json();

    return (
        <main>
            <h1>Blog Posts</h1>
            <ul>
                {posts.map((post) => (
                    <li key={post.id} >{post.title}</li>
                ))};
            </ul>
        </main>
    );
}

useStateの使い方を学ぶ

useStateの使い方をボタンを押すと数が増えるだけのアプリで学習する。

constで２つの変数を宣言するのはcountが変数で、setCountは状態を変化させるイベントみたいな変数として捉えるとわかりやすい

'use client'

import { useState } from "react";

const Practice = () => {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(10);
    const [count3, setCount3] = useState(100);

    return (
        <>
        <p>ボタン1を{count1}回</p>
        <button onClick={() => {
            setCount1(count1 + 1);
        }}>ボタン1</button>
        <p>ボタン2を{count2}回</p>
        <button onClick={() => {
            setCount2(count2 + 10);
        }}>ボタン2</button>
        <p>ボタン3を{count3}回</p>
        <button onClick={() =>{
            setCount3(count3 + 100);
        }}>ボタン3</button>
        </>
    );
};

export default Practice;