React: Podstawy

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.