クイックスタート
このページでは、クイックスタートの内容を進めていきましょう。
理解度チェック
学んだことを思い出しながら、折りたたみを展開して書かれているキーポイントが自分の理解と合っているか確認しましょう。
コンポーネントの書き方
コンポーネントはJavaScript関数として記述します。
コンポーネントの呼び出し方
コンポーネントはJSXでは <MyButton /> <MyButton></MyButton> のような、大文字から始まるタグで記述します。
JSXでのHTML要素の書き方
HTMLのように書けますが、次の違いがあります:
- タグは必ず閉じる
- 一番外側の要素は
<></>などで必ずひとつにする - 属性名が違う場合がある
スタイルの付け方
className (HTMLのclass属性) にCSSクラスを指定します。
データの表示
JSXでは {} (波括弧) の中に JavaScript を書いて値を渡します。属性に {} (波括弧) で値を渡すこともできます。
条件付きレンダー
次のような方法があります:
let変数に if 文を使ってJSXを代入する- 条件
?演算子を使ってJSXの中で条件分岐する - 論理
&&構文を使ってJSXの中で真のときだけ表示する
リストのレンダー
for ループや配列の map() 関数といったJavaScriptの機能を使います。ただし、key 属性の指定が必要です。
イベントに応答する方法
イベントハンドラ関数を宣言します。ただし、イベントハンドラ関数の呼び出しはReactがおこなう (onClick に渡せば click イベントが発生した時に呼び出されます) ので、渡すだけです (() はつけません)。
画面を更新する方法
useState 関数を使います。[値, 更新関数] = useState(初期値) のように引数と返り値が対応します。state の値を表示することで、更新関数で値を更新した時に画面が更新されます。
フックとは何か
フックとは、次の関数です:
- 関数名が
useで始まります - Reactが提供する組み込みフックがあります
- 独自のフック（カスタムフック）を作ることもできます
- フックはコンポーネントのトップレベルでのみ呼び出すことができます (条件分岐や繰り返しの中では呼び出せません)
- 条件分岐や繰り返しの中でフックを呼び出したいときは、別のコンポーネントにして呼び出します
コンポーネント間でデータを共有する方法
コンポーネント間でのデータを共有は、次のようにおこないます:
- props として同じ値を渡すことで共有できます
- 値を useState フックで作成すれば、値を更新できます
- useState の更新関数も props として渡せば、コンポーネントをまたいで値を更新できます（state のリフトアップ）