Reactとは何か？

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。特に、見た目が複雑なアプリケーションを作るときにとても役立ちます。Reactを使うと、コンポーネントという小さな部品を積み重ねて、大きなアプリを作ることができます。

Propsとは？

Propsは「プロパティ」の略で、コンポーネントにデータを渡すための仕組みです。親コンポーネントから子コンポーネントにデータを送りたいときに使います。

Propsの使い方

以下の例では、親コンポーネントから子コンポーネントに名前を渡しています。

function ParentComponent() {
    return ;
}

function ChildComponent(props) {
    return 
こんにちは、{props.name}さん！
;
}

このコードでは、ParentComponentがに「太郎」という名前を渡しています。子コンポーネントでは、その名前を受け取って表示しています。

Stateとは？

Stateはコンポーネント内で管理されるデータです。ユーザーの操作によって変更されることが多いので、アプリの見た目や動きをリアルタイムで更新するのに使われます。

Stateの使い方

以下の例では、ボタンをクリックするたびにカウントが増える仕組みを紹介します。

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        

            
カウント: {count}
             setCount(count + 1)}>増やす
        
    );
}

ここでは、useStateフックを使って、カウントの値を管理しています。ボタンをクリックすると、カウントの値が1増えて、それが画面に表示されます。

PropsとStateの違い

Propsは外部からデータを受け取るために使われ、Stateはコンポーネント自身で管理するデータです。Propsは変更できない（読み取り専用）ですが、Stateは自由に変更できます。

まとめ

ReactでのPropsとStateは、データを扱う上で非常に重要な役割を果たしています。Propsを使ってコンポーネント間でデータを受け渡し、Stateを使ってコンポーネント内のデータを管理することで、より動的で複雑なアプリケーションが作れるようになります。