React.js eLearning

React.js eLearning

Programmübersicht:

Dieser React.js-Kurs ist für Anfänger konzipiert, die eine solide Grundlage in der Entwicklung moderner Webanwendungen mit React.js, einer der beliebtesten JavaScript-Bibliotheken, aufbauen möchten. Dieser Kurs vermittelt den Lernenden die grundlegenden Fähigkeiten und das Wissen, um dynamische, interaktive und responsive Benutzeroberflächen effizient zu erstellen.

Programmfunktionen:

• Kurs und Material sind auf Englisch.
• Anfänger - Fortgeschrittene für angehende Softwareentwickler
• 1 Jahr Zugang zur selbstgesteuerten Lernplattform 24/7
• 14 Stunden Videoinhalt
• 50 Stunden Lernzeit empfohlen
• MEAN Stack virtuelles Labor enthalten
• 2 Abschlussprojektkurs
• Keine Prüfung für den Kurs, aber der Student erhält eine Zertifizierung über den Abschluss der Schulung.

Wichtige Lernergebnisse:

• Wissen, wie man erstaunliche Single-Page-Anwendungen mit React und Redux erstellt.
• Lernen und anwenden grundlegender Konzepte zur Strukturierung von Redux-Anwendungen
• Erkenne und schätze die Kraft des Aufbaus von komponierbaren Komponenten.
• Verstehen und verwenden Sie NPM, Babel und ES6-JavaScript-Syntax.

Zielgruppe:

Dieser React.js-Zertifizierungskurs ist für Webentwickler konzipiert, die UI/UX-Lösungen für mobile und Web-Apps entwerfen und erstellen und mit React so effizient wie möglich unter Verwendung einer JavaScript-Bibliothek gestalten möchten.

• Webentwickler
• Webdesigner
• Full-Stack-Entwickler
• Mobiler Entwickler

Voraussetzungen:

Für diesen Kurs müssen Sie Erfahrung im Erstellen von Front-End-Webanwendungen mit HTML, CSS und JavaScript haben.

Kursinhalt

Kurs Einführung

• Was ist React?
• Die Umgebung einrichten

Starten (GitHub Finder) und Einrichten React

• Projektvorstellung
• Erstellen einer React-Anwendung und Anzeigen der Dateistruktur
• Create React App (CRA) Aufräumen und Vorbereitung
• Einführung in die JavaScript-Syntaxerweiterung (JSX) und Fragmente
• Ausdrücke und Bedingungen in JSX

Komponenten Zustände und Eigenschaften

• Listen und das Übergeben eines Zustands mit Props
• Statuslose Funktionskomponenten
• Verarbeiten von HTTP-Anfragen und Aktualisieren von Zuständen
• Spinner-Komponente und Refaktorisierung
• Umgebungsvariablen

Ereignisübergabe von Props React Router und mehr

• Ereignisse und Suchkomponenten
• Props weitergeben und Benutzer suchen
• Benutzer aus Ihrem Zustand entfernen
• Einrichten des Alarmzustands und der Komponente
• Einrichten eines React-Routers
• Hinzufügen einer einzelnen Benutzerkomponente und Daten
• Erstellen einer Benutzerkomponente UI und Layout
• Repos und die Repoitem-Komponente

Refactoring Hooks und Context-API

• Überblick über Hooks und Context API
• Verwendung einer Suchklasse in Verbindung mit dem useState-Hook
• Verwendung einer User-Klasse zur Funktion mit dem useEffect-Hook
• App-Klassenfunktionskomponente
• Implementierung der Context-API und Verwendung des Reducers
• Reducer erstellen
• Benutzerdaten in die Context-API verschieben
• Verschieben des Repos-Zustands in die Context-API
• Erstellen des Alarm-Kontext-Workflows
• Erstellen der Home- und NotFound-Komponenten
• Vorbereiten und Bereitstellen auf Netlify

Mongo DB Express React und Node (MERN)

• Einrichten von MongoDB Atlas
• Erstellen von Abhängigkeiten und einem grundlegenden Express-Server
• Einrichten von Backend-Routen
• Verbindung von MongoDB mit der Anwendung

Backend-Benutzerkontakte und JSON-Web-Token-Authentifizierung

• Benutzermodell und Validierung
• Passwörter hashen und Routen registrieren
• Erstellen und Antworten mit einem JSON-Web-Token
• Erstellen einer Authentifizierungsroute
• Authentifizierungs-Middleware und Schutz von Routen
• Erstellen eines Kontaktmodells und Abrufen der Kontakte-Route
• Hinzufügen einer Kontaktroute
• Kontakte aktualisieren und Routen löschen

Einrichten Ihrer Kunden und Kontakte Benutzeroberfläche

• Einrichten von React und Concurrently
• Einrichten der Bereinigung, der Navbar und eines Routers
• Erstellen von Kontakten, Kontext und einem globalen Zustand
• Erstellen der Kontakte- und Kontaktitem-Komponenten
• Einen Kontakt aus der Benutzeroberfläche löschen
• Aktuelle Kontakte einstellen und löschen
• Aktionen zum Bearbeiten und Aktualisieren von Kontakten hinzufügen
• Erstellen eines Kontaktfilterformulars und -status
• Erstellen einer grundlegenden Hinzufügen- und Löschen-Animation

React- oder Express-Authentifizierung

• Erstellen des Authentifizierungskontexts und des Anfangszustands
• Erstellen von Registrierungs- und Anmeldeformularen
• Erstellen von Alarm-Kontexten, Zuständen und Komponenten
• Erstellen eines Benutzerregistrierungsformulars
• Laden eines Benutzers und Festlegen eines Tokens
• Benutzeranmeldung erstellen
• Erstellen der Logout- und Navbar-Komponenten
• Erstellen der PrivateRoute-Komponente

Integration und Bereitstellung der Kontakte-API

• Hinzufügen von Kontakten zur Datenbank
• Kontakte abrufen und löschen
• Kontakte löschen
• Kontakte aktualisieren
• Vorbereiten und Bereitstellen auf Heroku

Starte IT Logger (Redux) Komponenten und UI

• Einrichten von React und JSON
• Einrichten von Materialize CSS
• Erstellen der Suchleiste und der Protokollkomponenten
• Erstellen der Logitem- und Preloader-Komponenten
• Erstellen der AddBtn- und AddLogModal-Komponenten
• Hinzufügen der Edit- und Tech-Modal-Komponenten

Redux-Zustandsverwaltung

• Einrichten des Redux-Stores und -Providers
• Einrichten von Logs Reducer, Aktionen und Typen
• Redux mit einer Komponente verbinden
• Hinzufügen, Löschen, Aktualisieren, Suchen von Protokollen

Technikerstaat und seine Komponenten

• Techs-Reducer, Aktionen und Komponenten
• Verwendung der Auswahlkomponente
• Techniker hinzufügen
• Techniker löschen

Kursabschlussprojekt:

• Eine Event-Finder-App in React erstellen

Erstellen Sie eine React-App, in der Benutzer bevorstehende Veranstaltungen anzeigen und bewerben können, richten Sie einen JSON-Server zum Testen ein, bis die Backend-APIs bereit sind, und verwalten Sie schließlich den Zustand mit Redux.

• Pokémon-Suchanwendung

Im Pokémon-Universum, wo der Benutzer nach verschiedenen Pokémon suchen können sollte, müssen Sie eine Anwendung erstellen, um sie mit den folgenden Funktionen zu suchen:

Die Pokémon-Anwendung sollte eine Liste der Pokémon-Details enthalten, die in Form von JSON-Daten bereitgestellt werden, d.h. sie sollte Name, Bild, KP, Angriff, Verteidigungsart usw. enthalten.
Es sollte eine Suchleiste haben, damit der Benutzer die Pokémon nach ihrem Namen suchen kann. Da wir viele Pokémon haben, wenden Sie die Paginierung an, damit der Benutzer immer nur 10 Pokémon auf einmal sehen kann.