Polub bloga na fejsie!

[Case Study #1] Komponent Toggle Button w React

3

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 powyż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!

REACT, REDUX, REACT-ROUTER - KURSY ON-LINE

Chcesz od podstaw poznać tajniki React, Redux oraz react-router? Zapraszam do moich szkoleń on-line:

Przejdź do szkoleń

Uwaga! Obecnie trwa przedsprzedaż kursów - premiera 1 sierpnia 2017!

  • Paweł Kalinowski

    Ciekawy konkretny filmik, jak dla mnie bardzo spoko. Fajnie byłoby gdybyś zamiast bind opisał użycie funkcji strzałkowej wraz z przekazaniem parametru. To może pokazać alternatywną metodę kiedy kontekst jest przekazywany domyślnie.

    • dzięki za opinię! co do bind to będę mieć to na uwadze przy następnym filmiku – myślę, że nie ma co za dużo na raz przekazywać bo się z tego zrobią 2h i nikt tego nie obejrzy 😉

      • Paweł Kalinowski

        jasne zgadzam się 🙂

Google Analytics Alternative