w Praktyce
6 godz. 51 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorNarzędzia typu ESlint, Prettier, Husky czy lint-staged niezmiernie pomagają nam w pracy. Problem jednak polega na tym, że ich konfiguracja bywa kłopotliwa. W tym kursie dowiesz się, jak poprawnie skonfigurować te narzędzia, tak, aby nie wchodziły ze sobą w konflikty i pomagały nam pisać lepszy kod.
Brzmi jak zły pomysł? Wcale nie! CSS in JS to rewolucyjne podejście, które pozwala nam tworzyć style bezpośrednio w komponentach. Dzięki bibliotece Styled Components możesz wpływać na ich stan, wygląd i wiele innych rzeczy. To niezwykłe narzędzie, wprowadzające powiew świeżości dla ludzi zmęczonych czystym CSS.
Dokumentowanie wyglądu i zachowania naszych komponentów bywa kłopotliwe. Jeśli jednak użyjemy odpowiednich narzędzi, staje się banalne! Storybook w połączeniu z podejściem atomic design pozwoli nam na stworzenie świetnie udokumentowanych komponentów.
React w Praktyce nie byłby... praktyczny, gdyby nie pokazanie tego, w jaki sposób rozwiązuje się problemy z layoutem aplikacji. Sidebary, szablony, powtarzalne komponenty – to wszystko poznasz w tym kursie.
Tworzenie store, czyli warstwy z danymi w naszej aplikacji dla wielu bywa wyzwaniem dość trudnym. Wynika to często z tego, że przykłady Reduxa bywają niepraktyczne. W tym kursie dowiesz się, w jaki sposób działa Redux – zaczniemy od podstaw, a skończymy na rozbudowanej strukturze danych. Dzięki temu zobaczysz, że nie taki Redux straszny jak go malują.
Aplikacja frontendowa bez backendu może istnieć, choć jej możliwości będą zdecydowanie ograniczone. A już na pewno będzie ona miała kiepską pamięć. Dlatego w tym kursie stworzymy lokalną wersję backendu połączoną z MongoDB na mLab. W ten sposób będziemy mogli dłużej przechowywać dane zapisane w naszych komponentach.
O testach można mówić wiele. To niezwykle rozległy temat, dlatego zanim zaczniesz je pisać na poważnie, chcę Ci pokazać jak możesz poćwiczyć podstawowe rzeczy. Poznasz narzędzie JEST, które odpowiada za uruchamianie testów, oraz wprowadzę Cię do react-testing-library, jednej z najpopularniejszych bibliotek do testowania aplikacji reactowych.
Ten kurs przeznaczony jest dla osób, które lada dzień będą aplikować na stanowiska juniorskie jako React developer. Zawarłem w nim wiele aspektów pracy z React, które zdarzają się w prawdziwej pracy. Ponadto skorzystać mogą z niego osoby, które znają inny framework JS i chcą nauczyć się Reacta, jednak kursy od podstaw są dla nich zbyt proste.
16.8.x
Cześć, w tej lekcji zajmiemy się naprawieniem tego komponentu, który powinien
być czystą funkcją, z resztą o tym podpowiada nam sam linter, więc teraz
to zrobimy, przeniesiemy
po prostu tego JSX'a tutaj. Jak
widzisz ESlint pokazuje nam jeszcze jeden błąd, że
ten plik powinien mieć zakończenie JSX. Oczywiście my
wiemy czego chcemy i nie chcemy mieć takich zakończeń w naszym projekcie. Zresztą
w praktyce nigdy jeszcze nie widziałem, żeby ktoś pisał pliki JSX.
Zawsze są to pliki JS, więc teraz skopiujemy sobie nazwę
tego błędu, który nam tutaj wyskoczył. Otworzymy przeglądarkę i generalnie
zawsze jak się wpisuje w wyszukiwarce nazwę konkretnej
reguły to możemy sobie zobaczyć jaka jest jej dokumentacja i jak możemy
ją modyfikować i w tym przypadku chcemy dodać coś takiego do
naszego ESlintrc, czyli do tego pliku konfiguracyjnego. Skopiujemy
sobie tę regułę, otworzymy ESlintrc, dodamy
tutaj pole Rules, to
będzie tablica zawierająca, dodamy
sobie tutaj klucz Rules, który będzie zawierał obiekt i ten
obiekt będzie zawierał taką regułę. Do tego obiektu możemy dodawać
mnóstwo reguł, na razie dodamy tylko te jedną i wywalił nam tutaj JSX.
Zostawimy tylko JS, jeszcze
tylko taka krótka struktura tego jak to wygląda. Tutaj
mamy nazwę reguły, nazwa reguły później zamknięta jest w tablicy
i pierwszym argumentem jest true false czyli, 0 to
jest wyłączona reguła 1 to jest włączona reguła, w niektórych
regułach możemy jeszcze włączyć error, wtedy ta reguła rzuca
nam błędem albo jeśli jest to coś mniej poważnego, może po prostu nas
ostrzec i wtedy nie wywala nam się linter, więc są
też takie opcje, my zostawimy tutaj sobie po prostu jedynkę i teraz
jak wrócimy do naszego app js, to to ten błąd powinien już zniknąć i faktycznie
tak jest. Został nam jeszcze tutaj jeden błąd, związany z tym, że
nie importujemy już komponentu, liter dobrze o tym wie, dlatego mówi słuchaj, już
tego nie potrzebujesz, więc możemy to wyrzucić. Okej, jeśli
nasze pliki zostały skonfigurowane poprawnie i jeśli plugin eslint
również działa poprawnie, to teraz jeśli coś zepsuje w moim pliku, na przykład
tutaj usunę średniki. Tutaj wrzucę cudzysłów
zamiast apostrofu to
nie dość, że eslint podkreśla mi takie rzeczy, to mogę je jeszcze naprawić
automatycznie poprzez zapisanie pliku i faktycznie tak
się dzieje. Jeśli u ciebie nie jest to, jeśli
u ciebie tak się nie dzieje to możesz włączyć ustawienia swojego
edytora, wpisać tutaj eslint i znaleźć
wartość auto fix and save. Jeśli jest wyłączona
to musisz ją włączyć i wtedy coś takiego będzie się działo. Dodatkowo
jeśli chcesz, żeby to auto naprawianie
znajdowało się pod jakimś skrótem klawiszowym, to również możesz to zrobić. Możesz
również się dostać do niego z tego poziomu, ja wciskam Command Shift i
P, tutaj wyświetla mi się panel i tutaj mam skrót fix all autofixable problems i
tutaj uwaga nie wszystkie problemy ESlinta są samonaprawialne,
czyli bywają takie błędy jak na przykład użycie klasy
zamiast funkcji, które trzeba naprawić samodzielnie w tym linter nam nie pomoże. Dodatkowo istnieją
takie rodzaje błędów, które linter teoretycznie sam naprawia,
ale trochę też psuje. Na przykład jeśli zrobimy coś takiego to
linter mówi nam, że nie powinniśmy mieć kilku propsów na jednej linijce i on
oczywiście zaraz to naprawi tylko że nie zrobi nam indentacji i teraz
żeby to naprawić moglibyśmy to zrobić ręcznie. Mamy
też na przykład błędy związane z długością linijek. Jeśli teraz dodam
tutaj jakiś dłuższy tekst, to
zauważysz, że mamy tutaj błąd o przekroczeniu długości linijki
natomiast linter nic z tym nie robi. Do tego typu błędów warto
zintegrować w projekcie razem z ESlintem auto formatter, który
nazywa się prettier jest to narzędzie bardzo popularne i wraz
ze ESlintem pomoże nam w tym, aby nasz projekt po prostu wyglądał lepiej
i działał lepiej i za chwilkę go zainstalujemy w następnej
lekcji.