React: Twój kompletny przewodnik po korzystaniu z ReactJS dla początkujących

Słyszałeś o ReactJS, ale nie wiesz od czego zacząć? Czy zacząłeś bawić się ReactJS, ale nie wiesz, jak go używać na co dzień? Ten artykuł będzie Twoim przewodnikiem po nauce i opanowaniu biblioteki React JavaScript, najpopularniejszej obecnie biblioteki używanej przez programistów. Pokażę ci dokładnie, jak zacząć korzystać z ReactJS i jak zintegrować go ze swoim przepływem pracy, abyś mógł tworzyć bardziej dynamiczne interfejsy użytkownika bez konieczności niepotrzebnego błądzenia po innym frameworku lub bibliotece. 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. Podczas tworzenia interfejsów użytkownika za pomocą Vanilla JavaScript lub jQuery kod może bardzo szybko stać się bardzo skomplikowany i nieporęczny. Używając React 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 zbudujesz kilka komponentów, innym programistom z twojego zespołu stosunkowo łatwo będzie wskoczyć i współtworzyć kod bez żadnego doświadczenia (lub wiedzy) z React!

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

Dlaczego warto używać ReactJS?

Przede wszystkim masz przed sobą wybór, jeśli chodzi o frameworki JavaScript. Dlaczego więc 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 i zaangażowania 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 stworzyć proste okno modalne lub pasek nawigacyjny. Ponieważ React używa wirtualnego DOM zamiast pisania i przepisywania prawdziwych elementów DOM za każdym razem, gdy następuje zmiana stanu (jak to często ma miejsce w Angular), użycie React może zaoszczędzić cenny czas, pozwalając na mniej wierszy kodu, a jednocześnie sprawiając, że aplikacje są szybsze niż były zanim.

Instalowanie go w przeglądarce

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

Konwertowanie App.js na używanie ReactJS

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

Aby używać React zamiast tylko 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 sprawi, ż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 zbudowanie prostej aplikacji z listą rzeczy do zrobienia. Aby szybko działać i uniknąć wielu typowych błędów, stworzyliśmy przykładową aplikację, w której wszystko, co musisz zrobić, to wymienić 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 samodzielne kodowanie? Bez problemu! W rzeczywistości możesz skopiować wszystkie nasze komponenty, wykonując te proste kroki. Po skopiowaniu ich do projektu po prostu zmodyfikuj je, aby odpowiadały Twoim celom! Wybór nalezy do ciebie! Sprawdź tutaj wszystkie trzy opcje dla początkujących.

Podstawowy przykład użycia komponentów

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

Może ci się spodobać: Facebook JavaScript Engine (Hermes) przyspiesza React Native na Androidzie.

Wprowadzenie do składni JSX

JSX nie jest językiem programowania takim jak JavaScript czy TypeScript, ale składnią zaprojektowaną 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 kodu HTML, dzięki czemu kod JSX jest doskonałym 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 zacząć budować swój pierwszy projekt React, utwórz nowy katalog, wpisując mkdir react_tutorial w swoim terminalu. Po zakończeniu działania 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ć wersję 10.x obok Node, jeśli pomyślnie zainstalowałeś Node. Jeśli nie, spróbuj użyć nvm install 10, jeśli używasz systemu macOS lub Linux. Jeśli to też nie zadziała, Google powinno być w stanie pomóc w ustaleniu, co tam jest nie tak! Po poprawnym zainstalowaniu Node w wersji 10+ jesteśmy gotowi, aby przejść do tworzenia naszego projektu od podstaw!

Statyczny vs dynamiczny vs PureComponent

Podczas tworzenia aplikacji internetowych przy użyciu nowoczesnego języka JavaScript dostępne są 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 inaczej 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 tagach HTML. Jeśli jednak chcesz pobrać zawartość z baz danych, które mogą jeszcze nie istnieć, lepszym wyborem jest użycie danych reagowania. Decydując, która metoda tworzenia komponentów najlepiej pasuje do Twojego projektu, ważne jest, aby pomyśleć o tym, 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żna użyć w swoich komponentach w celu kontrolowania różnych części ich cyklu życia. Metoda componentWillMount() jest wywoływana bezpośrednio przed pierwszym renderowaniem komponentu. Możesz w nim dodać dowolne inicjalizacje, których potrzebujesz dla swojego komponentu, takie jak zapisywanie informacji przy użyciu localStorage. Metoda componentDidMount() jest również wywoływana natychmiast po zamontowaniu i wyrenderowaniu komponentu. W tym miejscu możesz dodać kod, który powinien zostać uruchomiony po pełnym zainicjowaniu komponentu (na przykład podczas tworzenia nowych żądań sieciowych).

Obsługa stanu w komponentach

Sposób, w jaki Reacts podchodzi do zarządzania stanem, jest nieco wyjątkowy. Aby zrozumieć, dlaczego musimy najpierw rozważyć, w jaki sposób większość ram obsługuje stany.

Tradycyjnie programista myślałby, ż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 (rekwizytów) do tego innego komponentu, aby to zrobić. A jeśli chcesz, aby obiekty stanu lub tablice pozostawał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ć dość proste w przypadku komponentów w małej aplikacji, które mają tylko dwa lub trzy różne stany, co się dzieje, gdy aplikacja ma dziesiątki różnych stanów? Jak zarządzać nimi wszystkimi?

Przekazywanie danych z komponentu nadrzędnego do komponentu podrzędnego

Istnieją dwa sposoby przekazywania danych z komponentu nadrzędnego do komponentu podrzędnego: poprzez właściwości lub stan. Przekazywanie danych przez rekwizyty może być przydatne do definiowania zmiennych dla komponentów, na przykład określania liczby elementów w tablicy. Z drugiej strony przekazywanie danych przez stan może być przydatne, jeśli chcesz przekazywać duże obiekty (co mogłoby potencjalnie spowolnić działanie aplikacji) lub definiować funkcje, które chcesz wywoływać z poziomu komponentu potomnego. Przyjrzyjmy się obu podejść i zobaczmy, kiedy należy ich użyć w naszym kodzie!

Może Cię również zainteresować: Jakie ulepszenia oferuje React JS w Headless WordPress?

Wniosek

Zatrudniając programistę ReactJS, upewnij się, że wybierasz freelancera, który ma ponad 5-letnie doświadczenie w pracy z JavaScript, CSS, HTML i Node.js. 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 zadania.

Każdy ekspert zawsze zacznie od zadawania pytań przed rozpoczęciem jakiejkolwiek pracy. Dlatego zatrudnienie eksperta, który zadaje pytania w odpowiednich momentach, jest koniecznością podczas budowania strony internetowej z wykorzystaniem frameworka reagowania. Średni koszt zatrudnienia programistów ReactJS wynosiłby od 40 do 100 USD za godzinę. Ale eksperci pobierają wyższe opłaty niż zwykle. Miej to na uwadze, ustalając budżet na założenie strony internetowej przy użyciu frameworka programistycznego ReactJS.

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