Beschreibung
React und Next.js - Komplett
Zielgruppe: Nur für Unternehmen und Institutionen.React ist die Bibliothek schlechthin, um Web-User-Interfaces auf Basis von JavaScript bzw. Typescript zu erstellen. Die State- und Komponenten-basierte Architektur ermöglicht das Umsetzen komplexer Anwendungen für den Browser in einer tragfähiger Architektur. Next.js bringt die Funktionalität von React auch ins Backend und ermöglicht dort z.B. Pre-Rendering statischer und dynamischer Seiten, eine direkte Datenbankanbindung oder API-Abfragen, sowie ein einfach umzusetzendes Routing-Konzept ohne umständliche Konfigurationen. Die Kombination von React und Next.js bildet einen neuen universellen Stack, der sowohl Front-End als auch Back-End einschließen kann.
Diese Schulung legt in einem praktischen Workshop über Komponenten, `states`, `props` und JSX die Grundpfeiler für die Entwicklung in React. Anschließend vervollständigt Next.js das Projekt zur `fullstack`-Entwicklung um serverseitig ausgeführte Komponenten und Logiken - von interaktiven Apps bis zu statischen Websites. Es werden Best Practices zum `lifecycle`und zu `hooks` erklärt. Styling, API-Kommunikation oder Formular-Validierung werden ebenso eingeführt, wie wichigte Tools zur Entwicklung.
Im zweiten Teil der React und next.js Schulung steht die Verbesserung einer Next.js Entwicklung im Fokus. In einer Einführung in Unit-Tests bzw. die Entwicklung mit dem Test-Framework "Jest" lernen sie, testgetrieben zu entwickeln. Hier wird auch Typescript als Notation mit abgesicherten Typen eingeführt, mit der sich die Sicherheit beim Entwickeln weiter deutlich verbessert.
Kommende Starttermine
Wählen Sie aus 17 verfügbaren Startterminen
Inhalte / Module
- React-Workshop zur Einführung
- Einrichten von Visual Studio Code für React und Next.js
- Einrichten eines React-Projektes
- Was sind React-Komponenten?
- JSX: die JavaScript-basierte Templatesprache von React
- Deklaratives Rendering
- `states`, `props` und `hooks`
- JavaScript Essentials für React
- - Module (import und export)
- `classes`, `functions`, `objects`
- `arrow-functions`- Pfeilfunktionen
- `destructuring`,
- `spread`-Operator, `rest`-Parameter
- `fullstack`mit Next.js
- Einrichten eines Next.js-Projektes
- React vs. Vue vs. Angular
- React-Komponenten definieren
- Komponenten in React und Next.js
- Eigene Komponenten erstellen
- Komponenten untersuchen mit den React Developer Tools
- Datenfluss zwischen Komponenten
- Next.js - Komponenten - `Link`, `Image`, `Head`, `Script`, `Document`, `Html`, `Main`, `NextScript`, `NoScript`, `Title`
- Komponentenlibraries für React und Next.js
- `props`, `states`, Ereignisse
- Binden von Inhalten und `props`
- Eventhandler
- Zustände und Zustandsänderungen
- `if`, `ternary` - Bedingungen
- Verwalten des Anwendungszustands mittels des state-Hooks
- Erfassen des Zustands von input-Elementen
- `styling` - Gestaltung mit CSS, SASS und tailwind
- CSS-Module, Sass-Module
- CSS-in-JS: Vergleich der Libraries "styled-jsx", "emotion" und "styled-components"
- Ein Blick in das Paket "classnames"
- tailwindcss für das Komponentenstyling
- Pre-Rendering mit Next.js
- Überblick über Static Site Generation und Server-Side Rendering
- Laden von Daten mit "getStaticProps" und "getServerSideProps"
- Routing und API-Routing mit Next.js
- Routing und Routenparameter
- Senden von HTTP-Requests via "fetch"
- Definieren von API-Routen
- `lifecycle` und `useEffect` für HTTP-Requests
- Vor-Rendern dynamischer Routen
- Abfragen von Daten während des Pre-Renderings
- Workshop
- Basis-`App`, Templates und Komponenten
- Typische statische und dynamische Seiten und Inhalte
- Navigationen und Routing
- Formulare, Eingaben und Validierung (Formik)
- TypeScript Grundlagen für React
- Statische vs dynamische Typisierung
- Typendeklaration bei Variablen, Funktionen, Arrays und Objekten
- grundlegende Datentypen
- Type Aliases und Interfaces
- Generics
- Automatisiertes Testen mit Jest und Cypress
- `assertional` vs. `interactional` - Teststile
- Was ist testgetriebenes Entwickeln?
- `arrange`, `act`, `assert` - die drei Phasen eines Tests
- Einführung in das funktionale Testen mit Jest
- Einführung in End-to-End-Tests mit Cypress
- Snapshots, Mocking und Spy
- Workshop: Testen von React-Komponenten
Zielgruppe / Voraussetzungen
Hinweis: Dieser Kurs richtet sich an Mitarbeitende aus Unternehmen und Institutionen.
Für Privatpersonen ist dieser Kurs leider nicht geeignet.
Bitte beachten Sie: Bildungsgutscheine der Agentur für Arbeit werden für diesen Kurs NICHT anerkannt.
Abschlussqualifikation / Zertifikat
Infos anfordern
GFU Cyrus AG
Erweitern Sie Ihre IT-Skills mit einem offenen IT-Training oder ganz nach Ihren Bedürfnissen durch eine individuelle IT-Schulung. Programmiersprachen (C#, Python, Java, …), Microsoft Office 365, Anforderungsmanagement, Projektmanagement, Business Intelligence, Data Science, Künstliche Intelligenz, IT-Sicherheit , Administration & Datenbanken, Softwareentwicklung, Testmanagement...
Erfahren Sie mehr über GFU Cyrus AG und weitere Kurse des Anbieters.
Bewertungen von Teilnehmern
Bewertungsdurchschnitt: 4,8
auf Basis von 5 Bewertungen
Bewertung schreiben
Bewertungen werden gemäß unserer Bewertungsrichtlinien veröffentlicht.
Anonym
22 Mrz 2024
Das Seminar war sehr gut.
Anonym
22 Mrz 2024
Ein empfehlenswerter Kurs, Thema Technisch wird eine Menge angesprochen und man bekommt einen guten Einblick aufs ganze.
Anzeige
Qualität: OK
Erwartungshaltung wurde erfüllt
Unterlagen: Gut / Technik: Gut
Verbesserung der Produktivität:
Gering, da wir bereits React/next.js einsetzten und die Schulung nur ...