React.JS dla początkujących manekinów, korzystających z biblioteki podczas pisania robotów handlowych

Czym jest React JS dla początkujących manekinów, co to jest, tutoriale, instalacja, dokumentacja – jak zainstalować i korzystać z biblioteki React JS podczas pisania robotów handlowych. Często w ogłoszeniach o pracę dla informatyków można znaleźć wymaganie, które mówi, że posiadasz umiejętności w bibliotece JavaScript. Tak i oczekują znajomości Reacta nie tylko od programistów, ale także od programistów, którzy zajmują się wewnętrznym rozwojem witryny, a nie zewnętrznym projektowaniem. Co to za biblioteka, jakie daje możliwości w pracy i gdzie zaczyna się poznawać początkujący? Rozwiążmy to w tym artykule.

Biblioteka JavaScript – React: co to jest

React.JS to biblioteka popularnego
języka programowania JavaScript , utworzona przez internetowy serwis społecznościowy Facebook w celu usprawnienia i uproszczenia procesu tworzenia zewnętrznej powłoki witryn i aplikacji – interfejsu, z którym użytkownik wchodzi w interakcję. Główną cechą biblioteki są komponenty i stany. Komponent jest częścią cyfrowego zestawu, który odpowiada za wygląd określonej części projektowanego systemu.

Notatka! Takie części składowe można zagnieżdżać.

Stan to zbiór wszystkich danych dotyczących szczegółów interfejsu, w tym jego reprezentacyjnego renderowania. Na przykładach dowiemy się bardziej szczegółowo i wyraźnie, co jest czym. Poniższy obrazek pokazuje niektóre z głównych elementów – publikowanie w sieci społecznościowej online, sekcję z ogólnymi informacjami i pokazywanie zdjęć. Każda część zawiera mniejsze komponenty, które są komponentami. Na przykład publikacja zawiera tekst, zdjęcia, nazwę użytkownika, który publikuje informacje itp. Sekcja obrazów zawiera pojedyncze obrazy, a sekcja informacji ogólnych zawiera krótkie informacje.
Każdy z tych komponentów (komponentów) ma stan. Oznacza to, że sekcja z informacjami ogólnymi będzie wyglądać inaczej na różnych urządzeniach, element „polubienie” zmieni kolor po naciśnięciu i liczbę odpowiadającą za całkowitą liczbę polubień; publikacja z kolei może skrócić tekst lub przekazać go w całości.

W ten sposób wyraża się elastyczność React.JS – komponent interfejsu jest pisany raz, a następnie otrzymuje wszystkie możliwe stany.

Dlaczego potrzebna jest biblioteka React?

React.JS to jedna z możliwych opcji pisania kodu JS lub HTML w wygodnym formacie, tworzenia jego kopii i wizualizacji. Komponenty tutaj napisane są w specjalnym języku systemowym – JSX, który zawiera elementy języka programowania JavaScript oraz ustandaryzowanego języka znaczników HTML.
Kod napisany w JSX jest dość specyficzny. Ważne jest również to, że przeglądarka internetowa nie musi rozumieć tego języka systemowego – kod React.JS jest przenoszony do JS, który każda przeglądarka bez problemu odbiera. W tym celu to, co jest tworzone w bibliotece przechodzi przez wyspecjalizowane kompilatory (jednym z bardziej popularnych jest dziś Babel js), które konwertują kody w mniej znanych językach programowania na reprezentacje JavaScript.
Na pierwszy rzut oka może się wydawać, że system użytkowania jest skrajnie nielogiczny, ale po pewnym czasie przyzwyczajasz się do tego i zdajesz sobie sprawę, dlaczego mechanizm został tak zaprojektowany. Biblioteka JavaScript ma wiele mocnych zalet:

• język programowania systemu jest łatwiejszy do rozpoznania niż dobrze znany JavaScript, dzięki czemu obsługa kodu i eliminacja błędów zajmie kilka razy mniej czasu (szybkość pisania nowych kodów i programów odpowiednio wzrośnie);
• wbudowany jest wygodny i praktyczny system elementów składowych – powtarzających się części kodu, które są używane na różnych etapach pisania i w różnych programach, a także zmieniają się w zależności od kontekstu;
• każdy element składowy jest podporządkowany tylko swojemu stanowi , dlatego łatwiej jest poprawić niedociągnięcia w kodzie, jeśli nagle w jego działaniu zostanie wykryty błąd; na powierzchnię wypływają nieprawidłowe momenty: prawidłowo działający element będzie w tym trybie działał stabilnie, o ile oczywiście nie zostanie w stosunku do niego użyty niewłaściwy stan.

Możemy zatem stwierdzić, że biblioteka React.JS pozwala znacznie zaoszczędzić czas, uszczegółowić kod, uporządkować sekwencję we właściwej kolejności i ponownie użyć dużych bloków. Te zalety pozwalają obniżyć koszty procesu tworzenia interfejsów użytkownika, a także przyspieszyć czas tego procesu. Mając umiejętności posługiwania się językiem programowania JS i HTML, nauka obsługi systemu JSX jest łatwa – wystarczy kilka dni, aby go opanować.

Notatka! Racjonalne jest korzystanie z biblioteki podczas pracy z dużymi projektami, gdy konieczne jest napisanie dużej liczby stron dynamicznych. Witryna małej firmy nie wymaga takiej złożoności.

Podstawowy kurs React JS od A do Z: https://youtu.be/GNrdg3PzpJQ

Znajomość dla początkujących: podstawowe pojęcia

Witaj świecie!

Wchodząc na pierwszą stronę biblioteki, użytkownik zobaczy powitalny nagłówek jako mały przykład – „Witaj świecie!”.

Podstawy języka systemu JSX

JSX to systemowy język programowania, rozszerzenie dobrze znanego JavaScript. Zawiera kombinację dwóch języków – programowania JA i ustandaryzowanego języka znaczników HTML. Deweloperzy używają go do dostosowania koncepcji, aby dokładnie pokazać Reactowi, jak powinien wyglądać interfejs użytkownika. JSX tworzy „części” biblioteki.

Co to jest JSX?

Biblioteka React wyznaje logikę, że istota renderowania jest bezpośrednio związana z logiką interfejsu użytkownika: jak przetwarzane są zdarzenia, jak zmienia się stan w określonym okresie i jak informacje są przygotowywane do prezentacji. Biblioteka JS może być używana bez języka systemowego, ale wielu programistów uważa ją za cenną ze względu na jej przejrzystość i konkretność podczas pracy z interfejsem użytkownika generowanym z kodu JavaScript. Ponadto rozszerzenie ułatwia Reactowi generowanie powiadomień o nieprawidłowych momentach i błędach.

Tworzenie wyrażeń w języku systemu

JSX pozwala na użycie w procesie dowolnych dobrze napisanych wyrażeń JavaScript w nawiasach klamrowych.

JSX to także wyrażenie Po zakodowaniu kodu źródłowego w kodzie bajtowym każde wyrażenie JSX zamienia się w standardowe wywołanie funkcji JS, które jest skierowane do kategorii JavaScript. Z tego można zrozumieć, że rozszerzenie systemu oficjalnego języka programowania może być używane wewnątrz instrukcji i przez okresy.

JSX to obiekty Obiekty reprezentowane przez rozszerzenie nazywane są elementami React. Wyjaśniają wynik, który deweloper chce zobaczyć na wyświetlaczu. Biblioteka rozpoznaje te obiekty i wykorzystuje je w procesie generowania i utrzymywania Obiektowego Modelu Dokumentu.

Renderowanie szczegółów

Szczegóły to wiele małych cegiełek, które składają się na programy React.
Szczegóły to obraz, który deweloper chce zobaczyć na końcu na monitorze. W porównaniu z elementami Document Object Model elementy biblioteki są proste i nie zajmują dużo zasobów. Pierwiastki są składnikami komponentów.

Komponenty i rekwizyty

Komponenty umożliwiają podzielenie interfejsu użytkownika na niezależne części, nad którymi łatwiej jest pracować osobno. Można je łączyć i używać wielokrotnie. W większości funkcjonalność komponentów jest podobna do funkcjonalności samego języka programowania JavaScript. Pobierają informacje wejściowe, zwane props, i zwracają elementy React, które wskazują model programowania, który programista chce zobaczyć na monitorze.

Odmiany komponentów: funkcjonalne i klasowe

Najłatwiej jest odnosić się do komponentu biblioteki jako funkcji.
Komponenty mogą być również reprezentowane w formacie klasy ES6.

Ciekawe! Biblioteka React definiuje te dwa rodzaje komponentów jako podobne.

rekwizyty

Rekwizyty to niezmienne obiekty, które są tylko do odczytu. Dlatego komponent nie powinien niczego zapisywać do swoich rekwizytów, bez względu na to, do jakiego rodzaju należy.

Stan i cykl życia

Najpierw zastanówmy się, jak prawidłowo zastosować stan w pracy. Są trzy ważne rzeczy, które należy wiedzieć o stanie komponentów:

1. Nie zmieniaj stanu bezpośrednio, użyj metody setState. Pamiętaj, że jedynym obszarem, w którym możesz bezpośrednio zmienić stan, jest konstruktor.
2. Aktualizacje stanu mogą nie być synchroniczne.
3. Przepływ informacji ma jeden kierunek. W konstrukcji komponentów żaden z nich nie wie, czy stan jest przypisany do innego komponentu. Nie ma znaczenia, w jaki sposób powstał ten lub inny niezależny element funkcjonalny – za pomocą narzędzia funkcjonalnego lub klasyfikującego. Nazywa się to przepływem danych „w dół”. Stan jest zawsze zdefiniowany dla jakiegoś elementu, a powiązania strukturalne tego stanu mogą dotyczyć tylko części znajdujących się „niżej” w porządku hierarchicznym.

Zazwyczaj stan jest określany jako „lokalny”, „wewnętrzny” lub ukryty. Jest widoczny tylko dla samego elementu funkcjonalnego i niewidoczny dla innych części Reacta. W programach bibliotecznych to, czy niezależny element funkcjonalny posiada określony stan, czy też nie, jest wewnętrznym rozwinięciem tej części, które może zmieniać się w czasie. Ciekawe jest również to, że w pracy można łączyć elementy ze stanem i bez.

Analiza zdarzeń

Proces parsowania zdarzeń w komponentach React jest podobny do obsługi zdarzeń w elementach modelu obiektowego dokumentu. Istnieje jednak kilka cech, które je od siebie odróżniają:

1. Zdarzenia w bibliotece JavaScript są nazwane w innym stylu niż standardowy.
2. Korzystając z języka rozszerzonego programowania systemu, programista przekazuje podprogram jako procedurę obsługi zdarzeń zamiast ciągu.

Warunkowe renderowanie elementów

Biblioteka JavaScript umożliwia rozbicie logiki tworzenia elementów na niezależne komponenty. Mogą być wyświetlane do ogólnego wyświetlenia lub ukryte, w zależności od tego, w jakim stanie są w danej chwili obdarzone. Warunkowe renderowanie elementów działa na tej samej zasadzie, co wyrażenia warunkowe oparte na języku programowania JavaScript. Czasami zdarza się, że biblioteka wymaga wyjaśnienia, w jaki sposób stan wpływa na ukrywanie lub renderowanie niektórych elementów. Tutaj bardziej logiczne jest użycie warunkowego pomocnika JS lub wyrażeń podobnych do if.

Zmiana komponentów

Do zmiennych można dodawać elementy biblioteki React. Jest to praktyczne rozwiązanie, gdy jakiś warunek wskazuje, czy jakaś część elementu powinna zostać narysowana, czy nie ma to sensu, podczas gdy reszta elementu pozostaje bez zmian.

Listy i klucze

Ta sekcja zawiera kilka elementów:

1. Rysowanie wielu elementów . Użytkownik może utworzyć zestaw elementów i osadzić go w języku programowania systemu za pomocą nawiasów klamrowych.
2. Elementarna lista elementów . Często użytkownicy i programiści dostosowują listy bezpośrednio w części składowej.

Klucze

Klucz w bibliotece React JavaScript oznacza wyspecjalizowane narzędzie, które należy wprowadzić podczas generowania listy komponentów. Klucze pomagają bibliotece JavaScript określić, które elementy zostały dostosowane, dodane lub usunięte. Ważne jest, aby je oznaczyć, aby React mógł skorelować składniki danych strukturalnych po upływie określonego czasu.

Formularze

W bibliotece JS elementy znormalizowanego języka znaczników działają nieco inaczej niż elementy modelu obiektowego dokumentu, ponieważ elementy formularza początkowo mają stan ukryty.

Elementy zarządzane

W standardowym języku znaczników formularze takie jak input , select , textarea zwykle samodzielnie zarządzają swoim stanem i aktualizują go, gdy programista wprowadza nowe informacje. Stan React.js zawsze definiuje wartość pól wejściowych w zarządzanym elemencie do komponowania. Chociaż oznacza to, że użytkownik musi napisać trochę więcej niż pierwotnie dany kod, możliwe jest teraz przekazanie tej wartości do innych części interfejsu użytkownika.

Powstanie państwa

Podnoszenie stanów to ustandaryzowany szablon, o którym powinien wiedzieć każdy programista i umieć go zastosować w procesie pracy. Użycie go wyeliminuje złożone i zwykle bezużyteczne wzorce zarządzania stanem.

Dlaczego tak konieczne jest kontrolowanie rozwoju państwa?

Podniesienie stanu do poziomu składników przeszłych dla tych części, które tego wymagają, jest konieczne, aby wszystkie elementy mogły uczestniczyć w państwie. Stabilny poziom stanu ułatwi jego dystrybucję między wszystkie komponenty, które na nim polegają.

Kompozycja a dziedziczenie

React.js zawiera silny model kompozycji, dlatego zaleca się wykorzystanie procesu budowania całości z części zamiast dziedziczenia, aby ponownie wykorzystać wcześniej napisany kod między elementami. Tak więc rekwizyty i możliwość stworzenia jednej całości kompozycji z części składowych, dają deweloperowi elastyczność niezbędną do stworzenia powłoki i zachowania elementu w określony i bezpieczny sposób.

Przypomnienie! Części składowe mogą przyjmować niepowiązane rekwizyty, w tym elementarne części, które tworzą biblioteki lub funkcje.

W przypadku, gdy potrzebujesz użyć funkcji bez wyglądu do pracy z komponentami po raz drugi lub trzeci, wyciągnij ją do osobnego modułu JS. Przenieś go do komponentu i użyj wygenerowanej funkcji bez dalszego rozwijania. React czy Vue czy Angular, co wybrać: https://youtu.be/Nm8GpLCAgwk

Zasady React.js

Cała filozofia biblioteki JavaScript jest ukryta w przewodniku po React. Wydaje się, że jest to długie i niezbyt ważne, jednak wielu użytkowników twierdzi, że po przeczytaniu wszystko ułożyło się na swoim miejscu. Dokumentacja jest dość stara, ale nadal ma wielką wartość i znaczenie –
https://ru.reactjs.org/docs/thinking-in-react.html . Samouczek React js https://ru.reactjs.org/tutorial/tutorial.html

Funkcjonalność biblioteki React.js

Korzystając z biblioteki JavaScript, użytkownik uzyskuje możliwość zwrócenia całej swojej uwagi bezpośrednio na proces tworzenia interfejsu użytkownika i komponenty aplikacji, a najmniej rozpraszania przez powstawanie i ewentualne niedociągnięcia napisanego kodu. Biblioteka pozwala na szybsze tworzenie programów, ułatwia konfigurowanie i edycję komponentów oraz procesu całego projektu jako całości. Tym samym React.js zawiera elementy odpowiedzialne za komunikację w globalnej sieci, UI, kontrolę stanu programu oraz możliwość rozwiązywania innych złożonych problemów. Biblioteka posiada również następujące cechy funkcjonalne:

1. Praktyczność . React.js jest dostępny w formacie zminimalizowanym. Ten kompaktowy pakiet nie wymaga jasnej konfiguracji. Zawiera już funkcję dzielenia kodu, która skraca czas potrzebny do otwarcia wersji witryny w przeglądarce, ponieważ ta opcja uniemożliwia jednoczesne renderowanie komponentów.
2. Pompowany ekosystem i zgodność . W bibliotece dostępna jest duża liczba narzędzi, wspieranych przez inne witryny, co pozwala użytkownikowi na tworzenie nowych złożonych programów o dowolnym celu.
3. Pełna funkcjonalność . Główną zaletą biblioteki JavaScript jest to, że wszystkie nowe wersje platformy spełniają wymagania starych, dzięki czemu można korzystać zarówno ze starej, jak i zaktualizowanej wersji, wszystkie są obsługiwane i aktualne do dziś. Wcześniej wydane wersje nie stają się przestarzałe po najnowszych aktualizacjach.

Praktyczne użycie

Na stronie głównej biblioteki, w instrukcjach dla użytkowników, znajduje się kilka poglądowych przykładów wykorzystania Reacta w praktyce. Możesz je ręcznie poprawić i spróbować je uruchomić. Nawet jeśli jesteś nowym użytkownikiem i nie rozumiesz istoty i logiki działania biblioteki, dostosuj kod do swoich upodobań i zobacz wynik.

Praktyczne zastosowanie Reacta podczas pisania robotów handlowych w JavaScript

Ważne jest, aby zdać sobie sprawę, że programista nie programuje JS, ale pisze skrypty (skrypty). dlatego za pomocą biblioteki programista może napisać kod dla kolejnego robota handlowego wykorzystywanego do celów handlowych, a także nadal projektować jego wygląd w oparciu o tę platformę. W rzeczywistości robot handlowy do handlu to również aplikacja, której duża liczba jest rozwijana przy użyciu React.js. Jednak niektóre funkcje i wewnętrzna część bota nadal będą musiały być wykonane w innych witrynach, które zapewniają odpowiednie do tego narzędzia.

GitHub i React.js

GitHub to platforma obsługująca wszystkie wersje projektów. Użytkownik łączy się z hostingiem, przechodzi procedurę rejestracji na oficjalnej stronie GitHub, a następnie tworzy repozytorium online, do którego przesyła wszystkie pliki z Git.
Git to obecnie najpopularniejsza i najbardziej odpowiednia usługa kontroli wersji projektu, a GitHub to zdalne repozytorium kodu.

Odniesienie! Tylko ci użytkownicy, którzy otrzymali odpowiedni link z uprawnieniami, mają dostęp do edycji i pobierania plików.

Dokumentacja

Wszystkie samouczki i aktualne materiały dotyczące biblioteki JavaScript są na bieżąco z najnowszą aktualizacją. Deweloperzy również kompilują i publikują do ogólnego czytania stare wersje dokumentacji, zamieszczone na osobnej stronie biblioteki. Dlatego początkującym łatwiej będzie opanować umiejętności zarządzania witryną: zarówno stary, jak i nowy materiał – wszystko jest tutaj, dostęp jest bezpłatny dla wszystkich.

Notatka! Nie zapomnij przeczytać instrukcji. Przynajmniej spójrz – już większość tego, co wydawało się niezrozumiałe, ułoży się na swoim miejscu.

Biblioteka React jest dziś popularną i odpowiednią platformą. Jego wszechstronność pozwala programistom tworzyć projekty o lepszej jakości iw krótszym czasie. Ponadto znajomość platformy i posiadanie umiejętności korzystania z niej sprawia, że ​​specjalista jest bardziej poszukiwany na rynku pracy.