//

Code Challenge No. 1 – Mastering Hooks

15.2.2019 | 2 Minuten Lesezeit

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.

Inhalt 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ß!

Beitrag teilen

Gefällt mir

0

//

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.