Mój kanał na youtube powoli się rozkręca! Z tego co zauważyłem, każdy porządny youtuber ma jakąś serię filmów, które posiadają jakiś wspólny mianownik. Stwierdziłem więc, że jest to najlepsza droga do filmowego sukcesu… Dlatego też dziś przedstawiam film, który będzie początkiem serii! Nazwa tej serii jest wiele mówiąca: “Case Study”, czyli po naszemu studium przypadku. Będę się starał pokazywać w niej jak coś zostało zrobione. Dziś akurat pokazuję jak stworzyć komponent toggle button w React ale nie jest powiedziane, że będę się ograniczać do jednej biblioteki, frameworka czy narzędzia.

Generalnie będę się bardzo starał wrzucać co najmniej jeden film miesięcznie. Niestety ciężko o więcej, ponieważ przygotowanie i nagranie takiego filmu to znacznie więcej roboty niż zwykły wpis na blogu… Mam nadzieję, że spodoba Ci się pomysł na tę serię! A jeśli jeszcze nie subskrybujesz mojego kanału na youtube, to zachęcam do zmiany tego stanu rzeczy, klikając poniżej:

Czego dowiesz się z filmu

Tak jak możesz przeczytać w tytule wpisu, tematem dzisiejszego filmy jest komponent Toggle Button w React. Wydaje mi się, że poziom trudności przedstawionych treści jest niski. Dlatego jeśli dopiero wchodzisz w świat React, to jest to film dla Ciebie!

Oprócz tego, że na przykładzie dowiesz się jak stworzyć od podstaw taki komponent to dodatkowo, jest to okazja do zapoznania się z kilkoma aspektami pracy z bibliotekę React. W tutorialu tym przedstawiam bowiem:

  • tworzenie komponentu
  • obsługa wewnętrznego stanu komponentu
  • obsługa zdarzenia kliknięcia
  • uzależnienie wyświetlania od stanu komponentu
  • nadawanie stylów dla komponentu
  • przekazywanie metody callback do komponentu dziecka

Jak więc widzisz, całkiem sporo informacji jak na 17 minut filmu! Mam nadzieję, że okażą się one przydatne!

Zapraszam do oglądania!

Film jest osadzony poniżej więc wystarczy wcisnąć przycisk play. Oczywiście jest on też dostępny w serwisie youtube, pod tym adresem. Zapraszam do oglądania, dzielenia się opiniami i śledzenia mojego kanału na youtube!

P.S. Kod przedstawionego przykładu dostępny jest jako repozytorium w GitHubie!