React und Next.js - Komplett

GFU Cyrus AG — bildet weiter.

Bereits 1980 als GFU Cyrus + Rölke mbH gegründet, zählt die GFU heute zu den renommiertesten IT-Schulungsunternehmen in Deutschland. Jedes Jahr besuchen mehrere tausend IT-Fachleute aus der gesamten Bundesrepublik unsere Seminare — in über 45 Jahren sind daraus mehr als 38.000 durchgeführte IT-Schulungen geworden.

Unser Programm

Mit über 4.250 Schulungsthemen decken wir das gesamte IT-Spektrum ab: von Administration über Softwareentwicklung, Datenbanken, Data Science und KI bis hin zu Cloud, Security und Betriebssystemen. Rund 50 Dozentinnen und Dozenten aus den verschiedensten IT-Bereichen stehen dafür mit einem außergewöhnlichen Maß an Fachkompetenz bereit — dieses Know-how bieten wir auch für Projektarbeit und Coaching an.

Unser Anspruch

Ob offenes Seminar, Firmenschulung oder Individualschulung: Unsere Teilnehmenden genießen den Rundum-Service der GFU — von der Anreise bis zur Abreise. Kleine Lerngruppen, hochqualifizierte Trainer und Fachbuchautoren, die auf individuelle Fragen eingehen, regelmäßige Pausen, gute Verpflegung und hochwertige 86"-Schulungs-Screens sind für uns selbstverständlich.

Maßgeschneiderte Weiterbildung

Sie wissen nicht, welches Thema zu Ihnen passt? Wie beim Maßschneider stellen wir gemeinsam mit Ihnen Ihr individuelles Schulungspaket zusammen — damit Ihre Weiterbildung auch nach Jahren noch perfekt sitzt.

Unsere Kunden

Zu unseren Kunden zählen Banken, Versicherungen, Handelskonzerne, Industrieunternehmen, Kommunen und öffentliche Einrichtungen aus dem gesamten deutschsprachigen Raum.

Digitale Nachweise mit OpenBadges

Mit der Ausstellung digitaler Badges über die OpenBadgeFactory machen wir erworbene Kompetenzen unserer Teilnehmenden sichtbar, verifizierbar und teilbar — ein weiterer Baustein, mit dem die GFU IT-Professionals auf ihrem Weg weiterbildet.

www.gfu.net

Seminarkatalog: www.gfu.net/seminare.html

Nach dem Schulungsbesuch sind Sie in der Lage, Websites von der interaktiven App bis zur statischen Landing-Page mit dem Stack aus React und Next.js zu erstellen und automatisiert zu testen. Sie verstehen die entsprechenden Grundelemente, wie Komponenten, States, JSX und Hooks. Außerdem sind Sie mit Libraries aus dem React-Universum, wie z.B. für Styling, API-Kommunikation oder Formulare, vertraut. Weiter beherrschen Sie den Datentransport zwischen Server und Client und validieren die Daten. 1.-3. Tag: Auch separat buchbar als "React und Next.js - Grundlagen"

• 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 "React und Next.js - Typescript und Testen"

• 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