React Basics (2/3) - Custom Hooks, API-Kommunikation mit Fetch (Wiederholung)

Als kleine Auffrischung für den 3. Teil von React Basics gibt es noch einmal eine Wiederholung des 2. Teils:

Wir werden uns dieses Mal angucken, wie man Meta-Daten mit React Helmet bzw. eigenen Custom Hooks setzen kann und wie man mithilfe der Fetch-API mit APIs kommunizieren kann.

Das Ganze ist als kleine Schulung (Dauer ca. 2,5-3h) geplant. Das heißt, du bekommst Schritt für Schritt die wichtigsten Konzepte bei der Entwicklung von React-Applikationen vermittelt. Damit sie hängen bleiben, gibt es diverse kleine Programmieraufgaben und Demos.

Die Schulung setzt einige JavaScript- und React-Kenntnisse voraus. Wenn du den ersten Teil bereits besucht hast, bist du bereits perfekt vorbereitet.

Du hast den ersten Teil leider verpasst? Kein Problem! Im ersten Teil haben wir uns vor allem JSX und einige der modernen JavaScript-Features angeguckt. Wir kündigen das Event extra früh an, damit du Zeit hast, dir die wichtigsten Sachen anzugucken.
In der React-Dokumentation kannst du auf den folgenden Seiten die wichtigsten Informationen zu JSX finden:

• https://reactjs.org/docs/introducing-jsx.html
• https://reactjs.org/docs/rendering-elements.html
• https://reactjs.org/docs/components-and-props.html (nur die Syntax für Funktionen ist wichtig)
• https://reactjs.org/docs/conditional-rendering.html
• https://reactjs.org/docs/lists-and-keys.html
• https://reactjs.org/docs/handling-events.html

Dein JavaScript-Wissen kannst du gut mit dem (kostenlos lesbaren) Buch "JavaScript for Impatient Programmers" von Axel Rauschmayer auffrischen (https://exploringjs.com/impatient-js/toc.html). Wir haben uns im 1. Teil folgende Features angeguckt:

• let/const (https://exploringjs.com/impatient-js/ch_variables-assignment.html)
• Object/Array Destructuring (https://exploringjs.com/impatient-js/ch_destructuring.html)
• Einige Array-Iterator-Methoden (https://exploringjs.com/impatient-js/ch_arrays.html#methods-iteration-and-transformation-.find-.map-.filter-etc.)
• Arrow Functions (https://exploringjs.com/impatient-js/ch_callables.html)
• Spread Operator (https://exploringjs.com/impatient-js/ch_single-objects.html#spreading-into-object-literals)

Wir werden die wichtigsten Themen des ersten Teils zu Beginn auch nochmal kurz wiederholen bzw. vieles davon im Laufe des Abends wieder aufgreifen.

Du benötigst folgendes:

• Einen Laptop zum Programmieren
• Eine halbwegs aktuelle Version von NodeJS (https://nodejs.org/en/) - z.B. v12 LTS (Long-Term Support)
• Ein Code-Editor (z.B. Visual Studio Code) oder eine IDE (z.B. IntelliJ)

Hinweis: Bitte sorge dafür, dass du die benötigte Software bereits installiert hast, damit wir nicht unnötig Zeit damit verlieren, bei allen Teilnehmern die benötigte Software zu installieren. Du kannst gerne mit Create-React-App testen, ob in deiner Umgebung alles läuft (siehe https://facebook.github.io/create-react-app/docs/getting-started für Hinweise zur Installation).

Als Inhalt für die Schulung ist folgendes geplant:

• React-Neuigkeiten
• Wiederholung React Basics 1
• useEffect()-Hook & Custom Hooks
• Meta-Daten mit React Helmet
• Promises
• Fetch-API

WICHTIG: Auch wenn schon alle Plätze vergeben sein sollten für dieses Meetup, meldet euch trotzdem an. Eventuell sagt der eine oder andere noch ab.

Hinweis: Wir werden Pizza bestellen und für Getränke ist natürlich auch gesorgt. Es gibt einige Parkplätze direkt vor dem Gebäude.