Einführung in Build-Tools

Einführung in Webpack

Webpack ist ein kleiner Test

Verwendung von Webpack-Konfigurationsdateien

less-loader analysiert weniger

eslint-loader-Syntaxprüfung

js-Syntaxkonvertierung

Bei Bedarf wird eine neue js-Syntax eingeführt

Der URL-Loader analysiert Bilder in Stilen

HTML-Dateien packen

Bildressourcen in HTML packen

Verpacken Sie andere Ressourcen

Automatisch kompilieren, verpacken und ausführen

HMR (Hot Mould Replacement)

Devtool-Mapping-Technologie

Bereiten Sie die Produktionsumgebung vor

Löschen Sie das Verzeichnis der gepackten Dateien

CSS in separate Dateien extrahieren

Kompatibilitätsverarbeitung von CSS-Dateien

CSS komprimieren

HTML komprimieren

Verwendung des vscode-Compilers

Einführung zum Reagieren

hallo-reagieren

Zwei Möglichkeiten zum Erstellen eines virtuellen DOM

Ein paar kleine Fragen

jsx-Syntaxregeln

Eine kleine Übung mit jsx

Zwei Möglichkeiten zum Erstellen von Komponenten

Rezension

Der Zustand der drei Hauptattribute von Komponenten

Abkürzung für Staat

Requisiten, die drei Haupteigenschaften von Komponenten

Vereinfachte Schreibmethode zur Übergabe von Tag-Attributen über Requisiten

Ref&Event-Behandlung der drei Hauptattribute von Komponenten

ref neue Syntax

Rezension

Todolist implementiert statische Komponenten

todolist zeigt Daten dynamisch an

Vollständiger Todolist

Kontrollierte und unkontrollierte Komponenten

Komponentenlebenszyklus

Rezension

Über forceUpdate und willRecriveProps

getDerivedStateFromProps

getSnapshotBeforeUpdate

Überprüfen Sie den Diff-Algorithmus

Die Funktion des Schlüssels

Laden Sie React Scaffolding herunter

Eine einfache Beschreibung des Reaktionsgerüsts

Detaillierte Beschreibung des Reaktionsgerüsts

Eine einfache Kombination von Komponenten

Kommentarfall – statische Seite

Benutzerkommentarfall – dynamische Initialisierung

Fall eines Benutzerkommentars: Kommentare hinzufügen

Benutzerbewertungsfall – Vollständige Interaktion

Benutzerrezensionen – Zweite Auflage

Axios-Übung

Einfache Übung zum Apportieren

Github-Suchfall – statische Seite

Github-Suchfall – Senden Sie eine Anfrage

Github-Suchfall – vollständige Interaktion

Rezension

Github-Suchfall – Pubsub-Version

Kommunikationsmethode zwischen Reaktionskomponenten

Einführung in das Routing

Grundlegende Routing-Nutzung

Detaillierte Beschreibung des grundlegenden Routings

Bau der Sekundärtrasse (1)

Rezension

Bau der Sekundärtrasse (2)

Routing-Komponente, die Parameter übergibt

Programmatische Routennavigation

Einfache Verwendung von antd

Rezension

Ordnereinführung – Demonstration der Projekteffekte

Überprüfen Sie Git

Auswahl der Projekttechnologie

Erstellen Sie Anwendungen mit „create-react-app“.

Konfigurieren Sie die bedarfsgesteuerte Einführung des Antd-Stils

benutzerdefiniertes AntD-Theme

Erstellen Sie Anmelde- und Admin-Routen

Statische Seite anmelden

antds Von Component-Static

Deklarative Validierung von Benutzernamen

Benutzerdefinierte Überprüfung von Passwörtern

Einheitliche Überprüfung des Anmeldeformulars

Komponenten höherer Ordnung und Funktionen höherer Ordnung

Rezension

Bereiten Sie den Redux-Zweig vor

Einführung in das Redux-Interaktionsmodell

Detaillierte Erläuterung des schematischen Redux-Diagramms

Case-React-Version

Case-Redux-No-Action-Version

Endgültige Case-Redux-Version

Einführung in React-Redux

Case-react-redux (erste Version)

Case-react-redux (Zweite Ausgabe)

Asynchrone React-Redux-Programmierung

Verwendung von Redux-Debugging-Tools

Modulare Codierung für React-Redux

Rezension

Erstellen Sie eine Redux-Entwicklungsumgebung

API-Schnittstelle und Tests

Konfigurieren Sie einen Proxy, um domänenübergreifende Probleme zu lösen

Post-Request-JSON-Format-Kodierungsparameter

Verwendung des Axios-Request-Interceptors

Verwendung des Axios Response Interceptors

Konfigurieren Sie den Basispfad des Projekts

Fortschrittsbalkeneffekt anfordern

Behandeln Sie die vom Server an die Redux-Verwaltung zurückgegebenen Benutzerinformationen

Automatische Anmeldung

Abmeldefunktion

Rezension

Decorator-Syntax

Token-Verifizierung

Gesamtaufbau des Admin-Layouts

Admin-Subrouting-Konstruktion

Statisches Header-Layout

Automatischer Sprung, wenn der Anmeldestatus abläuft

Kopfinteraktion – Vollbildumschaltung

Kopfinteraktion – Abmelden

Kopfzeitanzeige

Holen Sie sich Wetterinformationen

Wetterinformationen anzeigen

Verwendung von withRouter

Statisches Layout der linken Navigation

Linke Navigation statisch – Umschalteffekt

Generieren Sie Menüs dynamisch

Das Menü ist standardmäßig ausgewählt und wird automatisch geöffnet

Zeigen Sie den Titel in der Header-Komponente an

Verwenden Sie Redux, um Titel zu verwalten

Statische Seite zur Produktklassifizierung (1)

Statische Seite zur Produktklassifizierung (2)

Daten dynamisch initialisieren

Popup-Fenster hinzufügen und ändern

Neues Produkt hinzufügen

Produktkategorie aktualisieren

Lösen Sie das Problem der Navigations-Standardauswahl

Statische Produktmanagementseite

Anzeige der Initialisierungsliste + Paging

Status des Vorgangsprodukts

Suchanfrage senden

Implementierung einer Suchfunktion

Konstruktion von Produktdetails und geändertes Routing

Lösen Sie das Problem der Etikettenauswahl und des Titels

Produktdetails – statische Seite

Details anzeigen

Details vom Server abrufen

Produktdetails anzeigen-redux

Produktdetails anzeigen – Backend anfordern

Neue produktstatische Seite hinzufügen

Sammeln Sie einige Produktdaten

Fotowand-statisch

Laden Sie eine Datei mit der Upload-Komponente hoch

Antworten hochladen und löschen

Vollständige Upload-Funktion

Rich-Text-Editor

Komplett neues Produkt

Produktmodifikation

Einführung in das Rollenmanagement

Neue Rolle hinzufügen

Baummenü

Schließen Sie die Autorisierungsfunktion ab

Benutzerliste abrufen

Neuen Benutzer hinzufügen

Traverse-Menü – eine Array-Methode

Verwendung von Echarts