[PL] Let’s Write – nowa nadzieja
React, Redux i Router w końcu działają :) Poprzedni wpis to było coś strasznego. Jednak poświęciłem cały swój wolny czas i w ciągu dwóch dni zrozumiałem jak to ma być zrobione dobrze. Wszystko zawdzięczam tej stronie: https://css-tricks.com/learning-react-router/. Oni mi wytłumaczyli jak uruchomić Reacta z Reduxem.
Przyjmijmy oficjalnie, że aplikacja startuje w tym momencie. To co do tej pory próbowałem dodać niech zostanie zapomniane :P
Poprzednie wpisy z serii:
Dodałem nowy gulpfile, dodałem webpack i zacząłem korzystać z importów z ES6 (EcmaScript6, najnowszy standard JavaScriptu). Aktualny stan kodu możecie zobaczyć w repozytorium: https://github.com/zajacmarekcom/letswrite.
Zagłębiając się w temat znowu poczułem to najcudowniejsze uczucie w programowaniu – kiedy pływasz w tonie zagadnień, których nie rozumiesz i nagle następuje moment kiedy to wszystko w głowie łączy się w całość. Zawsze mam wrażenie, że służy do tego taki mały przełącznik, który przy odpowiednim zdaniu w artykule przełącza się. Z chaosu powstaje wizja :D
Zmiany
Wprowadziłem do projektu nowe elementy, z którymi teraz będę pracował.
Webpack
Webpack pozwala zamienić moduły na końcowe assety dla aplikacji. Jak napisałem powyżej, zacząłem korzystać z importów, a Webpack pozwala mi z wielu małych plików utworzyć końcowy plik .js, który będzie używany przez aplikację. Jeszcze nie skonfigurowałem go dla plików SASS, ale zajmę się tym. Webpacka dodałem wzorując się na podanej przeze mnie stronie CSS-Tricks. Będę go musiał lepiej poznać
Redux
Redux jest biblioteką do zarządzania stanem aplikacji. Jest niezależny od frameworka jednak najczęściej jest używany z Reactem. Udało mi się go dodać do projektu. Co więcej wiem już jak mniej więcej działa. Redux służy do przechowywania stanu aplikacji w jednym miejscu. Komponenty zmieniające stan nie mogą go zmienić bezpośrednio, muszą wysłać do Reduxa akcję. Akcja składa się z typu (nazwy) i danych. Każda akcja jest obsługiwana przez reducery (nie wiem jak to ładnie na polski przetłumaczyć, „reduktor”?). Reducer to funkcja, która obsługuje akcję i modyfikuje stan aplikacji. Zobaczymy czy w trakcie dodawania funkcjonalności będzie mi się dobrze pracowało z tym narzędziem.
Router
Router to biblioteka do zarządzania komponentami dla poszczególnych URLi. Dzięki Routerowi możemy łatwo dodać możliwość przechodzenia między podstronami w aplikacji SPA (Single Page Application). Obsługuje też historię przeglądarki tak żeby użytkownik myślał, że przechodzi do kolejnych stron mając tak naprawdę tylko zmieniane komponenty, które się wyświetlają.
Zróbmy to dobrze
To co teraz się wyświetla nie wygląda zachęcająco:
Ale jest dla mnie bardzo ważne.
Przede wszystkim ta strona działa już z Routerem więc klikając w wyświetlone linki zmienia się treść poniżej. Po drugie ta strona jest dobrym początkiem dla strony głównej, będziemy tylko do niej dokładać nowe komponenty i style. Po trzecie popatrzcie na adres w przeglądarce – uruchomiłem stronę przez serwer HTTP więc jest to już prawdziwa strona www :)
Sporo rzeczy robię na zasadzie kopiowania od innych i modyfikowania. Do tej pory przy nauce nowych środowisk zawsze to działało więc mam nadzieję, że w tym projekcie też będzie działać :P
Przyszłość
Muszę jeszcze raz przemyśleć używanie Bootstrapa. Może jednak lepiej będzie go dodać.
W tym momencie skupię się na stronie głównej. Po pierwsze dlatego, że nie będzie wymagała pobierania danych z serwera. Po drugie, będzie prosta, a jak zrobię dla niej layout to będę mógł go używać w całej aplikacji.
Do boju
Wiem, że dla osób, które pracują z Reactem czy ogólnie frontendem to co robię może się wydawać banalne. Ale dopiero się uczę. Potrzebowałem dwóch tygodni żeby dojść do momentu, w którym mogę powiedzieć, że rozumiem co robię. Jestem pewien, że w kolejnych wpisach będziecie widzieć ogromne postępy. Zawsze najtrudniej jest zacząć (kto konfigurował jakiś nowy projekt od podstaw ten zna ten ból).
Pisanie w dwóch językach zabiera czas ale nie chcę z tego rezygnować. Nie przestanę też dodawać wpisów po polsku ponieważ mój angielski jest słaby i jeśli ktoś z Polski będzie miał jakąś wątpliwość czytając tekst po angielsku to może sprawdzić o co mi chodziło.
Każdy błąd w tym co robię śmiało wytykajcie w komentarzach. Chcę zbierać feedback i nauczyć się dobrze tego środowiska bo do tej pory pracowałem głównie z backendem.
Leave a Comment