## 課題
ボタンとテキスト段落を含むコンポーネントの作成。`useState`フックを使用して、ボタンがクリックされたときにテキスト段落の表示・非表示を切り替えるためのロジックの実装。

## 手順
1. Reactライブラリから`useState`フックをインポート。
2. `isVisible`フックを使い、`useState`という名前の状態変数を宣言。初期値は`false`。
3. `toggleVisibility`という関数を実装し、呼び出されたときに`isVisible`の状態を`true`と`false`で切り替える。
4. ボタンの`toggleVisibility`ハンドラーとして`onClick`関数を使用。

1. 適切なフックをReactライブラリからインポートするための`import`文の記述。
2. この課題では、段落の表示状態を管理するために`useState`フックを利用。
3. 状態の変数名を決定する際は、状態を設定する関数`setIsVisible`を参照し、"set"の接頭辞を外して先頭を小文字にした`isVisible`を使用。
4. ボタンがクリックされたときに`toggleVisibility`関数を呼び出すには、ボタンの`onClick`属性の値としてこの関数を指定。

Reactを使用したユーザーインターフェース構築の基礎を学びます。コンポーネント、JSX、データフロー、状態管理、日常的なReactアプリケーションで使用される副作用に焦点を当てます。

Reactとは何か、そしてどのようにユーザーインターフェースをレンダリングするかを学びます。コンポーネント、JSX構文、画面上への要素の表示に焦点を当てます。

関数コンポーネントで状態を管理するために使用されるフックはどれですか？

`useEffect`フックは、依存配列がない場合、デフォルトでいつ実行されますか？

コンポーネント間でデータを渡し、UI出力を制御する方法を学びます。props、条件付きレンダリング、データリストのレンダリングに焦点を当てます。

ユーザーの操作や外部データが時間の経過とともにUIをどのように変化させるかを学びます。Reactフックを使用した状態管理と副作用の処理に焦点を当てます。

Reactコンポーネントをスタイリングする一般的な方法を学びます。インラインスタイルと外部CSSを使用したスタイルの適用に焦点を当てます。

Reactプロジェクトの実行方法とその構造について学びます。Viteを使用したプロジェクトの開始と、プロジェクトファイルのナビゲーションに焦点を当てます。

チャレンジ：状態で表示・非表示を切り替える

課題

手順