React の基礎

ここでは実際に React を動かしながら、React の基礎について学びましょう。

尚、実験する環境は「React 版の Hello, world!」で作成したテスト用の React アプリケーションです。

• React の基本要素 〜 React 要素と ReactDOM
  • 最小の React ページの構成
  • React の基本要素 〜 React 要素
  • React 要素の画面への出力 〜 ReactDOM
• 複数の React 要素を子に持つ React 要素の作成
  • 複数の子要素を持つ React 要素の作成
  • 子要素の配列を渡して React 要素を作成する
  • map 関数を使って React 要素の配列を作成
• React の JSX とは？
  • React 要素を簡単に記述する JSX
  • JSX による React 要素の作成
  • JSX を利用するために Babel を取り込む
• React の JSX の基本的な書き方
  • 通常のHTMLタグは小文字で、ユーザー定義のReactコンポーネントは大文字始まりで書く
  • JSX 内で式として評価する箇所は { と } で囲む
  • JSX ではキャメルケースで記述する
  • JSX での文字列リテラルの書き方
  • JSX では全体をまとめる要素が必要
• React のコンポーネント
• React コンポーネントのプロパティ
• React コンポーネントのライフサイクルイベント その１
• React コンポーネントの状態とイベント処理
• React Context の使い方
  • React Context とは？
  • React Context API を使う簡単な例
  • useState フックを用いてステートにデータを置く
  • useState フックでデータを更新する Provider と Consumer を実装する
  • useContext フックで Consumer をリファクタリングする
  • カスタムフックで Context をエクスポートしないようリファクタリングする
• Synthetic イベント
• イベントプーリング
• React でフォームを使う
• マテリアルデザインライトの適用方法
• イベントによるコンポーネント間通信