新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 Reactを使ってみよう (02:50) 無料公開中
- 公式サイトの確認
- index.htmlの作成
- styles.cssの作成
-
#02 開発の準備を整えよう (02:24) 無料公開中
- React Developer Toolsの導入
- scriptの読み込み
-
#03 はじめてのReact (01:32) 無料公開中
- ReactDOM.render()
- 動作確認
-
#04 JSXを使ってみよう (02:40) 無料公開中
- JSX記法の特徴について
- Developer Toolsの確認
-
#05 属性やイベントを扱ってみよう (02:51)
- 属性やイベントを扱うときの注意点
- camelCase
-
#06 Componentを作ってみよう (02:37)
- Componentの作成
- Componentの再利用
- propsの利用
-
#07 Propsを使ってみよう (01:22)
- Propsの利用方法
- マークアップの整理
-
#08 スタイルを整えよう (02:40)
- Counterのスタイリング
- ブラウザでの確認
-
#09 イベントの仕組みを理解しよう (02:47)
- onClick
- 規定の動作を防ぐ方法
-
#10 Classに書き換えてみよう (01:29)
- Classでの書き換え
- 動作確認
-
#11 Stateを使ってみよう (01:29)
- constructor()
- stateの設定
-
#12 React Developer Toolsを使おう (01:57)
- React Developer Toolsの使い方
- props、stateの確認
-
#13 setStateで値を更新しよう (02:57)
- setState
- prevState
- bind
-
#14 共通要素でStateを管理しよう (02:27)
- カウント総数エリアのマークアップ
- カウント総数エリアのスタイリング
- State管理の準備
-
#15 App Componentを作ろう (02:41)
- App Componentの作成
- Stateの管理
-
#16 ループ処理でリストを描画してみよう (02:23)
- CounterListの作成
- ループ処理を行う際の注意点
-
#17 イベント処理を親要素に渡していこう (02:07)
- イベント処理を上の階層に渡す方法
-
#18 カウントアップ機能を実装しよう (02:21)
- カウントアップ処理の実装
-
#19 カウンターを完成させよう (01:58)
- 総数の更新
- 動作確認
- Componentの増やし方、編集方法
