React 入門
目次
- Node.js のインストール (+ 展開)
- Python Django によるバックエンド API サーバの準備 (+ 展開)
-
JavaScript コメント掲示板アプリの開発
(+ 展開)
- プロジェクトの概要
- プロジェクトの作成
- 不要コードを一旦削除
- 見出しと箇条書きを表示してみる
- CommentListPage コンポーネントの作成
- コメントダミーデータを設定する
- コメントの一覧(ダミーデータ)を表示してみる
- Comment コンポーネントの作成
- コメントの一覧表示とスタイリング
- CreateForm コンポーネントの雛形を作る
- State と useState
- コメント投稿機能の実装
- コメント削除機能の実装
- WebStorage の利用
- ダミーデータの変更と状態確認
- fetch による API からのデータ取得と useEffect
- Axios による API からのデータ取得
- コメント総数とページ切り替えボタンの表示
- ボタンクリックを処理して表示内容を更新する
- ボタンの有効化/無効化の切り替え
- HTML タグのエスケープ処理
- 新規投稿で API に POST
- 投稿エラー時の処理
- 新規投稿時に API でスリープさせる
- 削除で API に DELETE を送信
- ルーティング
- リンクの作成と useParams
- コメント詳細情報を表示する
- コメント一覧へ戻るボタンの設置
- コメント編集機能の実装
- 無限スクロールの実装
- 404 Not Found エラーページの変更
- プログラムの全体像
-
TypeScript コメント掲示板アプリの開発
(+ 展開)
- プロジェクトの概要
- プロジェクトの作成
- 不要コードを一旦削除
- 見出しと箇条書きを表示してみる
- CommentListPage コンポーネントの作成
- コメントダミーデータを設定する
- コメントの一覧(ダミーデータ)を表示してみる
- Comment コンポーネントの作成
- コメントの一覧表示とスタイリング
- CreateForm コンポーネントの雛形を作る
- State と useState
- コメント投稿機能の実装
- コメント削除機能の実装
- WebStorage の利用
- ダミーデータの変更と状態確認
- fetch による API からのデータ取得と useEffect
- Axios による API からのデータ取得
- コメント総数とページ切り替えボタンの表示
- ボタンクリックを処理して表示内容を更新する
- ボタンの有効化/無効化の切り替え
- HTML タグのエスケープ処理
- 新規投稿で API に POST
- 投稿エラー時の処理
- 新規投稿時に API でスリープさせる
- 削除で API に DELETE を送信
- ルーティング
- リンクの作成と useParams
- コメント詳細情報を表示する
- コメント一覧へ戻るボタンの設置
- コメント編集機能の実装
- 無限スクロールの実装
- 404 Not Found エラーページの変更
- プログラムの全体像