React und GraphQL (mit TypeScript)
Ziele
In dieser 4-tägigen Schulung "React und GraphQL (mit TypeScript)" lernen Sie die leistungsstarke Kombination von React und GraphQL kennen, um komplexe Frontend-Interfaces zu erstellen und Daten effizient von einer API abzufragen. Sowohl React als auch GraphQL wurden von Facebook entwickelt und werden von einer Vielzahl von Websites eingesetzt.
React ist die führende Bibliothek zur Entwicklung von Single-Page-Anwendungen (SPAs). In Verbindung mit GraphQL ermöglicht es eine effiziente Abfrage von serverseitigen APIs.
In dieser Schulung werden auch aktuelle Technologien wie Hooks und TypeScript ausführlich behandelt. Am Ende des Kurses werden die Teilnehmer in der Lage sein, Anwendungen unterschiedlicher Komplexität mit React zu entwickeln und dabei bewährte Methoden zu berücksichtigen.
Zielgruppe
- Entwickler
Voraussetzungen
Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:
- Erfahrungen mit HTML und JavaScript
Lernmethodik
Die Schulung bietet Ihnen eine ausgewogene Mischung aus Theorie und Praxis in einer erstklassigen Lernumgebung. Profitieren Sie vom direkten Austausch mit unseren projekterfahrenen Trainern und anderen Teilnehmern, um Ihren Lernerfolg zu maximieren.
Agenda
Entwicklung moderner Frontend-Anwendungen
- Überblick und Gemeinsamkeiten von React, Vue und Angular
- deklaratives Rendering
- Komponenten - eigene HTML-Tags definieren
- Initialisierung eines React-Projektes mittels create-react-app
JavaScript Grundlagen für React (soweit benötigt)
- Entwicklung mit node.js und npm
- JavaScript Versionen und Neuerungen
- Module (import und export)
- Pfeilfunktionen
- Funktionale Programmierung in JavaScript
TypeScript Grundlagen für React
- statische vs dynamische Typisierung
- Typendeklaration bei Variablen, Funktionen, Arrays und Objekten
- grundlegende Datentypen
- Types und Interfaces
State (Anwendungszustand) verwalten
- deklaratives Rendering
- Verwalten des Anwendungszustands mittels state-Hook
- Erfassen des Zustands von input-Elementen
React-Templatesprache
- JSX: die JavaScript-basierte Templatesprache von React
- Binden von Inhalten und Props
- Eventhandler
- Elemente wiederholen
- if / else
- CSS-Klassen und Stile
Komponenten
- Einbinden vorgefertigter Komponenten
- Komponentenlibraries für React
- Definieren eigener Komponenten
- Props und Events in eigenen Komponenten
- Prop- Event- und State-Typen in TypeScript
- Datenfluss zwischen Komponenten
- Komponenten untersuchen mit den React Developer Tools
APIs aus React abfragen
- senden von HTTP-Requests via _fetch_
- verwenden des effect-Hooks, um HTTP-Requests auszulösen
Klassenkomponenten
- Definieren einer Komponente als Funktion oder als Klasse
- JavaScript: "this" und seine Eigenheiten
- State in Klassenkomponenten
- Props und Events in Klassenkomponenten
React Tools und Libraries
- React Router
- Context: Teilen von Daten über einen Komponentenbaum hinweg
- der Effect-Hook im Detail
- externe und eigene Hooks (z.B. react-query)
- Styling Libraries
- Formular-Libraries
State Management mit Reducern
- Überblick über State Management
- State Management mit Reducern und reinen Funktionen
- Einsetzen des Reducer-Hooks in React
- Überblick über State Management mit Redux
Testen und Komponentendemos
- Komponentendemos mit Storybook
- Testen von JavaScript-Funktionen mit Jest
- Testen von React-Komponenten mit react-testing-library
- Snapshot-Tests
App-Entwicklung mit React
- Progressive Web Apps: Erstellen von installierbaren mobilen und Desktop-Anwendungen
- Überblick über React Native
Performanceoptimierung und Pre-Rendering
- React Developer Tools Profiler
- React.memo, Callback-Hook und Memo-Hook
- Static Site Generators
- serverseitiges Rendering
- Code splitting
GraphQL
- Einsatzgebiete für GraphQL
- GraphQL vs REST
- GraphiQL Explorer
- einfache GraphQL Beispiele
- parametrische Queries
- Mutationen
- Datentypen
- Abfragen eines GraphQL-APIs aus JavaScript
- Anbinden einer React-Anwendung mittels Apollo Client
Open Badge - Ihr digitaler Kompetenznachweis
Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erlangen Sie nicht nur Fachkenntnisse und Fähigkeiten, sondern bekommen zusätzlich zu Ihrem Teilnahmezertifikat ein Open Badge als digitalen Nachweis Ihrer Kompetenz.
Sie können diesen in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com Konto abrufen. Ihre verdienten Badges lassen sich problemlos in sozialen Netzwerken integrieren und weitergeben.
Kurz vor Durchführung
Termin | Standort | Aktion |
---|---|---|
14.05. - 17.05.2024 | Hamburg | |
11.06. - 14.06.2024 | München | |
09.07. - 12.07.2024 | Köln | |
13.08. - 16.08.2024 | Nürnberg |