Zacznij korzystać z React

Biblioteki JavaScript odpowiedzialne za manipulowanie widokami i sposobem, w jaki wyświetlają informacje, coraz częściej zawierają więcej funkcjonalności, które ułatwiają programistom tworzenie aplikacji i są przyjemniejsze dla użytkowników, którzy z nich korzystają.

Wśród tych bibliotek mamy Reagować, czyli biblioteka JavaScript otwartego oprogramowania skupionego głównie na tworzeniu interfejsów użytkownika dla aplikacje jednostronicowe lub aplikacje jednostronicowe, z których korzysta Facebook oraz Instagram obsłużyć wszystko, co dotyczy widoków, rozwiązując problem dużych aplikacji, w których dane pokazywane użytkownikowi nieustannie się zmieniają.

Funkcje reakcji

Aby rozwiązać ten problem, o którym wspomnieliśmy Reagować opiera swoją filozofię na następujących cechach:

ProstyTa cecha wyraża, jak nasza aplikacja powinna wyglądać w danym momencie oraz w jaki sposób to robi i co robi Reagować jest to, że automatycznie obsługuje wszystkie aktualizacje interfejsu użytkownika, gdy w aplikacji zostaną wprowadzone fundamentalne zmiany.
DeklaracyjnyZmiana informacji w naszej aplikacji Reagować pełni funkcję odświeżania naszej strony, ale tylko tam, gdzie zmieniły się informacje.
Budowa możliwych do połączenia elementówKiedy mówimy o Reagować, mówimy głównie o budowie komponentów wielokrotnego użytku, w rzeczywistości z tą biblioteką to co robimy najczęściej to budowanie komponentów i dzięki temu, że są enkapsulowane, sprawiają, że ponowne użycie kodu, testy i separacja funkcjonalności są niezwykle prosty.

Uzyskiwanie reakcji

Teraz, gdy wiemy, z czego się składa Reagować i jego charakterystykę, pozyskamy najnowszą wersję biblioteki i przeprowadzimy prostą implementację do pokazania słynnego Hello World.

Aby uzyskać najnowszą wersję, pobieramy tablet z biblioteką pod poniższym linkiem. Po pobraniu rozpakowujemy i umieszczamy zawartość w folderze o nazwie Witaj_Reaguj a wewnątrz tworzymy plik o nazwie hello_react.html który będzie zawierał następującą treść:

Jak widać, jest to dość prosty kod, który pozwala nam wyrenderować tekst w naszym głównym widoku dzięki włączeniu reakcja.js. Dodatkowo używamy JSX co to jest składnia? XML w naszym JavaScript a następnie dokonać przekształcenia w przeglądarce, z której możemy skorzystać dzięki zaimplementowaniu drugiej biblioteki o nazwie JSXTransformer.js

Dodatkowo możemy uczynić nasz kod bardziej czytelnym i modularnym oddzielając jego logikę, możemy to osiągnąć tworząc dwa pliki, w tym celu tworzymy jeden o nazwie hello_react.js i umieszczamy następujący kod:

 React.render (, document.getElementById ('przykład_reakcji'));

Następnie w naszym HTML co robimy, to umieszczamy nasz plik .js wewnątrz tagu skryptu i będziemy mieli tę samą operację:

Zobaczmy więc, gdy uruchomimy nasz przykład w przeglądarce, jego odpowiedź:

Jak widać, manipulacja danymi była dość prosta, jednak istnieje lepszy sposób na wdrożenie Reagować, ponieważ sposób, w jaki to robimy, kod używa transformatora JSX przeglądarki, jak zobaczymy w wiadomości, którą otrzymamy za pośrednictwem konsoli.

Ten komunikat konsoli daje nam rozwiązanie tego małego ostrzeżenia i polega na wykonaniu wstępnej kompilacji naszego kodu .js, do tego użyjemy menedżera pakietów Node.js do tego zadania, więc jeśli nie mamy zainstalowanego tego środowiska na naszym komputerze, przechodzimy na oficjalną stronę i pobieramy je w przypadku, gdy pracujemy w systemie Windows, a w przypadku, gdy pracujemy w systemie Linux, możemy wykonać kroki opisane w ten samouczek.

Wstępne kompilowanie naszego kodu

Aby wykonać to zadanie, przechodzimy do naszej konsoli Node.js i przy pomocy npm zainstalowaliśmy narzędzie! Reagować dla konsoli poleceń o nazwie narzędzia reakcji dla których wystarczy wykonać tę linię:

 npm install -g react-tools

Teraz tłumaczymy nasz kod na JavaScript czysty w następujący sposób:

 jsx --oglądaj hello_react.js

To nie tylko tłumaczy nasz kod, ale automatycznie generuje plik hello_react.js Za każdym razem, gdy w naszej aplikacji zostanie wprowadzona zmiana, zobaczmy odpowiedź z konsoli po uruchomieniu tego polecenia:

Wreszcie modyfikujemy nasze HTML usunięcie włączenia biblioteki JSXTransformer.js skoro tego nie potrzebujemy i włączamy nasz skrypt w konwencjonalny sposób, zobaczmy:

 Witaj Reaguj!

Jak wspomnieliśmy, ostatnia operacja, którą wykonujemy za pomocą konsoli, automatycznie generuje plik za każdym razem, gdy dokonamy zmiany w naszej aplikacji, więc jeśli dokonaliśmy zmian, konsola powiadomi nas w następujący sposób:

Jak widzimy, mamy dwa powiadomienia, że ​​w pliku zostały wprowadzone zmiany, które faktycznie były tymi, które zrobiliśmy w odniesieniu do usunięcia biblioteki i dokonania konwencjonalnego włączenia pliku JavaScript.

W ten sposób zakończyliśmy ten samouczek, w którym mogliśmy stawiać pierwsze kroki z Reagować i jego implementacja w naszych aplikacjach, aby pomóc nam w budowie komponentów do wizualizacji danych w naszych widokach, weryfikując, czy jest to nie tylko proste, ale dostarcza nam narzędzi, które znacznie ułatwią nam rozwój.