なぜstateが必要か
画面を変えるには state が要る有料プラン
Reactで状態・フォーム・リストを扱う
useState、イベントハンドラ、制御されたinput、フォーム送信とバリデーション、mapによるリスト表示、key、条件レンダリング、空状態を扱う全25レッスンのコースです。入力・絞り込み・ダークモードへ反応する作品ギャラリーを作り、ユーザー操作で変化するUIの基本を身につけます。
レッスン
25件
所要時間
約6.5時間
ランク
初級
最初のレッスンを読む
15分・登録なしで読めます
動く図解・なぜstateが必要か
動く図解・なぜstateが必要か
目標
入力フォーム、絞り込み、ダークモードを備えたインタラクティブな作品ギャラリーを作る
できるようになること
useStateで文字列・オブジェクト・配列の状態を更新できる
フォーム入力と送信を制御し、入力値を検証できる
リスト・条件分岐・空状態をReactで表現できる
前提知識・必要な環境
必須
- • React入門：JSX・コンポーネント・props 修了相当
環境
ブラウザ完結（インストール不要）
このコースに入っているもの
触れる図解
18本
導入スライド
95枚
手を動かす演習
22問
理解度クイズ
3問
監修
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
値が変わったら画面も変わる仕組みを、useStateで手に入れます。
ユーザーの操作を受け取り、入力欄をstateと同期させます。
データから一覧を生成し、状況に応じて表示を出し分けます。
このコースを終えると取れるバッジ
React 第7コース
0 / 25 レッスン
このコースの動く図解
動かしながら、仕組みや変化を目で確かめられます。
次に学ぶなら
このコースを終えたあとに進むと、無理なく続けられます
