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 chciałem ci pokrótce opowiedzieć czego tak naprawdę dowiesz
się w tym kursie i przede wszystkim chciałbym to jeszcze raz podkreślić, dowiesz
się jak myśleć praktycznie w kontekście budowania aplikacji internetowej,
czyli dowiesz się jak radzić sobie z prawdziwymi problemami React developera
czy w ogóle deweloperów gdzie szukać odpowiedzi i jak szukać tych odpowiedzi,
czy pozostaje nam wyłącznie dokumentacja czy może korzystamy jeszcze ze stack overflow,
a może zaglądamy na przykład do repozytoriów innych deweloperów, tego
wszystkiego dowiesz się w tym kursie. Na pewno będziemy bardzo często wracać
na te stronę, czyli do dokumentacji React'a, pokażę ci też
takie narzędzie jak na przykład postman dzięki którym możemy zintegrować naszą aplikacje
z restowym API, czyli innymi słowy z backendem. Postman
jest to aplikacja, która pozwala nam odpytywać backend i sprawdzać co nam wysyła,
także zanim zaaplikujemy jakieś konkretne zapytania
w naszej aplikacji, żebyśmy mogli sobie po prostu przetestować ten backend jak
on działa i tak dalej. Następnie opowiem ci o takich rzeczach jak stealth
components, czyli tak zwanym css-in-js będziemy pisać
style wewnątrz plików React'owych i uwierz mi to tylko
na początku brzmi jak zły pomysł, to jest naprawdę świetna technologia i zobaczysz,
że nieraz nam uratuje skórę, jeśli mówimy też o stylach, to
pokażę ci Czym jest storybook, to właśnie w nim Będziemy tworzyć ten design system o którym
mówiłem w poprzedniej lekcji. O tym w ogóle opowiem ci dość sporo
więc na razie przemilczę cały ten temat, ale uwierz mi to jest naprawdę doskonałe
narzędzie. Dowiesz się też jak testować aplikacje React'owe,
pokażę ci czym jest Jest, pokażę ci czym jest React Testing
Library, a także porównam go po krótce do enzyme, którego
zdaje się, że jak React Testing Library powoli wypycha, ale o
tym też opowiem trochę później, dowiesz się też
czym jest redux, ponieważ będziemy korzystać z redux'a jako właśnie z tego naszego
data layer naszej aplikacji, czyli tej warstwy, w której będziemy przechowywać
wszystkie niezbędne dane, które muszą być współdzielone ze wszystkimi
komponentami naszej aplikacji, a jeśli już wspominałem o danych. Wspominałem o API,
to ciężko żebym nie wspomniał o axios'ie, czyli o bibliotece,
która pozwala nam na asynchroniczne zapytanie właśnie do naszego backendu
o tak zwane odpytywanie endpoint'ów z których będziemy mogli sobie pobierać
nasze dane do aplikacji, a także zapisywać nasze notatki i dzięki
metodzie post wysyłać je po prostu na nasz backend, żeby to było zapisane już
na zawsze, a przynajmniej do momentu kiedy tego nie usuniemy. Oczywiście
w tym kursie dowiesz się jeszcze wielu, wielu innych rzeczy, o których tutaj nie wspomniałem. Chciałem
tylko pokazać takie kilka przykładów czego możesz się spodziewać
po tym kursie. Mam nadzieję, że ci się to podoba. A już teraz ruszamy
do pracy, nie ma czasu do stracenia, musimy w końcu skonfigurować naszą aplikacje.