Instalowanie React.js na Macu

Oprogramowanie jest darmową i otwartą biblioteką JavaScript typu front-end. W 2013 roku React.JS został założony przez Facebooka.

Jest to biblioteka interfejsu użytkownika (UI), która służy do tworzenia i manipulowania komponentami interfejsu użytkownika. Jest to pakiet, który umożliwia programistom tworzenie wysoce wydajnych aplikacji SPA opartych na danych.

Opiera się na programowaniu funkcjonalnym, opiera się na koncepcji niezmienności i promuje architekturę opartą na komponentach opartą na zasadzie pojedynczego ponownego wykorzystania.

W tym artykule omówimy procedury instalacji React na Macu. Po zakończeniu etapów instalacji zachęcamy do wzięcia udziału w szkoleniu React online.

Przyjrzyjmy się niektórym terminom, zanim-

NodeJS i NPM

• Najpierw musisz zainstalować NodeJS i NPM, aby uzyskać instalację React na Macu.
• Jest to silnik JavaScript, który pozwala na uruchomienie go poza przeglądarką.
• NPM (menedżer pakietów węzłów) jest używany w wierszu poleceń. Jest to instalacja bibliotek takich jak ReactJS.
• Możesz zainstalować NodeJS za pośrednictwem ich oficjalnej strony internetowej. Po zainstalowaniu NodeJS pobierze on również dla Ciebie NPM.
• Po pobraniu NodeJS z ich strony internetowej znajdź plik „.pkg”. Po prostu kliknij to dwukrotnie. Uruchomi wyskakujące okienko do instalacji.
• Zostaniesz przekierowany do procesu instalacji. Kliknij „Zainstaluj” lub „Zmień lokalizację instalacji”
• Gdy proces się zakończy, zostaniesz poproszony o ostatni komunikat. Twoje NodeJS i NPM są zainstalowane.

Instalowanie ReactJS na MacOS

Po zainstalowaniu NodeJS i NPM można zainstalować ReactJS. Odbywa się to poprzez wykonanie npm install-save react-dom.

Utwórz projekt ReactJS

Ponieważ zainstalowaliśmy ReactJS, można stworzyć nowy katalog projektu React. Odbywa się to poprzez uruchomienie npx create project. Utwórz-reaguj-aplikację.

React- Wprowadzenie

Przed przystąpieniem do instalacji React-Lib na Macu musimy najpierw zdobyć podstawową wiedzę na temat Reacta.

• React to pakiet, który pomaga programistom i architektom stron internetowych w spełnieniu oczekiwań klientów, którzy wymagają dużego przepływu danych i szybkich responsywnych interfejsów użytkownika w kontekście danych.
• Jest zbudowany na architekturze opartej na komponentach. Strona internetowa może być reprezentowana przez komponenty Parent i Child.
• W dużej mierze opiera się na Virtual DOM, który działa jako optymalizator wydajności dla operacji DOM.
• Strona internetowa HTML zawiera drzewo DOM, którego przeglądarka używa do renderowania strony internetowej.

Gdy użytkownik wchodzi w interakcję ze stroną, wiąże się to z dodawaniem i wstawianiem informacji na podstawie działań użytkownika. jak w Użytkownik dodał towar do koszyka. Koszyk wyświetla teraz zmieniony przedmiot w wyniku decyzji użytkownika.

Za kulisami dokument HTML przechodzi transformację, która umożliwia udostępnianie zmodyfikowanej strony.

Jak wspomniano wcześniej, drzewo DOM reprezentuje dokument HTML. W poprzednim przypadku DOM wymaga pewnych zmian, które obejmują wstawianie i usuwanie poszczególnych węzłów HTML.

Pomaga to w wyświetlaniu podstawowych informacji, które symbolizują to, co użytkownik próbuje zrobić w kontekście zmiany swojego

decyzja zakupowa.

Możemy postrzegać DOM jako drzewo, aby lepiej go zrozumieć.

Drzewo ma zarówno korzenie, jak i gałęzie. Podobnie element HTML znajduje się na górze DOM, a węzły pod nim są połączone z węzłem nadrzędnym. Z punktu widzenia analogii do drzewa, węzeł nadrzędny może być reprezentowany jako pień, z innymi węzłami łączącymi się z pniem. React służy do usprawnienia operacji wstawiania i usuwania w tych węzłach.

Z tą operacją wstawiania i usuwania w modelu DOM HTML wiąże się kara pamięci. Jeśli chodzi o operacje aktualizacji DOM, wirtualny DOM działa jako optymalizator wydajności.

Przechowuje dwie kopie: jedną z prawdziwego DOM (react DOM) i jedną z aktualizacji do wykonania. W ramach procesu uzgadniania badany jest również proces minimalizacji modyfikacji na reagującym DOM.

Node.js i npm

Node.js wykonuje kod JavaScript. Jest to otwarte i wieloplatformowe środowisko uruchomieniowe JavaScript. Jest napędzany silnikiem Chrome V8. Silnik Chrome V8 jest napisany w C++. Node jest kompatybilny z systemami Windows, Mac i Linux.

Po zainstalowaniu Node.js możemy uruchomić aplikację opartą na React lokalnie w naszym systemie podczas rozwoju. Pozwala nam to również na wdrożenie naszego programu na serwer produkcyjny.

Node.js zawiera następujące funkcje:

• Używa JavaScript jako podstawowego języka
• Nieblokujące we/wy
• Obsługuje programowanie asynchroniczne
• Może zarządzać wieloma żądaniami połączeń przy użyciu jednego serwera.

Npmjs.org to internetowe repozytorium kodu składające się z tysięcy modułów (npm), które pozwala nam instalować moduły węzłów za pomocą prostych poleceń.

Niektóre moduły są samowystarczalne, podczas gdy inne wymagają współzależności do poprawnego działania.Node.js umożliwia nam prowadzenie operacji odczytu i zapisu na serwerze. Pozwala również na pracę z bazami danych.

Zamiast tworzyć funkcjonalność od podstaw, możemy zapolować na moduł i ponownie wykorzystać i rozszerzyć jego funkcjonalność.

Inicjatywy deweloperskie zazwyczaj wiążą się z ograniczeniami czasowymi i budżetowymi. Jeśli chodzi o węzeł. programowanie oparte na js, npmjs.org jest kołem ratunkowym dla społeczności programistów.

Podsumowując

W tym samouczku dowiedzieliśmy się o React.js i podejściu do architektury opartej na komponentach w React.js. Otrzymaliśmy również ogólny przegląd wirtualnego DOM.

Omówiliśmy koncepcję uzgadniania, wykorzystanie Node.js w świecie JavaScript oraz jego zdolność do zarządzania nieblokującymi danymi wyjściowymi we/wy w celu jednoczesnego spełniania żądań połączeń klientów.

Przetestowaliśmy dwie techniki instalacji Node.js: jedną z zarządzaniem pakietami i drugą z wierszem poleceń.

Aby szybko rozpocząć korzystanie z React.js, wykorzystaliśmy moduł create-react-app. Możemy również użyć wiersza poleceń do zainstalowania React.js.

Aby uniknąć przeładowania zbyt wieloma szczegółami, w tym samouczku użyliśmy techniki create-react-app. Widzieliśmy naszą pierwszą aplikację React działającą po jej opracowaniu. Szybko oceniliśmy ważne pliki, które obsługują aplikację, aby zapoznać się z kodem z punktu widzenia programowania.

Przeczytaj także:

• Wirusy Mac żyją Zabij je i zamieszkaj w spokoju!