Seminare
Seminare

React und Next.js - Grundlagen

Webinar - GFU Cyrus AG

Nach dem Seminar können Sie grundlegende Webanwendungen und Websites mit React und Next.js erstellen. Sie verstehen Komponenten, JSX, Props, State und Hooks und können Benutzerinteraktionen sowie Formulare verarbeiten. Im Next.js App Router können Sie eine Projektstruktur aufbauen, Server und Client Components unterscheiden und dateibasiertes Routing umsetzen. Sie kennen Möglichkeiten für statisches und dynamisches Rendering, Datenabrufe und serverseitige Endpunkte mit Route Handlers. Darüber hinaus können Sie ausgewählte Styling-Ansätze und Entwicklungswerkzeuge einsetzen. Sie erhalten eine Grundlage, um einfache automatisierte Tests für React-Komponenten umzusetzen und Ihre Anwendungen schrittweise weiterzuentwickeln.
Termin Ort Preis*
22.02.2027- 24.02.2027 Köln 1.939,70 €
22.02.2027- 24.02.2027 online 1.939,70 €
18.10.2027- 20.10.2027 Köln 1.939,70 €
18.10.2027- 20.10.2027 online 1.939,70 €

Alle Termine anzeigen

*Alle Preise verstehen sich inkl. MwSt.

Detaillierte Informationen zum Seminar

Inhalte:
  • React-Workshop zur Einführung
    • Visual Studio Code für React und Next.js einrichten
    • Ein React-Projekt erstellen
    • React-Komponenten, JSX und deklaratives Rendering
    • State, Props und Hooks

  • JavaScript Essentials für React
    • Module mit import und export
    • Klassen, Funktionen, Objekte und Pfeilfunktionen
    • Destructuring, Spread-Operator und Rest-Parameter

  • Fullstack mit Next.js
    • Ein Next.js-Projekt einrichten
    • Next.js App Router: Projektstruktur sowie Server und Client Components
    • React, Vue und Angular im Vergleich
    • React-Komponenten definieren

  • Komponenten in React und Next.js
    • Eigene Komponenten erstellen
    • Komponenten mit den React Developer Tools untersuchen
    • Datenfluss zwischen Komponenten
    • Navigation mit Link, Bilder mit Image und Skripte mit Script
    • Metadaten im App Router
    • Komponentenbibliotheken für React und Next.js

  • Props, State und Ereignisse
    • Inhalte und Props binden
    • Eventhandler sowie Zustände und Zustandsänderungen
    • Bedingte Darstellung mit if und ternärem Operator
    • Anwendungszustand mit useState verwalten
    • Zustand von Eingabeelementen erfassen

  • Styling mit CSS, Sass und Tailwind CSS
    • CSS- und Sass-Module
    • CSS-in-JS: styled-jsx, Emotion und styled-components im Vergleich
    • Das Paket classnames
    • Tailwind CSS für das Komponentenstyling

  • Statisches und dynamisches Rendering sowie Datenabrufe im App Router
    • Statische Generierung und serverseitiges Rendering einordnen
    • Daten in Server Components abrufen
    • Dynamische Routen vorab rendern
    • Daten während des serverseitigen Renderings abfragen

  • Dateibasiertes Routing und Route Handlers im App Router
    • Routing, Layouts und Routenparameter
    • HTTP-Anfragen mit fetch senden
    • Serverseitige Endpunkte mit Route Handlers definieren
    • Lebenszyklus und useEffect für clientseitige HTTP-Anfragen

  • Workshop
    • Basisanwendung, Layouts und Komponenten
    • Typische statische und dynamische Seiten und Inhalte
    • Navigation und Routing
    • Formulare, Eingaben und Validierung mit Formik
    • Grundlagen automatisierter Tests von React-Komponenten

Dauer/zeitlicher Ablauf:
3 Tage
Zielgruppe:
Das Seminar richtet sich an Webentwickler, die mit React und Next.js Webanwendungen und Websites erstellen möchten.

Teilnahmevoraussetzungen


Sie benötigen praktische Erfahrung mit HTML, CSS und JavaScript.

Vorkenntnisse in React und Next.js sind nicht erforderlich.
Seminarkennung:
R95005
Nach unten
Nach oben
Wir setzen Analyse-Cookies ein, um Ihre Zufriedenheit bei der Nutzung unserer Webseite zu verbessern. Diese Cookies werden nicht automatisiert gesetzt. Wenn Sie mit dem Einsatz dieser Cookies einverstanden sind, klicken Sie bitte auf Akzeptieren. Weitere Informationen finden Sie hier.
Akzeptieren Nicht akzeptieren









Um Spam abzuwehren, geben Sie bitte die Buchstaben auf dem Bild in das Textfeld ein:

captcha



Bei der Verarbeitung Ihrer personenbezogenen Daten im Zusammenhang mit der Kontaktfunktion beachten wir die gesetzlichen Bestimmungen. Unsere ausführlichen Datenschutzinformationen finden Sie hier. Bei der Kontakt-Funktion erhobene Daten werden nur an den jeweiligen Anbieter weitergeleitet und sind nötig, damit der Anbieter auf Ihr Anliegen reagieren kann.







Um Spam abzuwehren, geben Sie bitte die Buchstaben auf dem Bild in das Textfeld ein:

captcha