Zaczęliśmy ten tydzień od szybkiego zatrzymania interfejsów programów aplikacji (w skrócie API). Są to przydatne metody, których używamy jako programiści (klienci) do pobierania potrzebnych informacji z baz danych (serwerów) w celu wyświetlenia tych informacji na naszej stronie.
Używamy żądań pobrania, aby „uzyskać” te informacje, a interfejs API pobierze je ze źródła w ten sam sposób, w jaki (dobrze wyszkolony pies — za to, Lassy) pobierze gazetę (obiekt) dla swojego właściciela (klienta) ze skrzynki na listy (serwer). Gdy żądasz informacji za pomocą interfejsu API, możesz odzyskać wszelkiego rodzaju obiekty danych — nauczyliśmy się więc, jak weryfikować naszą odpowiedź API (i sprawdzać, czy Lassy nie przyprowadziła do środka kolejnej wiewiórki) za pomocą programu o nazwie Postman, który pozwala nam zobaczyć pobieranie wynik, zanim zintegrujemy go z naszymi aplikacjami.
W drugiej połowie tygodnia przeszliśmy do nauki frameworka o nazwie React, który jest obecnie zdecydowanie najczęściej używaną i popularną biblioteką JS. Opracowany przez Facebooka, można go zobaczyć na stronach takich jak Instagram, The New York Times, Air BnB, Netflix i Dropbox.
Atrakcyjność dla programistów polega na tym, że pozwala nam deklaratywnie opisywać interfejsy użytkownika i wirtualnie zmieniać ich stan oraz DOM, co oznacza mniej kodu i łatwiejszy do naśladowania. I DOM, o który nie musisz się martwić (żegnaj queryselectorAll, au revoir getElementsByClassName, auf wiedersehen getElementById).
React jest modułowy i pozwala nam podzielić nasze witryny na zestawy komponentów, tj. paski nawigacyjne/źródła treści/linki społecznościowe, które możemy utworzyć raz i wykorzystać ponownie później, skracając czas programowania, dzięki czemu możemy przystąpić do testowania naszego kodu za pomocą Jest, który jest dostarczany w pakiecie z React wcześniej. Wreszcie React jest popularny, obecnie naprawdę popularny, co oznacza, że istnieje ogromna społeczność ze wsparciem dostępnym na Githubie i przepełnieniem stosu, a także przyzwoitym rynkiem pracy, kiedy nadejdzie ten dzień.
Po nauczeniu się, jak używać komponentów i rekwizytów, poruszyliśmy temat stylizacji SASS w reagowaniu i destrukturyzacji rekwizytów, aby uprościć nasze komponenty (więcej szczegółów tutaj: https://medium.com/@lcriswell/destructuring-props-in- reakcja-b1c295005ce0 ).
Popołudnia w tym tygodniu spędziłem na ponownym odwiedzaniu projektów z poprzedniego tygodnia, które wymagały trochę TLC. Ponownie odwiedziłem moją grę JS Tetris — przerobiłem kod, który się za nią kryje, tak aby przestał działać z opóźnieniami i awariami, a także dodałem trochę stylizacji. Muszę jeszcze dodać funkcję upuszczania, poziomy z rampą trudności i może jakieś efekty dźwiękowe.
Wróciłem także do wyzwania, jakim było zbudowanie tłumacza alfabetu Morse'a. W czasie, jaki mieliśmy, udało mi się stworzyć prostą aplikację, która mogłaby tłumaczyć angielski na alfabet Morse'a, ale nie robiłem nic więcej. Wracając do tego, napisałem funkcje tłumaczące alfabet Morse'a z powrotem na angielski i dodałem kilka stylów w stylu zimnowojennych szpiegów w SASS.
Jednym z głównych wyzwań, jakie napotkałem podczas dodawania drugiej funkcji tłumaczenia, było znalezienie sposobu na wyświetlenie jej na ekranie. Moim celem było naciśnięcie przez użytkownika przycisku w formularzu o nazwie Szyfruj, który przełączałby formularz z języka angielskiego na Morse'a na angielski w języku Morse'a. Wykonanie tego okazało się trudne; Wcześniej miałem problemy podczas wstawiania i usuwania elementów DOM do HTML w ramach funkcji JS — więc wiedziałem, że nie mogę po prostu wstawić nowego formularza do mojego kodu HTML. Zamiast tego zdecydowałem się wyrenderować obie formy na ekranie w tym samym czasie i znaleźć sposób na ukrycie jednej z nich.
Próbowałem używać klas CSS do ukrywania i wyświetlania moich formularzy. Pomyślałem, że naciskając Szyfruj/Deszyfruj użytkownik może dynamicznie dodawać/usuwać klasy do kontenerów obejmujących tłumaczy. Myślenie było słuszne, ale wykonanie było błędne. Najpierw użyłem display: none, który ukryje element. Jednak spowoduje to również, że detektory zdarzeń nie będą już widzieć elementu na stronie, co sprawi, że cały kontener stanie się bezużyteczny. Następnie wypróbowałem opcję visibility: none, ale to spowodowało, że moje kontenery wyświetlały się na stronie nieprawidłowo.
Ostatecznie znalazłem rozwiązanie, używając i przypisując pozycję: względną do treści oraz pozycję: bezwzględną do kontenerów, gdy użytkownik kliknie przycisk Szyfruj/Odszyfrujprzycisk. Spowodowało to przesunięcie wybranego pojemnika poza pole widzenia na ekranie i pozostawienie pozostałego pojemnika w miejscu, jak stwierdzono wcześniej. Zastosowałem także z indeks: -1 do ukrytego kontenera, aby mieć pewność, że znajduje się on za którymkolwiek z pozostałych elementów.
Przydatny fragment kodu, którego nauczyłem się w tym tygodniu, dotyczący wyszukiwania obiektów według ich kluczy
const getKeyByValue = (obiekt, wartość) =› {zwróć Obiekt.keys(obiekt).find((klucz) =› obiekt[klucz] === wartość);};
Aby wywołać funkcję
getKeyByValue(cel, wybrana wartość)
