React: Renderowanie warunkowe i animacje

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się stworzyć panel, który pozwala nam na dodawanie nowych

0:04notatek, twitter'ów albo artykułów, ale właśnie, żeby on spełniał ten warunek, żebym

0:08mógł dodawać jedno, drugie albo trzecie, to musimy tutaj zrobić

0:12warunkowe renderowanie niektórych elementów, żeby po prostu wszystko

0:16nam tutaj się zgadzało, więc pierwsze, co chcemy zrobić, to sprawdzić

0:21jakie mamy placeholder'y tutaj w tym miejscu mamy title,

0:25account name i title i w artykułach mamy jeszcze link

0:29i to jest właściwie jedyna różnica, która tutaj się

0:33pojawia jeśli chodzi o liczbę input'ów, więc możemy sobie skopiować

0:37tutaj jedno. Stworzyć link i dodać warunek,

0:41że jeśli Page Context to artykuł, wtedy

0:49niech wrzuci nam tutaj jeszcze jeden input. Teraz

0:54jak wedziemy sobie do artykułów, to faktycznie mamy nasz link. Możemy tylko dodać

0:58sobie do naszego input tutaj jakiś się padding,

1:02jakiś margin, więc

1:07teraz to zrobimy, okej.

1:13Teraz wygląda to nieco lepiej i drugą rzeczą która nam tutaj robi

1:17różnicę jest właśnie ten placeholder w tym miejscu, tutaj musi być account

1:21name, więc w naszym placeholderze tutaj

1:25też możemy zrobić sobie warunek, który mówi, że jeśli page

1:30context to twitters, wtedy

1:34niech to będzie account name. Możemy podać nawet przykład,

1:39jak ma to wyglądać, żeby użytkownik wiedział, że chodzi o ten, o taką nazwę

1:43formalną z twittera, a nie ten taki tytuł, który się wyświetla, a jeśli

1:49nie to tutaj damy po prostu title i teraz jeśli wejdziemy

1:53sobie nad twitter'y to faktycznie mamy

1:57nasz placeholder, więc skoro to już mamy zrobione, możemy sobie wrócić teraz do

2:01naszego grid-template i sprawić, żeby ten sidebar pojawiał

2:05się tylko kiedy klikniemy na nasz przycisk, więc możemy

2:09sobie tutaj stworzyć klasę i teraz stwórzmy

2:18sobie funkcje handle new

2:23item bar toggle i ta funkcja będzie

2:27miała za zadanie tylko jedną rzecz. Zwrócenie nam this set state, w

2:31którym podamy sobie prev state i powiemy, że is new

2:36item bar visible. Powinno być zaprzeczeniem

2:40tego, co mieliśmy prev state, jest new item bar visible. Tutaj

2:46takie małe przypomnienie z poprzedniego kursu, set state działa synchronicznie, więc

2:50jeśli zmieniamy jakiś stan, a właściwie zaprzeczamy temu, który był wcześniej

2:54albo na przykład właśnie odwołujemy się w jakiś sposób do stanu, który był wcześniej to

2:58zawsze korzystamy z prev state, wtedy to jest taka bezpieczna kopia naszego stanu, który

3:02był przed tym zanim wywołaliśmy nasz set state, możemy się wtedy do niego odwołać

3:06i powiedzieć słuchaj, to co było wtedy prawdą albo fałszemm teraz ma być

3:10odwrotnie, więc skoro to już mamy zrobione to teraz wystarczy,

3:14że zrobimy coś takiego is visible. Wyciągniemy

3:26sobie z naszego state'u te wartość, podamy

3:32ją tutaj i dodatkowo nasz styled button icon on click

3:38będzie wywoływał this handle new item

3:42bar toggle. Jak wrócimy sobie do new item bar, który

3:46teraz dostaje props'a is visible, to

3:50możemy zrobić fajną rzecz z nim, a mianowicie podać go tutaj do naszego w wrappera. Domyślnie

4:00możemy ustalić sobie, że nasz sidebar do tworzenia notatek będzie

4:05o 100% przesunięty w prawo, więc będzie ukryty, ale

4:11dodatkowo możemy sobie zrobić właśnie translate, tutaj otworzyć funkcję

4:15strzałkową, wyciągnąć sobie is visible i powiedzieć słuchaj, jeśli is visible,

4:20to prawda, wtedy niech będzie zero, a

4:25jeśli nie prawda, to niech będzie ukryty i teraz

4:30jak kliknę sobie na nasz button to się chowa i pojawia, to jest super. Jeszcze

4:34możemy sobie zrobić transition i teraz powinniśmy mieć ładną animacje. Animacja

4:40nie działa, bo, bo tutaj mamy translate, a powinno

4:44być transform. Wydaje

4:48mi się, że ta sekunda będzie za długa, zdecydowanie. Myślę, że ćwierć

4:53sekundy spokojnie tu wystarczy. W porządku

5:00i tym sposobem stworzyliśmy sobie komponent,

5:05który pojawia się wtedy kiedy chcemy, żeby się pojawiał i wyświetla to, co chcemy żeby

5:09wyświetlał, więc w następnej lekcji stworzymy sobie mechanizm, który pozwala

5:13nam na dodawanie notatek. Tutaj jeszcze tylko taki mały drobny

5:17protip, bo jak widzisz tutaj animujemy za pomocą transform, translate

5:22i pamiętaj, że jakiekolwiek tego typu animacje zawsze

5:26powinny się odbywać właśnie za pośrednictwem transform, translate, a nie na przykład top left

5:31albo margin, nic w tym rodzaju, ponieważ wszystkie

5:35inne właściwości CSS trigerują nam paint, a właściwie

5:39repaint całego naszego layout'u i to jest jedyny sposób na

5:43to, żeby nasze animacje były jak najbardziej płynne, jak najbardziej wydajne i

5:47zabierały jak najmniej pamięci urządzenia, na którym pracujemy, więc najłatwiej

5:52to wszystko zapamiętać w taki sposób, że jeśli już mamy coś animować na naszej

5:56stronie, to najlepiej, żeby to był transform i opacity. To są takie dwie

6:00rzeczy, które możemy bez żadnych problemów animować na naszych stronach. Wszystko

6:05inne, co chcemy animować, wszystkie inne właściwości powinny budzić nasz

6:09niepokój i powinniśmy się 10 razy zastanowić czy chcemy to animować i to

6:13na tyle, jeśli chodzi o takiego protip'a ode mnie.