Jak pewnie wiecie, React od wersji 16.8 wprowadził do swojego code base’u hooki. Początkowo funkcjonalność ta nie wydawała się być tak rewolucyjna, jednak gdy już zacznie się z niej korzystać oraz przepisywać kod na funkcjonalny, nietrudno zauważyć, jak bardzo ułatwiają one pracę. Pojawienie się hooków przełożyło się również na szereg funkcjonalności, które dają nam rozwiązania znanych problemów lub zagadnień.

Z tego artykułu dowiesz się:

  • Czym są styled compontents,
  • Jakie możliwości dają context, hooki i useContext,
  • Jak wykorzystać hooki w bibliotece Redux.

Styled components

Styled components to właśnie jedna ze wspomnianych przeze mnie wyżej funkcjonalności. Styled components jest globalnym rozwiązaniem dla pisania ostylowanych elementów w kodzie JavaScript, które będą stanowiły komponenty reactowe. Dzięki niej jesteśmy w stanie napisać całość kodu bez użycia plików css, scss czy less. Biblioteka ta może zostać znaleziona na stronie https://styled-components.com/. Rozwiązanie pozwala nam również na stylowanie istniejących już komponentów. Jedynym warunkiem, jaki musi spełnić ów komponent, jest to, że powinien posiadać props className. Daje to nam bardzo dużą elastyczność w użyciu naszych elementów.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

Biblioteka Redux w kontekście… hooków

Doskonałym przykładem użycia kontekstu, a w późniejszych wersjach również hooków, jest dobrze znana reactowcom biblioteka Redux. Realizuje ona zadanie przechowywania i propagowania danych w aplikacji bądź w określonym jej obszarze. Dlaczego łączymy te koncepcje? Tak jak wcześniej wspomniałem, styled components pozwalają na napisanie w bardzo prosty sposób styli w JavaScript dla elementów HTML, które będą odwzorowaniem tego, co mamy w szeroko znanych css-ach. Hook useContext natomiast umożliwiau dostępnienie danych niższym komponentom w hierarchii.

Theming

Pamiętacie setki zmiennych w less lub scss, które pisaliśmy dla utrzymania spójności kolorystyki i wyglądu elementów? Teraz to wszystko możemy przenieść na poziom JavaScript. Jest to tak zwany theming. Dokładną dokumentację opisanego tutaj połączenia znajdziecie na stronie https://styled-components.com/docs/advanced#theming.

Theming to niesamowicie wygodne narzędzie, dzięki któremu utrzymanie spójnego wyglądu aplikacji będzie dużo prostsze. Ponadto można dzięki temu wyegzekwować używanie przez programistów spójnej nomenklatury dla wariantów wyglądu komponentów.

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
 
  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;
 
// We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}
 
// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};
 
render(
  <div>
    <Button>Normal</Button>
 
    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);

https://material-ui.com/ stanowi doskonały przykład użycia naszego połączenia. Jest to biblioteka, która zawiera zbiór szeroko znanych elementów na stronach internetowych i która została napisana w React. Implementuje takie elementy jak: typografia, przyciski, accordiony itd. W niej również można znaleźć rozwinięcie koncepcji themingu oraz realny przykład użycia.

Programowanie

Wraz z rozwojem rynku e-commerce rośnie rola i popularność Progressive Web Applications. 

Zapraszamy na JPro Tech, gdzie Michał Wójcik pokazuje, jak samodzielnie, krok po kroku z pomocą Angulara stworzyć, a następnie skonfigurować i przetestować swoją PWA.

Przeczytaj artykuł

Podsumowanie

Podsumowując, funkcjonalności, jakie zyskaliśmy wraz z hookami, to naprawdę bardzo dobre narzędzia, które pozwalają napisać aplikację frontendową w łatwy oraz konfigurowalny sposób. W projektach, w które byłem / jestem zaangażowany, nieraz używaliśmy koncepcji themingu i sprawdza się ona doskonale. Spróbujcie sami!

Jeżeli chcecie zgłębić temat hooków – zachęcam także do obejrzenia webinaru online: React + TypeScript. Użycie hooków w programowaniu funkcyjnym. 

Autorem wpisu jest:
Senior Front-End Developer

Senior Front-End Developer z 8-letnim doświadczeniem. Marek w pracy skupia się na dostarczaniu rozwiązań jak najprostszych. Nie zamyka się na żadną technologię, ma doświadczenie pracy w C++ oraz PHP. Jest ogromnym fanem React.js oraz TypeScript, ceni również programowanie funkcyjne. Po pracy fan czytania książek wszelkich oraz sportów walki – posiada brązowy pas w brazylijskim jiu-jitsu. Do tego „tata” 2-letniego kota oraz półrocznego psiaka malamuta.

Dodaj komentarz

Skontaktuj się z nami

Chcesz dowiedzieć się więcej o naszych usługach? Napisz do nas – odpowiemy na każdą wiadomość.

    Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach handlowych.
    Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach marketingowych.
    Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma w celach rekrutacyjnych.
    Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma na potrzeby przyszłych rekrutacji.
    W związku z obowiązującymi przepisami dotyczącymi ochrony danych osobowych tj. Ustawą o ochronie danych osobowych z dnia 10 maja 2018 roku, jak również treścią Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO), informujemy, że: 1. Administratorem danych osobowych jest JCommerce Sp. z o.o. z siedzibą w Katowicach, ul. Ściegiennego 3, 40-114 Katowice (KRS: 00007393418).
    2. Powyższe dane osobowe przetwarzane będą przez JCommerce Sp. z o.o. – w zależności od udzielonych przez Panią/Pana zgód (podstawa prawna przetwarzania: art. 6 ust. 1 pkt a) RODO):
    • w celach handlowych,
    • w celach marketingowych,
    • w celach rekrutacyjnych;
    • w celach przyszłych rekrutacji.
    3. Podanie powyższych danych osobowych nie jest wymogiem ustawowym, umownym lub warunkiem zawarcia umowy. Nie jest Pan/Pani zobowiązany/a do podania powyższych danych osobowych, jednak brak ich podania uniemożliwi realizacje ww. celu.
    4. Posiada Pan/ Pani prawo dostępu do treści swoich danych, w tym otrzymania ich kopii i ich sprostowania, usunięcia, ograniczenia przetwarzania, prawo do przenoszenia danych, prawo do sprzeciwu wobec przetwarzania, prawo do cofnięcia zgody w dowolnym momencie, jeśli została udzielona. Wycofanie zgody nie wpływa jednak na zgodność z prawem przetwarzania, którego dokonano na podstawie zgody przed jej wycofaniem; oświadczenie o cofnięciu zgody na przetwarzanie danych osobowych należy złożyć w siedzibie JCommerce Sp. z o.o. lub przesłać na adres mailowy zgody@jcommerce.pl. Cofnięcie zgody na przetwarzanie danych osobowych skutkuje brakiem możliwości realizacji ww. celów przetwarzania;
    5. Dane osobowe są udostępniane przez JCommerce Sp. z o.o. upoważnionym pracownikom i osobom współpracującym z JCommerce Sp. z o.o. na podstawie umów cywilnoprawnych, przez których realizowany jest cel przetwarzania;
    6. Wszelkie pytania dotyczące ochrony danych osobowych oraz realizacje przysługujących praw, prosimy kierować na adres odo@jcommerce.pl;
    7. W zależności od udzielonej zgody, dane osobowe będą przetwarzane przez czas niezbędny do realizacji ww. celów przetwarzania. W przypadku wniesienia sprzeciwu, JCommerce Sp. z o.o. przestanie przetwarzać Pani/Pana dane w ww. celu, chyba że będzie w stanie wykazać, że w stosunku do tych danych istnieją ważne prawnie uzasadnione podstawy, które są nadrzędne wobec Pana/Pani interesów, praw i wolności, lub niezbędne do ewentualnego ustalenia, dochodzenia lub obrony roszczeń;
    8. Nie przekazujemy Pani/Pana danych poza teren Europejskiego Obszaru Gospodarczego oraz do organizacji międzynarodowych.
    9. Pani/Pana dane osobowe nie podlegają zautomatyzowanemu podejmowaniu decyzji, w tym profilowaniu.
    10. Ma Pani/Pan prawo wniesienia skargi do organu nadzorczego gdy uzna Pan/Pani, iż przetwarzanie ww. danych osobowych narusza przepisy ogólnego rozporządzenia o ochronie danych osobowych z dnia 27 kwietnia 2016 r.
    Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach handlowych.
    Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach marketingowych.
    Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma w celach rekrutacyjnych.
    Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma na potrzeby przyszłych rekrutacji.
    W związku z obowiązującymi przepisami dotyczącymi ochrony danych osobowych tj. Ustawą o ochronie danych osobowych z dnia 10 maja 2018 roku, jak również treścią Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO), informujemy, że: 1. Administratorem danych osobowych jest JCommerce Sp. z o.o. z siedzibą w Katowicach, ul. Ściegiennego 3, 40-114 Katowice (KRS: 00007393418).
    2. Powyższe dane osobowe przetwarzane będą przez JCommerce Sp. z o.o. – w zależności od udzielonych przez Panią/Pana zgód (podstawa prawna przetwarzania: art. 6 ust. 1 pkt a) RODO):
    • w celach handlowych,
    • w celach marketingowych,
    • w celach rekrutacyjnych;
    • w celach przyszłych rekrutacji.
    3. Podanie powyższych danych osobowych nie jest wymogiem ustawowym, umownym lub warunkiem zawarcia umowy. Nie jest Pan/Pani zobowiązany/a do podania powyższych danych osobowych, jednak brak ich podania uniemożliwi realizacje ww. celu.
    4. Posiada Pan/ Pani prawo dostępu do treści swoich danych, w tym otrzymania ich kopii i ich sprostowania, usunięcia, ograniczenia przetwarzania, prawo do przenoszenia danych, prawo do sprzeciwu wobec przetwarzania, prawo do cofnięcia zgody w dowolnym momencie, jeśli została udzielona. Wycofanie zgody nie wpływa jednak na zgodność z prawem przetwarzania, którego dokonano na podstawie zgody przed jej wycofaniem; oświadczenie o cofnięciu zgody na przetwarzanie danych osobowych należy złożyć w siedzibie JCommerce Sp. z o.o. lub przesłać na adres mailowy zgody@jcommerce.pl. Cofnięcie zgody na przetwarzanie danych osobowych skutkuje brakiem możliwości realizacji ww. celów przetwarzania;
    5. Dane osobowe są udostępniane przez JCommerce Sp. z o.o. upoważnionym pracownikom i osobom współpracującym z JCommerce Sp. z o.o. na podstawie umów cywilnoprawnych, przez których realizowany jest cel przetwarzania;
    6. Wszelkie pytania dotyczące ochrony danych osobowych oraz realizacje przysługujących praw, prosimy kierować na adres odo@jcommerce.pl;
    7. W zależności od udzielonej zgody, dane osobowe będą przetwarzane przez czas niezbędny do realizacji ww. celów przetwarzania. W przypadku wniesienia sprzeciwu, JCommerce Sp. z o.o. przestanie przetwarzać Pani/Pana dane w ww. celu, chyba że będzie w stanie wykazać, że w stosunku do tych danych istnieją ważne prawnie uzasadnione podstawy, które są nadrzędne wobec Pana/Pani interesów, praw i wolności, lub niezbędne do ewentualnego ustalenia, dochodzenia lub obrony roszczeń;
    8. Nie przekazujemy Pani/Pana danych poza teren Europejskiego Obszaru Gospodarczego oraz do organizacji międzynarodowych.
    9. Pani/Pana dane osobowe nie podlegają zautomatyzowanemu podejmowaniu decyzji, w tym profilowaniu.
    10. Ma Pani/Pan prawo wniesienia skargi do organu nadzorczego gdy uzna Pan/Pani, iż przetwarzanie ww. danych osobowych narusza przepisy ogólnego rozporządzenia o ochronie danych osobowych z dnia 27 kwietnia 2016 r.