Styled components oraz useContext – użycie hooków w nowoczesnych aplikacjach frontendowych

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.

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

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.