Jest to prawdopodobnie prostsze Wyjaśnienie niż szukasz, ale dla każdego, kto może być zdezorientowany...

AJAX i samoloty

Pomyśl o samolocie. Najważniejszą częścią samolotu jest to, że lata. Ale samolot ma również Koła . A koła służą bardzo ważnemu celowi, ponieważ bez nich samolot nigdy nie latałby ani nie lądował, a mimo wszystkich niesamowitych rzeczy, które samolot mógłby zrobić w powietrzu, nie miałoby to znaczenia bez kół.

Jest to ten sam związek, który React ma z AJAX . React to samolot, a AJAX to koła. Ale wiesz, inne rzeczy też mają koła. Traktory, samochody, nawet niektóre łodzie mają koła, i wszystkie są bardzo ważne, i kalekie bez kół. Podobnie jak AJAX do innych technologii internetowych, ale kiedy mówisz o samoloty, jego Koła są zwykle najdalej od Twojego umysłu.

Więc React to AJAX, czym jest samolot to Koła.

pamiętacie strony internetowe z Lat 90-tych?

Po kliknięciu czegokolwiek, nowa strona musiałaby się załadować aby pokazać efekt kliknięcia - nawet jeśli to nic takiego. oto świetny przykład . Przejdź do tej strony i kliknij wokół... Widzisz, jak kliknięcia przenoszą Cię na zupełnie inną stronę? To jest Internet przed Ajaxem.

Teraz spójrz na tę stronę : obok każdej odpowiedzi znajduje się strzałka w górę... Śmiało, kliknij jeden z nich... Zauważ, że strona nie ładuje się ponownie, ale otrzymujesz informację zwrotną: strzałka zmienia kolor na pomarańczowy . Może się to wydawać nieistotne, ale stanowi duży postęp w technologii internetowej: AJAX.

AJAX pozwala na to! I to nie jest teraz nic wielkiego, to jest tak nieodłączne do doświadczenia sieci teraz, trudno wyobrazić sobie Internet bez niego.

AJAX i tarcza zegara

cały ten wysiłek zniszczenia i odbudowy tylko po to, by pokazać małą zmianę. Cóż, to byłoby skandaliczne marnotrawstwo zasobów, a taki był Internet lat 90 - tych. na szczęście mamy teraz AJAX. Podobnie jak zegar bezproblemowo wyświetla czas, AJAX pozwala stron internetowych, aby pokazać zmiany w danych natychmiast, bez strony trzeba być odświeżane; kliknij strzałkę w górę, i zmieni kolor na pomarańczowy. Nie trzeba przeładowywać strony!

Wszystko obecnie używa AJAX, a jako programista łatwiej jest napisać aplikację nawet nie wiedząc, czym jest AJAX. Jest to spowodowane tym, że został przyswojony do technologii JavaScript, których używamy, takich jak React - który używa fetch, wśród innych poleceń, aby AJAX był łatwiejszy i bardziej czytelny.

A AJAX działa tak jak strony internetowe:

[74]} klient (przeglądarka internetowa, taka jak Firefox) żąda danych z serwera(takiego jak serwer Stack Overflow (so)).
1. serwer przetwarza Prośba.
2. serwer wysyła odpowiedź z powrotem do klienta.
3. i Kod strony, na podstawie odpowiedzi, decyduje, gdzie pójdzie (HTML) i jak będzie wyglądać (CSS).

Wszystko, co jest ukryte przed użytkownikiem, więc wydaje się, że strona reaguje na ich działania.

Aplikacje Jednostronicowe

Ponieważ nie przebudowujemy całej strony za każdym kliknięciem, możesz zachować rzeczy przechowywane w przeglądarce. Można to wykorzystać podczas całej wizyty i przyszłych wizyt na stronie.

Gdy po raz pierwszy odwiedzisz Stack Overflow, wszystkie CSS, JS i HTML są ładowane. Te trzy języki definiują styl (CSS), zachowanie (JS) i strukturę (HTML) danych przesyłanych tam i z powrotem z serwera. I zgadnij, jak te dane są wysyłane! AJAX.

Tak działa obecnie większość sieci. Google, Facebook, Amazon, Youtube, Reddit, każda strona zbudowana z WordPress i WIX, nawet Stack Overflow - wszyscy używają tego podstawowy paradygmat wydajnego dostarczania swoich witryn użytkownikom. Różnica polega na tym, w jaki sposób aplikacja jednostronicowa jest budowana i zarządzana...

reaguj.js

React jest biblioteką javascript do budowania i utrzymywania jednostronicowych aplikacji .

Zasadniczo, aby budować rzeczy oddzielnie, a następnie złożyć je razem: Komponenty łączą się, tworząc aplikację. Więc spójrz na ten całkowicie wiarygodny, ale fałszywy kod dla wszystkich odpowiedzi na tej stronie:

answerArray.map(a => <Answer answerData={a}></Answer>)

Jest to jedna linia, która pokazuje większość informacji na tej stronie. To poważna sprawa. Programiści z Stack Overflow stworzyli własny komponent o nazwie "Answer" i jego jedynym zadaniem jest pokazanie odpowiedzi. Uruchom to w pętli, i bam, wszystkie zawiłości wszystkich odpowiedzi jest abstrakt, ukryte w komponencie odpowiedzi, który jest całkowicie oddzielony od innych komponentów.

A teraz spójrz na to:

<App>
  <Header />
  <LeftSidebar />
  <Question>
    { answerArray.map(a => <Answer answerData={a} />  )}
  </Question>
  <RightSidebar />
  <Footer/>
</App>

To jest cała strona przepełnienia stosu.

Każdy tag (nagłówek, Pytanie, Odpowiedź itp.) jest składnikiem. Komponenty te są całkowicie oddzielne i mają własny kod, ale tutaj są używane razem do budowy bardziej złożonej aplikacji.

skład

Ważną koncepcją Reacta jest kompozycja, którą właśnie zdefiniowaliśmy powyżej. "Skład pozwala aby zbudować bardziej złożoną funkcjonalność, łącząc małe i skupione funkcje" (flaviocopes ). Nasza aplikacja składa się z mniejszych komponentów.

Ważne jest również, aby pamiętać, że każdy komponent zawiera swoją własną funkcjonalność. Oznacza to, że jeśli użytkownik kliknie przycisk i pojawi się Ostrzeżenie, przycisk i kod, który powoduje wyświetlenie Ostrzeżenia, znajdują się w tym samym komponencie.

Programowanie Funkcyjne

Jest to coś innego niż tworzenie pre-Reactowe, gdzie wszystkie przyciski byłyby w jednym pliku, a wszystkie efekty przycisków byłyby w innym. I niekoniecznie jest to zły sposób na robienie rzeczy, ale w przypadku tworzenia stron internetowych łatwiej jest myśleć w kategoriach samodzielnych bloków konstrukcyjnych, zamiast szeroko rozproszonych narzędzi, które nie działają same.

Dlaczego nie powinieneś dbać o wąsy i kierownicę

Zamiast tego opowiem ci o 3 technologiach, na których powinieneś się troszczyć.

co powinno cię obchodzić zamiast tego...

Węzeł

Główny punkt węzła.js jest to, że wykonuje JavaScript poza przeglądarką. Wielkie halo, prawda? Cóż, okazuje się, że jest to jedno z najbardziej wpływowych osiągnięć dla twórców stron internetowych. W rzeczywistości pobieranie węzła jest często wykonywane przed pobraniem Reaguj.

Węzeł jest ważny z 2 ogromnych powodów:

1. pozwala pobierać inne rzeczy
2. pozwala przetwarzać JavaScript przed wysłaniem go do przeglądarki

Mógłbym pisać strony i strony o Node, ale twój wniosek z tego powinien brzmieć: "Node jest ważny, powinienem mieć większą wiedzę na temat Node i tego, jak odnosi się do Reacta i tworzenia stron internetowych."

NPM

NPM nie oznacza "Node Package Manager", ale powinno, bo to właśnie robi. React, SASS, Angular, Vue, prawie wszystko, o czym tu wspomniałem, prawdopodobnie użyjesz npm do instalacji i aktualizacji.

Webpack

Webpack jest "pakietem modułów". Zajmuje wszystkie Twoje pliki JS i css i zapisuje je do jednego pliku, więc musisz się martwić tylko o napisanie jednego znacznika <script>.

Każdy komponent Reactowy będzie miał co najmniej jeden plik js skojarzony z nim. Każdy komponent również powinien mieć swój własny plik. Śledzenie ze wszystkich tych plików jest bardzo wymagający. Webpack robi to za ciebie, po prostu ułatwia życie, więc dowiedz się o tym wcześnie i nie unikaj go.

Jest to coś tak nieodłącznego dla aplikacji Reactowych, że przez większość czasu będzie po prostu działać i nawet o tym nie będziesz wiedział. Na przykład create-react-app instaluje ją automatycznie i nie wymaga od Ciebie robienia czegokolwiek - tak samo z Babel...

Babel

Tłumaczy cały kod na ECMA5, dzięki czemu może być odczytany przez najbardziej przeglądarek i większości wersji tych przeglądarek.

Ponownie, to może być zainstalowany z npm, lub jeśli po prostu chcesz bawić się z Reactem i nie dostać zbyt ugrzęzł z minutia jak ten, można uruchomić create-react-app, a to będzie po prostu działać z automatycznymi ustawieniami i będzie z włosów podczas nauki.

Ułatwiają sprawy

NPM, Webpack, Babel i wiele innych pakietów węzłów są tam tylko po to, aby ułatwić Ci życie. Budowanie aplikacji internetowych wymaga wiele konserwacja - lub małe, nieprogramowane problemy, o których zazwyczaj nie musisz nawet myśleć.

Staraj się nie dać się zastraszyć nowym pakietom, ponieważ posiadanie ich mocy może oznaczać niezliczone godziny poświęcone ciekawszym rzeczom.

wniosek

Mam nadzieję, że ten post pomógł Ci poznać różnicę między Reactem, Ajaxem a bieżącym charakterem tworzenia aplikacji internetowych. React i AJAX nie są porównywalne, ale React używa AJAX, a raczej ty - programista-użyj AJAX w Reaccie, aby uzyskać dane bez konieczności przeładowywania strony.

AJAX i inne technologie były monumentalne dla rozwoju aplikacji internetowych, ale ze względu na to, jak absolutnie niezbędne były dla aplikacji, zostały przyswojone do nowych technologii tak bardzo, że nawet nie trzeba o nich wiedzieć, aby czerpać z nich korzyści.

Moim celem było skorygowanie błędnych przekonań na twojej ścieżce uczenia się; wyjaśnienie" dlaczego " obecnego stanu Web dev; i wprowadź technologie, o których nie wspomniałeś, ale powinieneś wiedzieć: Node, npm, Babel.

Jeśli chcesz kontynuować naukę, polecam samouczek w Reaccie. Zrobiłem kilka na platformie .ui.dev / , i cieszyć się ich podejściem do nauki i ich strukturą płatności(nie zapłacono mi tego). Powodzenia i mam nadzieję, że to było pomocne.

Ajax

Używamy ajax do wysyłania żądań http. I nie możemy ponownie renderować określonego obszaru strony (DOM) używając tylko ajax. Potrzebujemy jquery, aby ponownie renderować stronę po wywołaniu ajax z odpowiedzią. Właściwie porównanie jquery + HTML i Reacta.js znacznie lepsze niż porównywanie ajax i React.js.

Reaguj.js

Rola Reacta.js dzieli stronę (DOM)na małe (Komponenty). ex: - obszar obrazu profilu, Główna nawigacja, pasek boczny, Textfield, Button. itd. od wielkich pokojów do małych pokojów. Co najważniejsze możemy powiązać funkcjonalności z tymi komponentami. Ex: - Załóżmy, że użytkownicy potrzebują wyskakującego okienka, aby przesłać zdjęcie profilowe, klikając powyżej "obszar obrazu profilu". Możemy napisać funkcję otwierającą wyskakujące okienko. A także możemy napisać inną funkcję, aby przesłać obraz profilu do bazy danych. W ten sposób możemy użyć ajax wewnątrz Reacta.js

Proszę postępować zgodnie z tym tutorialem.

Mówiąc najprościej, React jest biblioteką JavaScript zbudowaną przez Facebook. Jest powszechnie postrzegany jako framework ze względu na wiele rozszerzeń, ale oficjalne dokumenty określają go jako bibliotekę do budowania interfejsów użytkownika. Ajax z drugiej strony nie jest biblioteką ani frameworkiem ani językiem w ogóle. Ajax jest techniką używaną przez programistów do wywoływania interfejsów API internetowych bez konieczności przerywania przepływu kodu. Pod koniec tego dnia twój kod JavaScript jest uruchamiany synchronicznie linia po linii, A Ajax jest Uruchom asynchronicznie w kodzie synchronicznym, ale w taki sposób, aby nigdy nie wstrzymał kodu i nie czekał na wysłanie i odebranie połączenia API. Dzięki Ajax wysyłanie i odbieranie danych odbywa się w tle, więc nie musisz się martwić o opóźnienie, jakie zajmuje uzyskanie tych danych. Możesz użyć Ajax w swoim kodzie Reactowym. Ajax używa czegoś o nazwie Fetch do wywołania API i możesz używać różnych metod do obsługi danych, które otrzymujesz z API na przykład .wtedy i .catch lub Async / wait. Nie musisz też w ogóle używać Fetch, istnieją inne sposoby wywoływania API z Ajax, takie jak użycie Axios. Radzę obejrzeć film o tym, jak korzystać z tych różnych narzędzi, ponieważ kiedy zorientujesz się, jak wszystkie one działają, przekonasz się, że React i Ajax mogą być używane razem, aby zbudować świetną aplikację. Mam nadzieję, że to pomogło, proszę zagłosować bez względu na to, jak uważasz tę odpowiedź. Jestem całkiem nowy na tej stronie.