NPM vs NPX
NPM (Node Package Manager) to jak olbrzymi magazyn z narzędziami dla programistów. Umożliwia dodanie do „projektowego plecaka” wszelkich narzędzi potrzebnych do budowy aplikacji. Z NPM możesz zarządzać zależnościami w projekcie, instalując, aktualizując oraz usuwając pakiety.
NPX (Node Package Execute) pozwala natomiast „pożyczyć” narzędzie na jedno użycie bez konieczności jego instalacji. To świetne rozwiązanie, gdy potrzebujesz coś szybko sprawdzić lub uruchomić projekt, nie zaśmiecając swojego środowiska pracy niepotrzebnymi pakietami.
React.StrictMode – Inspektor kodu
To narzędzie podobne do doświadczonego mentora, który patrzy na Twoje ręce podczas pisania kodu. React.StrictMode pomaga unikać przestarzałych i potencjalnie niebezpiecznych praktyk. Dzięki niemu, Twoje aplikacje są szybsze, bardziej bezpieczne i gotowe na przyszłość.
reportWebVitals – Monitor wydajności aplikacji
Wyobrażając sobie reportWebVitals jako mechanika aplikacji webowej, jego zadaniem jest dbanie o to, by aplikacja działała płynnie i efektywnie. Skupia się na wydajności, szybkości ładowania, interaktywności, oraz stabilności wizualnej, dostarczając cenne metryki dotyczące rzeczywistej wydajności aplikacji.
manifest.json
Plik manifest.json jest jak spis treści książki o Twojej aplikacji. Informuje przeglądarkę, jak aplikacja powinna się prezentować, jakie ikony użyć, jakie kolory dominują, oraz jakie uprawnienia posiada. To Twoja szansa, aby zrobić doskonałe pierwsze wrażenie.
npm eject – kiedy potrzebujesz więcej kontroli
Komenda npm eject pozwala na „rozpakowanie” konfiguracji Twojego projektu utworzonego za pomocą create-react-app. To jak przeprowadzka do pustego mieszkania, które możesz urządzić według własnych potrzeb. Jednakże, warto pamiętać, że ten proces jest nieodwracalny.
Render i Re-render – Jak React odświeża widok
Renderowanie odnosi się do procesu tworzenia i wstawiania struktury komponentów React do rzeczywistego DOM przeglądarki po raz pierwszy. Każdy komponent ma metodę render() która zwraca to co ma być wyświetlone.
Re-renderowanie następuje gdy istnieje zmiana stanu lub właściwości w komponencie co wymaga odświeżenie widoku. React decyduje kiedy aktualizować komponenty aby odzwierciedlić faktyczny stan. Nie działa to natomiast tak, że cała strona jest na nowo ładowana od zera. React aktualizuje jedynie część która tego wymaga.
Funkcyjne vs Klasowe Komponenty
Funkcyjne komponenty są jak notatki – proste, szybkie i skupione na zadaniu. Od wprowadzenia Hooków w React 16.8, stały się równie potężne jak klasowe komponenty, oferując prostszy sposób na zarządzanie stanem i cyklem życia komponentów. Klasowe komponenty przypominają pełne dzienniki, z miejsce na stan, metody cyklu życia i więcej. Wybór zależy od preferencji i specyfiki projektu.
Cykl życia komponentu React
W React, każdy komponent przechodzi przez trzy główne etapy życia: Montowanie, Aktualizacja i Odmontowanie. To jak narodziny, życie i śmierć w cyklu życia aplikacji. Zrozumienie tych etapów pozwala na efektywniejsze zarządzanie zasobami i lepszą optymalizację aplikacji.
Montowanie
React umieszcza komponent w DOM. Tu używasz 'componentDidMount’, aby wykonać kod który musi działać zaraz po tym jak komponent pojawi się na stronie. Na przykład możesz chcieć pobrać dane z zewnętrznego API.
Życie
Komponent aktualizuje sie kiedy zmieniają się jego stan lub właściwości. React sprawdza co się zmieniło i odpowiednio aktualizuje tylko te części DOM które muszą zostać zmienione. W tej fazie działają metody takie jak 'shouldComponentUpdate’ oraz 'componentDidUpdate’
Śmierć
Odmontowanie czyli komponent jest usuwany z DOM. Jest to moment w którym wykonujesz wszelkie działania czyszczące, na przykład anulujesz wszelkie aktywne zapytania sieciowe lub usuniesz timer ustawiony w komponencie. Używasz do tego 'componentWillUnmount’.
Obsługa błędów
Metoda componentDidCatch pozwala na przechwycenie i obsługę błędów w komponentach potomnych. Dzięki niej, możesz zapewnić lepsze doświadczenie użytkownika, nawet gdy coś pójdzie nie tak, wyświetlając np. przyjazne komunikaty błędów.
