Beschreibung
React und Next.js - Grundlagen
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.
Kommende Starttermine
Wählen Sie aus 10 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)
Zielgruppe / Voraussetzungen
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.
Anzeige