ビルドツールの紹介

Webpack の概要

Webpack は小さなテストです

Webpack 設定ファイルの使用

ローダーの解析が少なくなる

eslint-loader の構文チェック

js構文変換

新しい js 構文がオンデマンドで導入されます

url-loader はスタイル内の画像を解析します

htmlファイルをパッケージ化する

画像リソースを HTML にパッケージ化する

他のリソースをパッケージ化する

自動的にコンパイル、パッケージ化、実行します

HMR (ホットモールド交換)

devtool マッピング テクノロジ

本番環境を準備する

パッケージ化されたファイルのディレクトリをクリアする

CSSを別のファイルに抽出する

CSSファイルの互換処理

CSSを圧縮する

HTMLを圧縮する

vscodeコンパイラの使用

リアクションの紹介

hello-react

仮想 DOM を作成する 2 つの方法

いくつかの小さな質問

jsx構文規則

jsx での小さな練習

コンポーネントを作成する 2 つの方法

レビュー

コンポーネントの 3 つの主要な属性の状態

州の略語

props、コンポーネントの 3 つの主要なプロパティ

propsを介してタグ属性を渡す簡略化された記述方法

コンポーネントの 3 つの主要な属性の ref&event 処理

ref 新しい構文

レビュー

todolist は静的コンポーネントを実装します

todolist はデータを動的に表示します

完全な todolist

制御されたコンポーネントと制御されていないコンポーネント

コンポーネントのライフサイクル

レビュー

forceUpdate と willRecriveProps について

getDerivedStateFromProps

getSnapshotBeforeUpdate

差分アルゴリズムを検証する

キーの機能

反応足場をダウンロード

React Scaffolding の簡単な説明

反応スキャフォールディングの詳細な説明

コンポーネントのシンプルな組み合わせ

コメントケース - 静的ページ

ユーザーコメントの場合 - 動的初期化

ユーザー コメント ケース - コメントを追加する

ユーザーレビューケース - 完全なインタラクション

ユーザーレビュー - 第 2 版

アクシオス演習

フェッチの簡単な練習

Github 検索ケース - 静的ページ

github 検索ケース - リクエストを送信する

github 検索ケース - 完全なインタラクション

レビュー

github 検索ケース - pubsub バージョン

Reactコンポーネント間の通信方法

ルーティングの概要

基本的なルーティングの使用法

基本的なルーティングの詳細な説明

二次ルーティングの構築(1)

レビュー

二次ルーティングの構築(2)

パラメータを渡すルーティングコンポーネント

プログラムによるルートナビゲーション

antdの簡単な使い方

レビュー

フォルダーの紹介 - プロジェクト効果のデモンストレーション

git を確認する

プロジェクト技術の選定

create-react-app を使用してアプリケーションを構築する

antd スタイルのオンデマンド導入を構成する

antdカスタムテーマ

ログインルートと管理ルートを構築する

静的ページにログインする

antd の From コンポーネント-静的

ユーザー名の宣言的検証

パスワードのカスタム検証

ログインフォームの統一認証

高次成分と高次関数

レビュー

Reduxブランチを準備する

Redux インタラクション モデルの概要

redux概略図の詳細説明

Case-React バージョン

Case-redux-no-action バージョン

Case-redux 最終バージョン

反応 Redux の概要

Case-react-redux (最初のバージョン)

Case-react-redux (第 2 版)

反応 Redux 非同期プログラミング

Reduxデバッグツールの使用

React-redux のモジュールコーディング

レビュー

Redux開発環境を構築する

APIインターフェースとテスト

クロスドメインの問題を解決するためにプロキシを構成する

postリクエストのjson形式のエンコードパラメータ

axios リクエスト インターセプターの使用

axios レスポンス インターセプターの使用

プロジェクトのベースパスを構成する

プログレスバー効果のリクエスト

サーバーから redux 管理に返されたユーザー情報を処理します。

自動ログイン

ログアウト機能

レビュー

デコレータの構文

トークンの検証

管理者全体のレイアウト構築

管理サブルーティングの構築

ヘッダーの静的レイアウト

ログインステータスの有効期限が切れた場合の自動ジャンプ

ヘッドインタラクション - 全画面切り替え

ヘッドインタラクション - ログアウト

ヘッドタイム表示

気象情報を取得する

天気情報を表示する

withRouterの使用

左側のナビゲーションの静的レイアウト

左ナビゲーションの静的 - 切り替え効果

メニューを動的に生成する

メニューはデフォルトで選択され、自動的に開きます

ヘッダーコンポーネントにタイトルを表示する

redux を使用してタイトルを管理する

製品分類固定ページ (1)

製品分類固定ページ (2)

データを動的に初期化する

ポップアップウィンドウの追加と変更

新しい商品を追加

製品カテゴリーを更新

ナビゲーションのデフォルト選択の問題を解決する

製品管理の静的ページ

初期化リスト表示＋ページング

操作項目のステータス

検索リクエストを送信する

検索機能の実装

製品詳細の構築と変更されたルーティング

ラベル選択とタイトルの問題を解決する

製品詳細 - 固定ページ

詳細を表示

サーバーから詳細を取得する

製品詳細の表示-redux

製品詳細の表示 - リクエスト バックエンド

新しい製品の追加 - 静的ページ

製品データを収集する

写真壁掛け静的

アップロード コンポーネントを使用してファイルをアップロードする

回答のアップロードと削除

充実したアップロード機能

リッチテキストエディター

完成した新製品

製品の改造

役割管理の概要

新しい役割を追加する

ツリーメニュー

認可機能を完了する

ユーザーリストを取得する

新しい利用者

メニューのトラバース - 配列のメソッド

eチャートの使用