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.
Przeczytaj także: PWA – Progressive Web Applications
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!
Senior Front-End Developer z 8-letnim doświadczeniem. W pracy skupia się na dostarczaniu rozwiązań jak najprostszych. Nie zamyka się na żadną technologię, o czym może świadczyć kilka lat doświadczenia w C++ oraz PHP. Jest ogromnym fanem React.js oraz TypeScript. Ceni również programowanie funkcyjne. Doświadczenie zdobywał w firmach polskich i angielskich. Najbardziej dumny jest jednak z tego, że udało mu się pomóc koledze w zostaniu programistą od zera! Po pracy ogromny 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.