ステップ 4：フォローの切り替え

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 42/42。

チャレンジ

中級

プロフィールカードを完成させましょう。

ProfileCard にブール型の state following（初期値は false）を追加します。
クリック時にそれを切り替える id="follow" のボタンを追加します。
ボタンのラベルは、true のときは Following、false のときは Follow にします。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

基本概念のすべてのレッスン

1Reactの概要

Reactとは？最初のコンポーネント 1つの親要素のルール JSXはHTMLではないまとめ：Reactの概要

4Props

Propsとは？Propsの渡しかた 2つのProps 同じコンポーネント、新しいデータ Children Prop まとめ：Props

7条件分岐とリスト

三項演算子によるレンダリング && を使った表示リストのレンダリング Key（キー）の重要性 Filter（抽出）してから Map（変換）まとめ：条件分岐とリスト

2JSX式

波括弧（カーリーブレース）波括弧内での演算属性での波括弧の使用 JSX内での関数呼び出しまとめ：JSX式

5ステートとイベント

ステートとは？クリックカウンターステップ単位のカウントステートによる切り替え独立したステートまとめ：ステートとイベント

8プロジェクト：プロフィールカード

ステップ 1：カードの構造ステップ 2：Propsを使ったカードステップ 3：いいねボタンステップ 4：フォローの切り替え

3コンポーネント

ビルディングブロック（基本要素）2つ目のコンポーネントコンポーネントの再利用ページの構成まとめ：コンポーネント

6フォームと入力

制御された入力（Controlled Inputs）入力の反響（Echo）文字数カウンタークリアボタンまとめ：フォームと入力