React: Twój kompletny przewodnik dla początkujących dotyczący korzystania z ReactJS

Słyszałeś o ReactJS, ale nie wiesz od czego zacząć? Czy zacząłeś bawić się ReactJS, ale nie jesteś pewien, jak używać go na co dzień? Ten artykuł będzie Twoim przewodnikiem po nauce i opanowaniu biblioteki React JavaScript, najpopularniejszej biblioteki używanej obecnie przez programistów. Pokażę ci dokładnie, jak rozpocząć pracę z ReactJS i jak zintegrować go z przepływem pracy, aby móc tworzyć bardziej dynamiczne interfejsy użytkownika bez konieczności omijania innych frameworków lub bibliotek. Zacznijmy!

Co to jest ReactJS?

React to front-endowa biblioteka programistyczna, która zachęca do tworzenia komponentów wielokrotnego użytku. Jeśli szukasz wydajnego sposobu tworzenia interfejsów użytkownika, React może być właśnie tym, czego potrzebujesz. Tworząc interfejsy użytkownika za pomocą Vanilla JavaScript lub jQuery, Twój kod może bardzo szybko stać się bardzo skomplikowany i nieporęczny. Korzystając z Reacta i jego preferowanej metody programowania opartego na komponentach, Twój kod będzie znacznie łatwiejszy do ponownego użycia i utrzymania.

W rzeczywistości, gdy już zbudujesz kilka komponentów, inni programiści w Twoim zespole mogą stosunkowo łatwo wskoczyć i dodać kod bez żadnego doświadczenia (lub wiedzy o) React!

Polecane dla Ciebie: 5 wartościowych wskazówek, jak zoptymalizować wydajność aplikacji React Native.

Dlaczego warto korzystać z ReactJS?

Przede wszystkim masz przed sobą wybór, jeśli chodzi o frameworki JavaScript. Dlaczego miałbyś wybrać React? Cóż, na początek, jeśli chodzi o pomoc programistom w tworzeniu dużych aplikacji, które są łatwe do zrozumienia dla użytkowników końcowych.

Dla programistów, którzy do tej pory pracowali tylko z jQuery lub Vanilla JavaScript, nauka pracy z nowymi technologiami może być frustrująca. W niektórych przypadkach programiści mogą potrzebować setek wierszy kodu, aby utworzyć proste pole modalne lub pasek nawigacyjny. Ponieważ React używa wirtualnego DOM zamiast pisać i przepisywać prawdziwe elementy DOM za każdym razem, gdy następuje zmiana stanu (co często ma miejsce w Angularze), użycie Reacta może zaoszczędzić cenny czas, pozwalając na mniej linii kodu, a jednocześnie przyspieszając aplikacje zanim.

Instalacja w przeglądarce

Zanim będziesz mógł korzystać z Reacta w przeglądarce, musisz go zainstalować. Na szczęście jest to prosty proces dzięki npm i Browserify. Używasz Node lub innego środowiska po stronie serwera? Możesz również użyć do tego npm i Browserify. Po zainstalowaniu wszystkiego utwórz plik HTML za pomocą ulubionego edytora tekstu. W przeciwnym razie użyj generatora szablonowego, takiego jak Create-React-App, który tworzy dla Ciebie podstawowy projekt startowy, który ma już wszystkie te rzeczy skonfigurowane.

Konwersja App.js do ReactJS

Cały nasz kod znajduje się obecnie w jednym pliku o nazwie App.js. Ale to utrudnia testowanie. Więc podzielmy to na wiele plików. Zaczniemy od przekształcenia jednego komponentu z napisanego w ES6 na napisany w JSX. Najprościej jest, jeśli wszystkie nasze komponenty React przechowujemy w jednym katalogu (co powinieneś zrobić). Stwórzmy więc pusty katalog src/components i przenieś do niego App.js: mv app/App.js src/components/app-react.js. Następnie zmień jego nazwę na app-react.js.

Aby używać Reacta zamiast samego ES6, zmień use strict; na górze pliku, aby użyć babel; Będziesz także musiał zainstalować Babel przez npm install –save babel-CLI babel-preset-es2015 babel-preset-react, co spowoduje, że Babel skompiluje twoją nową składnię JSX.

Zacznij budować z naszą przykładową aplikacją

Istnieje wiele sposobów na rozpoczęcie pracy z Reactem, ale jednym z naszych ulubionych jest stworzenie prostej aplikacji z listą zadań do wykonania. Aby przyspieszyć działanie i uniknąć wielu typowych błędów, zbudowaliśmy przykładową aplikację, w której wszystko, co musisz zrobić, to zamienić kod zaplecza i komponenty frontonu. Jest wyposażony we wszystko, czego potrzebujesz — w tym obrazy — aby upewnić się, że wygląda tak dobrze, jak działa.

Nie masz ochoty na kodowanie? Nie ma problemu! W rzeczywistości możesz skopiować wszystkie nasze komponenty, wykonując te proste kroki. Skopiuj je do swojego projektu, po prostu zmodyfikuj je tak, aby odpowiadały Twoim celom! Wybór nalezy do ciebie! Sprawdź wszystkie trzy opcje rozpoczęcia pracy tutaj.

Podstawowy przykład z użyciem komponentów

Jeśli spojrzysz na dowolną aplikację internetową, jedną z pierwszych rzeczy, które zauważysz, jest to, że każdy element jest osobny. Na typowej stronie znajdują się różne nagłówki, stopki, logo i przyciski. Jednak podczas pracy z React.js, zamiast używać wielu elementów HTML dla każdego komponentu na stronie, możesz użyć jednego elementu HTML do reprezentowania ich wszystkich. Może to brzmieć sprzecznie z intuicją; w końcu, czy to nie jest to, co robimy od lat?

Możesz polubić: Facebook JavaScript Engine (Hermes) usprawnia React Native na Androida.

Wprowadzenie do składni JSX

JSX nie jest językiem programowania takim jak JavaScript czy TypeScript, ale składnią, która została zaprojektowana jako rozszerzenie JavaScript. Z tego powodu ważne jest, aby nowi programiści zrozumieli, jak to działa i gdzie można z niego korzystać. Kod JSX jest napisany w sposób bardzo podobny do HTML, dzięki czemu kod JSX jest świetnym pierwszym krokiem dla nowych programistów, którzy uczą się obu języków jednocześnie. Aby uzyskać więcej informacji o tym, co sprawia, że ​​JSX jest wyjątkowy i jak łatwo go opanować, przeczytaj nasz pełny samouczek ReactJS!

Aby rozpocząć budowanie swojego pierwszego projektu React, utwórz nowy katalog, wpisując mkdir React_tutorial w swoim terminalu. Po zakończeniu pracy przejdź do nowo utworzonego katalogu, wpisując cd react_tutorial. Następnie otwórz terminal i uruchom Node.js, wpisując node -v.

Powinieneś zobaczyć v10.x na liście Node, jeśli Node został zainstalowany pomyślnie. Jeśli nie, spróbuj użyć nvm install 10, jeśli używasz macOS lub Linux. Jeśli to też nie zadziała, Google powinno być w stanie pomóc w ustaleniu, co tam jest nie tak! Gdy Node zostanie poprawnie zainstalowany w wersji 10+, jesteśmy gotowi, aby przejść do tworzenia naszego projektu od zera!

Statyczne vs dynamiczne vs PureComponent

Tworząc aplikacje internetowe z nowoczesnym JavaScriptem, masz trzy główne opcje tworzenia komponentów interfejsu użytkownika. Obejmują one statyczny HTML (react-markup), dynamiczne żądania AJAX (react-data) oraz ponowne wykorzystanie istniejących elementów DOM (react-pure). Każda metoda ma swoje zalety i może być stosowana w różny sposób w zależności od konkretnego przypadku użycia.

Na przykład, jeśli wiesz, że pewne elementy będą zawsze dostępne, możesz umieścić je w statycznych znacznikach HTML. Jeśli jednak musisz pobierać treści z baz danych, które mogą jeszcze nie istnieć, lepszym wyborem jest użycie React-data. Przy podejmowaniu decyzji, która metoda tworzenia komponentów najlepiej pasuje do Twojego projektu, ważne jest, aby zastanowić się, jak stabilna i trwała będzie każda część Twojej aplikacji.

Metody cyklu życia w komponentach ReactJS

Istnieje kilka metod cyklu życia, których możesz użyć w swoich komponentach, aby kontrolować różne części ich cyklu życia. Metoda componentWillMount() jest wywoływana bezpośrednio przed pierwszym renderowaniem składnika. W nim możesz dodać dowolne inicjalizacje, których potrzebujesz dla swojego komponentu, takie jak zapisywanie informacji za pomocą localStorage. Metoda componentDidMount() jest również wywoływana natychmiast po zamontowaniu i wyrenderowaniu składnika. Tutaj możesz dodać kod, który powinien zostać uruchomiony po pełnym zainicjowaniu komponentu (na przykład tworząc nowe żądania sieciowe).

Obsługa stanu w komponentach

Sposób, w jaki Reacts podchodzi do zarządzania państwem, jest dość wyjątkowy. Aby zrozumieć, dlaczego musimy najpierw zastanowić się, jak większość frameworków obsługuje stany.

Tradycyjnie programista uważa, że ​​stan komponentu jest przechowywany w nim samym. Prowadzi to do wielu problemów. Jeśli jeden komponent chce zaktualizować stan innego komponentu, potrzebuje odniesienia (props) do tego drugiego komponentu, aby to zrobić. A jeśli chcesz, aby obiekty stanu lub tablice pozostały zsynchronizowane między komponentami, potrzebujesz jakiegoś scentralizowanego magazynu danych lub emitera zdarzeń, do którego mają dostęp wszystkie komponenty.

I chociaż może to być wystarczająco proste dla komponentów w małej aplikacji z tylko dwoma lub trzema różnymi stanami, co się dzieje, gdy Twoja aplikacja ma dziesiątki różnych stanów? Jak zarządzasz nimi wszystkimi?

Przekazywanie danych z komponentu nadrzędnego do komponentu potomnego

Istnieją dwa sposoby przekazywania danych z komponentu nadrzędnego do komponentu potomnego: poprzez właściwości lub stan. Przekazywanie danych przez props może być przydatne do definiowania zmiennych dla komponentów, takich jak definiowanie liczby elementów w tablicy. Z drugiej strony przekazywanie danych przez stan może być przydatne, jeśli chcesz przekazać duże obiekty (co może potencjalnie spowolnić działanie aplikacji) lub zdefiniować funkcje, które chcesz wywoływać z komponentu podrzędnego. Przeanalizujmy oba podejścia i zobaczmy, kiedy warto ich użyć w naszym kodzie!

Możesz również chcieć: Jakie są ulepszenia, które reagują na oferty JS w Headless WordPress?

Wniosek

Zatrudniając programistę ReactJS upewnij się, że wybierasz freelancera, który ma doświadczenie w pracy z JavaScript, CSS, HTML i Node.js od ponad 5 lat. Ważne jest, aby Twój programista mógł wykazać się swoją wiedzą, dostarczając przykładowe projekty i projektując projekty, które są odpowiednie dla Twoich konkretnych wymagań. Pomoże im to łatwo zrozumieć Twoje cele biznesowe i cele.

Każdy ekspert zawsze zaczyna od zadawania pytań przed rozpoczęciem jakiejkolwiek pracy. Dlatego przy tworzeniu strony internetowej z wykorzystaniem frameworka React konieczne jest zatrudnienie eksperta, który zadaje pytania w odpowiednim czasie. Średni koszt zatrudnienia programistów ReactJS wynosiłby od 40 do 100 USD za godzinę. Ale eksperci pobierają wyższe opłaty niż normalnie. Miej to na uwadze przy ustalaniu budżetu na założenie strony internetowej za pomocą frameworka programistycznego ReactJS.

 Ten artykuł został napisany przez Rahula Kalsariya z Tagline Infotech LLP.