React und Next.js - Komplett

1.-3. Tag: Auch separat buchbar als

• 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)
    
    
    
    
  
  

4 - 5 . Tag: Auch separat buchbar als

• 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