Co to jest React.js?
React nie jest kompletnym frameworkiem — jest raczej biblioteką. Choć w Internecie nadal trwa święty spór na ten temat, to my po prostu umówmy się, że tak jest, okej? Przykładowo, żeby stworzyć routing lub aby wykonać zapytanie AJAX, musisz skorzystać z zewnętrznej paczki. Nie jest to jednak żadną przeszkodą w tworzeniu rozbudowanych aplikacji! Istnieje szereg dobrych praktyk, a ogromne community Reacta na całym świecie na pewno pomoże wybrać Ci prawidłowe rozwiązania. Na przykład: React nie sugeruje żadnego rozwiązania dla przechowywania stanu aplikacji – ale jest kilka popularnych i sprawdzonych bibliotek, które świetnie współgrają z Reactem — np. flux czy redux, o których możesz przeczytać w jednym z moich wcześniejszych artykułów (na pewno jeszcze wrócę do tego tematu):
Flux i Redux: globalny store i jednokierunkowy przepływ danych
Na co dzień korzystam z Redux razem z React. Dawniej używałem też własnej implementacji architektury Flux razem z AngularJS. Postanowiłem napisać o tym koncepcie coś więcej — bo jest to bez wątpienia bardzo ciekawe! Jednokierunkowy przepływ danych, akcje, dispatcher, action creator, reducer… to wszystko w tym wpisie :) A do…
Przykładowy komponent
Wracając do komponentów: Tworzenie aplikacji w React.js polega tak naprawdę na budowaniu i komponowaniu kolejnych komponentów. Trochę tak, jakbyśmy składali klocki (tylko, że te klocki najpierw sami tworzymy ;) ).
Przykładowa aplikacja w Reakcie może wyglądać tak:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);Użyłem tutaj mieszanki JavaScript i JSX — czyli czegoś w rodzaju HTML-a wbudowanego w JS. Wygląda ciekawie? Później przestudiujemy to dogłębnie!
Dlaczego React?
Na czym polega jego przewaga, w stosunku do innych bibliotek i frameworków? Myślę, że mogę szybko wypunktować najważniejsze rzeczy:
- Deklaratywny kod. Jeśli raz napiszesz komponent, dajmy na to Accordion, następnym razem by z niego skorzystać, wystarczy, że go zaimportujesz i wpiszesz w kodzie
<MyAccordion />. Kod tworzony w Reakcie jest bardzo „reużywalny”, także pomiędzy różnymi aplikacjami. - Virtual DOM. Deklaratywny kod jest szybki, ponieważ aktualizacje drzewa DOM wspomaga Virtual DOM. Jest to technika, dzięki której renderowanie w przeglądarce jest dużo szybsze niż zwykle. Krótko mówiąc polega to na tym, aby aktualizować tylko te fragmenty drzewa, które uległy zmianie. Brzmi prosto? Koncepcyjnie wydaje się oczywiste, ale wcale nie jest takie łatwe :)
- Bogate community, dużo gotowych rozwiązań. Ostatnio chciałem skorzystać z Filestack.io. I wiesz co? Udostępniają gotowy komponent dla Reacta! Obsługa formularzy, routing, komponenty z Bootstrapa czy inne elementy UI — to wszystko jest dla Ciebie, wysokiej jakości i wygodniejsze niż przysłowiowe wtyczki do jQuery. Dodajesz plik i już możesz napisać
<BootstrapModal />— boom! to jest aż tak proste. - Frajda z kodowania. Czynnik psychologiczny jest niesamowicie ważny. Jeśli już złapiesz Reactowy flow to na pewno zgodzisz się ze mną, że jest to jedna z najsympatyczniejszych bibliotek JS w dziejach ludzkości.
Co dalej?
To tylko lekkie wprowadzenie i jednocześnie początek zupełnie nowej formuły. W kolejnym artykule stworzysz swój pierwszy komponent! Oswoisz się z podstawami React.js i JSX bez konieczności konfigurowania czegokolwiek. Konkretnie, bez owijania w bawełnę :) zapisz się na szkolenie z React.
Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie zapisz się na newsletter i śledź mnie na Facebooku.
Ćwiczenie
Ćwiczenie: Spróbuj edytować przykład wyżej (kliknij w guzik edit on CodePen) i spraw, aby komponent wyświetlał inny tekst. Podejrzyj źródła — jak wygląda wygenerowany przez React.js kod? Czy dostrzegasz coś szczególnego? Napisz o tym w komentarzu.