O MobX wspomniałem w jednym z poprzednich wpisów:
Można jednak użyć biblioteki MobX w nowocześniejszy sposób. MobX działa bardzo dobrze z hookami. Współpracuje również z aplikacjami CRA bez konieczności modyfikacji konfiguracji.
Do tej pory, możliwość udzielenia mocy obliczeniowej swojego komputera kojarzyła mi się z badaniami kosmicznymi, poszukiwaniem nowych galaktyk itd. Generalnie, rzeczy abstrakcyjne i mało przydatne w codziennym życiu. Kilka dni temu natknąłem się na Facebooku na post z Reddita zachęcający, by udzielić mocy obliczeniowej na walkę z koronawirusem. Od kilku dni uczestniczę w projekcie i chciałbym zachęcić Was do tego samego.
Redux, jak i dedykowaną dla Reacta paczkę React Redux można uznać za najpopularniejsze w tym momencie rozwiązanie do kompleksowego zarządzania stanem w React.
Redux potrafi być pobrany ponad 900 tysięcy razy dziennie (za npm-stat), natomiast React Redux ponad 650 tysięcy razy. Nie jest jednak rozwiązaniem idealnym i ma pewne wady:
Czy istnieją alternatywy? Tak. Nie tak popularne jak Redux, ale rozwiązujące niektóre problemy inaczej.
Komponenty w React renderują UI na podstawie albo stanu wewnętrznego, albo przekazanych propsów:
const button = ({onClick, primary}) => {
const [clicked, setClicked] = useState(false);
const classes = classNames({
'button': true,
'button--active': clicked,
'button--primary': primary,
});
return (
<button
onClick={() => {setClicked(!clicked); onClick();}}
className={classes}
>
Click
</button>
);
}
Choć widzimy i rozumiemy w jaki sposób dodawane są klasy, czy możemy być pewni jak komponent będzie wyglądał? Nie, ponieważ:
Dodatkowo – jeżeli chcemy sprawdzić co konkretnie kryje się pod każdą klasą, musimy szukać w pliku stylów – poza komponentem. Musimy też o pliku stylów pamiętać podczas przenoszenia np do innego projektu, co ogranicza przenaszalność kodu.
Jeżeli chcielibyśmy uniknąć tego typu problemów możemy napisać style inline:
const button = ({onClick, primary}) => {
const [clicked, setClicked] = useState(false);
return (
<button
onClick={() => {setClicked(!clicked); onClick();}}
style={{
//jakieś style bazowe
backgroundColor: primary? 'blue': 'white',
borderWidth: clicked? '2px' : '1px,
}}
>
Click
</button>
);
}
Ale zabiera nam to na przykład pseudoselektory czy media query.
Jednym z możliwych rozwiązań jest CSS-in-JS.
Główną składową Reacta są komponenty – bardzo popularnym podejściem jest enkapsulacja stylów właśnie w ramach komponentów. Stylowanie to istotna część tworzenia interfejsu użytkownika, można do niego podejść na wiele sposobów – w tym poście przedstawię 5 które są najbardziej warte uwagi w 2020 roku.
Wybór oczywiście jest subiektywny – tak jak subiektywne odczucia zdecydują o tym, który z opisanych sposobów jest najlepszy w Twoim przypadku.
