Techniki Zaawansowane
6 godz. 6 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorJeden z pierwszych i najbardziej popularnych wzorców w React, który przez lata był traktowany jako najlepszy sposób na wydzielanie logiki z komponentów i współdzielenie jej w wielu miejscach aplikacji. W kursie na przykładzie dowiesz się w jaki sposób można wykorzystać HOC, a także jak łączyć je ze sobą tworząc bardziej zaawansowane struktury.
Obecnie Render Props jest jedną z najczęściej wykorzystywanych praktyk pozwalającą, podobnie jak HOC, na tworzenie abstrakcji, z których możemy czerpać dane lub zachowania potrzebne w naszych komponentach. Na pierwszy rzut oka Render Props mogą przerażać, ale spokojnie – zaczniemy od prostego przykładu, który pozwoli Ci zrozumieć, że nie ma się czego bać.
Hooks to temat niezwykle ciekawy i populary, ale rzadko poruszany w sposób bardziej zaawansowany. W tym kursie dowiesz się nie tylko jak używać takich hooków jak useState, useReducer, useEffect, useContext czy useRef, ale też jak napisać swoje własne hooki, które niesamowicie uprzyjemnią pracę z Reactem.
Compound Components to prawdziwa "ciężka artyleria" Reacta – stosowana w zadaniach wymagających sporej złożoności. Ewoluowała przez lata i kiedyś zawsze spotykana była w formie klas, natomiast w tym kursie proponujemy nieco lżejsze podejście. Dowiesz się jak wykorzystując hooki możesz stworzyć Compound Component wyłącznie przy użyciu komponentów funkcyjnych.
Testy to hasło, które potrafi wzbudzić lęk u osób uczących się Reacta, lub jakiejkolwiek innej technologii. Rzadko kto jednak mówi to głośno – testy są przyjemne! Wystarczy tylko zrozumieć w jaki sposób środowisko testowe działa i jakimi rządzi się zasadami. Przerobimy to wszystko wspólnie, a na koniec kursu przekonasz się, że to faktycznie ciekawe i przyjemne zagadnienie.
W kursie przygotowana jest też garść dobrych praktyk, które pozwolą Ci spojrzeć krytycznie na niektóre fragmenty kodu i ulepszać je w taki sposób, aby stanowiąc część większej całości miały więcej sensu i wdzięku. Dowiesz się czym jest Single Responsibility Principle, jak wydzielać odpowiednio logikę z komponentów i paru innych ciekawych wskazówek.
Ten kurs został stworzony z myślą o programistach swobodnie poruszających się po podstawach i nieco bardziej skomplikowanych partiach Reacta, ale nadal czujących, że brakuje im czegoś, aby wynieść swoje aplikacje na jeszcze wyższy poziom. Rzeczy związane z zaawansowanym JavaScriptem będziemy tu wykorzystywać intuicyjnie, bez zbędnego tłumaczenia, dlatego zanim przystąpisz do tego kursu, upewnij się, że treści React od Podstaw oraz React w Praktyce są dla Ciebie jasne i zrozumiałe.
16.8.x
Cześć w poprzedniej lekcji udało nam się stworzyć logikę która pozwala
naszemu compound component wiedzieć ile stron zostało użytych wewnątrz niego
to znaczy jeśli mamy tutaj 3 strony i 3 różne
indeksy to nasz compound component dokładnie wie ile tych stron będzie i możemy
to poznać po tym że wyświetla nam się na przykład submit button ponieważ
to on wie że jeśli jesteśmy na ostatniej stronie ze wszystkich tutaj stworzonych
to wtedy ma właśnie się pojawić to
co jeszcze jest ciekawe to że teraz nasze rozwiązanie jest odporne
na tego typu rzeczy które wcześniej nie mogło mieć miejsca
przy pomocy tej funkcji react children map którą pokazywałem teraz
nic nam się tutaj nie dzieje oprócz tego że trochę nam się style wywalają natomiast nadal
wszystko działa tak jak trzeba na trzeciej stronie widzimy submit button wywalmy
sobie teraz tego diva żeby tu był porządek i w ramach takiego ostatniego ćwiczenia
jeszcze stworzymy sobie ostatni komponent który również wykorzystany w naszym compound
component i będzie on wykorzystywał tę logikę którą stworzyliśmy przed chwilą nazwiemy
go progress bar i pewnie jak się domyślasz będzie to
po prostu pasek postępu który będzie pokazywał nam w którym miejscu w danej
chwili się znajdujemy na pewno będzie korzystał z kontekstu z
którego będzie wyciągać current page indexes
i myślę że możemy go stworzyć w formie takiego bardzo prostego diva on nie będzie piękny ale
będzie działać stworzymy sobie tutaj div this
i drugi div możemy
nawet zastosować inline'owe style wiem że nie powinniśmy tego robić w taki sposób ale możemy
sobie ten raz na to pozwolić powiedzmy że będzie miał 500
pikseli szerokości 20
pikseli wysokości może wyciągnijmy sobie tylko te style
do zewnętrznego obiektu oczywiście robię to na potrzeby tylko i wyłącznie tego przykładu
normalnie moglibyśmy stworzyć te style po
prostu w css'ach wyeksportujemy
sobie to szybko możemy teraz wyświetlić sobie na przykład pod naszymi
kontrolkami znasz multi-step progress
bar okej widzimy nasz progress bar jak
mu damy 100% to się dopasuje super teraz się dopasował do szerokości jest
trochę za gruby dobra i teraz ostylujemy sobie ten drugi ten
drugi powiedzmy że będzie miał niebieski kolor jedyne
co tutaj musimy zrobić to dynamicznie nadawać długość a
możemy to zrobić w bardzo prosty sposób po prostu dzieląc bieżącą
stronę przez ilość wszystkich stron
mnożąc to przez 100 i dodając na
końcu oczywiście procent i
właściwie to cała filozofia jeśli chcielibyśmy żeby on na przykład się
animował moglibyśmy użyć tutaj
czegoś takiego i
zamiast tej logiki tutaj ponieważ animowanie
szerokości jest nieoptymalne z punktu widzenia javascriptu czy z punktu widzenia
css'a to tutaj
możemy sobie użyć scale czyli właściwie to
transform scale tutaj
bez tych procentów czyli
nadajemy 100% szerokości a później skalujemy
sobie ten element oczywiście na osi x jeszcze musimy dodać
transform origin który będzie
wynosił 0% na osi x i 50%
na osi y wtedy się będzie zaczynał od lewej strony super i teraz jak
klikniemy to mamy fajny animowany progress bar prosty
jak barszcz z taką dynamiczną tylko tutaj kalkulacją jego długości
i w ten sposób stworzyliśmy sobie kolejny element który możemy wykorzystać
w wielu miejscach w naszej aplikacji właśnie w compound components i
teraz jeszcze raz podkreślę nie jest to rozwiązanie które stosujemy na codzień
w aplikacjach react'owych jest raczej taka egzotyka częściej spotykana
na przykład właśnie w paczkach bibliotekach npm'owych które wykorzystujemy w naszych aplikacjach
natomiast są oczywiście takie miejsca gdzie będzie to najbardziej optymalny
pattern które możemy wykorzystać i właśnie największym usprawiedliwieniem
dla tego typu rozwiązania jest konieczność posiadania zespołu komponentów
które tak naprawdę poza sobą nie nie mogą istnieć czyli wszystkie te elementy
poza wizardem nie mogłyby istnieć po co nam gdzie
indziej w aplikacji page na przykład no tutaj ten progress bar jest taki naciągany bo
mógł to by być osobny komponent który dostaje propsy ale wydawało mi się że
jest to po prostu taki fajny też przyjemny dla oka przykład który ma
też swoje zastosowanie właśnie w takim miejscu że on jest jakby wtedy
kompletną częścią tej nazwijmy to takiej naszej mini biblioteki która
daje nam możliwość posiadania multi step
forma czy też po prostu może jakiegoś nie wiem onboardingu
ponieważ tutaj nie musi być przecież indeks tutaj może być na przykład jakieś informacje o aplikacji
wdrażamy użytkownika w jakieś funkcje
która nasze aplikacje to jest taki właśnie samouczek no jest tutaj mnóstwo zastosowań
tego typu komponentu więc myślę że to jest takie fajne w wielu miejscach w
aplikacji pewnie można by było to zastosować wizualnie wtedy to by było podobne logika
byłaby współdzielona a to co znajduje się wewnątrz tych elementów to
już jest nasza sprawa więc podkreślam na pewno nie jest to narzędzie które wepchniemy
po prostu kolanem w każdy komponent żeby tylko go użyć raczej trzeba go używać
z głową natomiast jest to bardzo ciekawe narzędzie które też daje taką fajną świadomość
tego jak działa react i jak do jakich granic możemy poszerzyć jego
możliwości a wiadomo że my tutaj tylko mówi po angielsku scratch
the surface czyli tak dotknęliśmy powierzchni tej materii
więc wszystko przed tobą mam nadzieję że wykorzystasz ten pattern
w jakiś ciekawy sposób we własnych aplikacjach