W poprzednim wpisie omówiłem wstępnie React Hook useState. Pod postem na blogu oraz na Facebooku pojawiło się wiele komentarzy z pytaniami. Chciałbym odpowiedzieć na nie i wyjaśnić kilka niuansów tutaj. Jak to jest z rozbudowanym stanem? Czy można wywoływać useState w jednym komponencie wiele razy? I jak budować stan w oparciu o istniejący? To wszystko w tym wpisie.
Wbudowanych Hooków w React jest kilka, a jeszcze więcej możesz tworzyć sam(a). Zaczniemy jednak od podstawowego wbudowanego Hooka useState. Dodamy stan do komponentu funkcyjnego!
Jakiś czas temu zrobiło się głośno na temat React Hooks. Co to jest i po co Ci to? Przez dłuższy czas celowo nie pisałem o tym na blogu, gdyż była to ledwie propozycja i to do tego mocno niestabilna. Teraz jednak sytuacja się zmieniła i wszystko wskazuje na to, że React Hooks wkrótce trafią do wersji stabilnej. Czas się zaprzyjaźnić! Dlatego powstał kurs React Hooks.
Tegoroczna konferencja ReactiveConf odbywała się w czeskiej Pradze. Po pozytywnych doświadczeniach w ubiegłym roku, nie myślałem długo, nie przeglądałem nawet agendy, po prostu kupiłem bilet i pojechałem. Spodziewałem się dużo JS, React, Elm, FRP… i w zasadzie się nie zawiodłem. W zasadzie, bo przecież nie o to w tym wszystkim chodzi!
Czasami musisz zrobić coś więcej, niż tylko wyświetlić pola komponentu w szablonie. Np. mając pola firstName i lastName chcesz wyświetlić pełne imię i nazwisko osoby. Oczywiście możesz zrobić to za pomocą wyrażenia w szablonie {{ firstName + ' ' + lastName }}. Jest to jednak mało efektywne, i to z kilku powodów. Co, jeśli tę samą wartość musisz wyświetlić w innym miejscu? Co, …
Czym dla mnie jest Vue.js? To przede wszystkim genialne „developer experience”, czyli taki UX, ale w odniesieniu do wygody korzystania z narzędzia przydatnego w pracy programisty. Świetnym tego przykładem jest fakt, że Vue traktuje inaczej dwa atrybuty html – class i style – sprawiając, że korzystanie z tego frameworka jest przyjemniejsze. Tego, co dokładnie się tam dzieje dowiesz się z tego …
Pisząc aplikacje w Vue.js często spotkasz się z sytuacją, w której wyświetlenie lub nie danego elementu będzie zależało od wartości zmiennej. Właśnie do tego służą dyrektywy warunkowe v-if, v-else, v-else-if, (oraz w pewnym sensie v-show), które odpowiadają instrukcjom warunkowym znanym z JavaScript. To właśnie te dyrektywy Ci dziś zademonstruję. Pokazywanie i ukrywanie elementów za pomocą dyrektywy v-if Najbardziej podstawową dyrektywą umożliwiającą pokazywanie elementów …
Higher Order Reducers — co to takiego? Gdy popracujesz dłużej z Reduksem to na pewno zauważysz pewne powtarzalne wzorce. Napisanie akcji i reducerów do obsługi API to konieczność powtórzenia bardzo podobnego kodu kilka, kilkanaście razy! Czy na pewno jest to konieczne? Z pomocą przychodzą właśnie Higher Order Reducers i kompozycja.
W poprzednim wpisie pokazałem Ci jak wyświetlić dynamiczne dane w Vue.js za pomocą wąsów, czyli podwójnych nawiasów klamrowych ({{ nazwaZmiennej }}). Dziś dowiesz się jak przekazać je do atrybutów elementu HTML za pomocą dyrektywy v-bind.