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

Es geht weiter mit unserer React Basics-Reihe!

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-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 moderne 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. v10 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:

• Wiederholung React Basics 1
• Meta-Daten mit React Helmet setzen
• Wiederholung useState()-Hook, neuer Hook: useEffect()-Hook
• Custom Hooks
• Fetch-API
• ES6: Promises
• Neuer Hook: useMemo()

Der 3. Teil der Schulung (Datum noch nicht festgelegt) wird sich voraussichtlich vor allem um das Thema Routing und einige kleinere React-Features (wie z.B. PropTypes, ErrorBoundaries und den Strict-Mode) drehen.

WICHTIG: Auch wenn schon alle Plätze vergeben sind für dieses Meetup, meldet euch trotzdem an. Eventuell sagt der eine oder andere noch ab. Bei genügend Interesse würden wir den 2. Teil der Schulung auch nochmal wiederholen.

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.