HOCs, Render Props… tja, so sieht es aus in der Welt des Frontends, denn nichts ist beständiger als die Veränderung. Damit unser Alltag nicht so langweilig wird, hat das React.js-Team mit der Version 16.7-alpha Hooks angekündigt. Wer mehr darüber erfahren möchte, sollte den spannenden Artikel meines Kollegen René lesen . Dieses nette Feature erlaubt es uns, sauberen Code zu schreiben und Class Components in Functional Components zu refaktorieren. Wir können mit dieser Vorgehensweise State- und Lifecycle-Methoden in Functional Components nutzen.
Challenge Introduction
Ziel dieser Challenge ist es, unser erworbenes Wissen über React-Hooks anzuwenden und Class Components in Stateful Functional Components umzuschreiben. Damit ihr auch gleich loslegen könnt, haben wir eine Sandbox mit React 16.8 eingerichtet. Dort findet ihr fünf Komponenten, die ihr in Functional Components umschreiben könnt:
- Component mit einer Single-State-Variable
- Component mit Multiple-State-Variablen
- Component mit der componentDidMount-Lifecycle-Methode
- Component mit der componentWillUnmount-Lifecycle-Methode
Und hier ist der Link zur Codesandbox: https://codesandbox.io/s/00q0q12v3p
Klicken Sie auf den unteren Button, um den Inhalt von codesandbox.io zu laden.
Ziele der Challenge
- Umschreiben der Class Components in Functional Components, State und Lifecycle Properties müssen erhalten bleiben
- Verstehen wie React-Hooks funktionieren
- Schlanke, einfache React-Components schreiben
- Umgang mit Codesandbox für Demo-Projekte lernen
Support für die Code Challenge
React-Hooks sind komplettes Neuland für dich? Der Artikel von René bietet euch eine gute Übersicht über Hooks, und weiterführendes Material findet ihr in der React-Dokumentation . Damit ihr sofort loslegen könnt, haben wir euch eine vorkonfigurierte Codesandbox zur Verfügung gestellt.
codecentric-Community to the rescue
Möchtet ihr Feedback oder eine Review zu eurer Lösung haben, könnt ihr uns auf folgenden Wegen erreichen:
- Teilt eure Lösung auf Twitter mit dem Hashtag #codecentricChallenge und wir melden uns in den Kommentaren zurück.
- Postet euren Link zur Codesandbox in die Kommentare und lasst uns eure Learnings oder auftretende Probleme da. Wir helfen gerne weiter.
Challenge completed – be the master of Hooks
Die Lösung der Challenge ist hier zu finden . Aber nicht schauen, bevor ihr nicht selbst probiert habt es zu lösen 🙂 Viel Spaß!
War dieser Beitrag hilfreich?
Weitere Beiträge
von Toni Haupt
22.2.2019 Dein Job bei codecentric?
Jobs
Agile Developer und Consultant (w/d/m)
Alle Standorte
Gemeinsam bessere Projekte umsetzen.
Wir helfen deinem Unternehmen.
Du stehst vor einer großen IT-Herausforderung? Wir sorgen für eine maßgeschneiderte Unterstützung. Informiere dich jetzt.
Hilf uns, noch besser zu werden.
Wir sind immer auf der Suche nach neuen Talenten. Auch für dich ist die passende Stelle dabei.
Blog-Autor*in
Toni Haupt
Du hast noch Fragen zu diesem Thema? Dann sprich mich einfach an.
Du hast noch Fragen zu diesem Thema? Dann sprich mich einfach an.