codechallenge react hooks

Code Challenge No. 1 – Mastering Hooks

4 Kommentare

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

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

Toni Haupt

Toni arbeitet seit Mai 2017 bei der codecentric als Lead UI Consultant. Seine Schwerpunktthemen sind die Erstellung moderner Frontend Applikation mit einem starken Fokus auf UI und Usability. Dabei spielen Rapid Prototyping nach Atomic Design Prinzipien eine große Rolle. Eine weitere Leidenschaft ist die Rolle als Core Entwicker im WordPress Umfeld.

René Bohrenfeldt

René Bohrenfeldt ist seit mehr als 10 Jahren in der Software-Entwicklung tätig und fokussiert sich dabei hauptsächlich auf Frontend-Technologien. Bei der codecentric AG setzt er als IT-Consultant sowohl sein Entwicklungs-Know-how als auch seine Kommunikationsstärke als PO und Moderator ein.
Darüber hinaus engagiert sich der studierte Betriebswirt unternehmerisch und ist Mitgründer einer Busvermietung in Berlin.

Kommentare

  • Dennis

    Hallo zusammen,
    ich mache mal den Anfang. Hier ist meine Lösung für die Aufgaben: https://codesandbox.io/s/4x2o7mj690.
    Ich glaube aber meine Lösung für die fünfte Aufgabe ist nicht ganz ideal. Manchmal wird das Alert auch beim Öffnen der Seite oder beim Scrollen geöffnet. Seht ihr woran es liegt?

    • René Bohrenfeldt

      22. Februar 2019 von René Bohrenfeldt

      Hi Dennis, wahrscheinlich hast du den Fehler bereits gefunden, richtig? Zumindest tritt das Problem mit dem Alert jetzt nicht mehr auf. Es kann sein, dass du in dem useEffect() das alert nicht als Funktion returned hast und damit beim LifeCycle Hook componentDidMount der Effekt getriggert und das Alert angezeigt wurde. Falls du noch Fragen hast, dann schreibe uns jederzeit.

  • Toni Haupt

    21. Februar 2019 von Toni Haupt

    Hallo Dennis und danke für deine Sandbox. Wegen des Alerts schauen wir nochmal rein, also schon einmal danke fürs Feedback. Freitag kommt dann die solution und eine neue Code Challenge ist auch schon in Planung. Vielleicht hast du auch noch ein paar Ideen was für dich interessant wäre es in eine Challenge zu packe.

  • Silas R

    28. Februar 2019 von Silas R

    https://codesandbox.io/s/zq97ojwwrx

    Das wäre meine Lösung; Hab mich nur kurz in State- und Effect Hooks reingelesen; Also alles ohne Gewähr;
    Auf jeden Fall ne sehr schön übersichtliche Alternative zu den Klassenkomponenten.

    War das mein Fehler oder ist das vorkommen des Effekt-Hooks in nur einer der fünf Komponenten gewollt? Habe mir die Lösung noch nicht angeschaut.

Kommentieren

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.