Które wybrać i kiedy

Kiedy byłem nowy w programowaniu frontendowym, JavaScript, React, HTML i CSS to tylko niektóre z terminów, z którymi często się spotykałem. HTML i CSS są łatwe do zrozumienia. Jednak JavaScript i React mogą być trudne do opanowania.

Debata React vs JavaScript w świecie interfejsów użytkownika nie ma końca. Jaka jest różnica między Reactem a JavaScriptem? Kiedy powinniśmy używać React zamiast JavaScript i odwrotnie? To mogą być niektóre z pytań, które krążą Ci teraz po głowie.

W tym artykule przedstawię React i JavaScript jako najpopularniejsze języki tworzenia stron internetowych, porównam ich funkcje i doradzę, kiedy używać każdego z nich przy tworzeniu aplikacji.

Spis treści:

Co to jest JavaScript?

JavaScript to język skryptowy używany do tworzenia interaktywnych i dynamicznych stron internetowych. Spotkasz ludzi używających Vanilla JavaScript lub Plain JavaScript do opisu tego języka. Większość programistów front-endu używa JavaScript, hipertekstowego języka znaczników (HTML) i kaskadowych arkuszy stylów (CSS) do tworzenia interfejsów użytkownika.

JavaScript jest elastyczny; możesz tworzyć strony internetowe, gry i aplikacje mobilne. Łatwość użycia i elastyczność sprawiły, że stał się on najbardziej preferowanym językiem programowania w oparciu o Ankieta StackOverflow 2023.

Źródło obrazu: stackoverflow.co

Funkcje JavaScriptu

JavaScript od wielu lat ugruntował swoją pozycję najczęściej używanego języka programowania. Te cechy wyjaśniają jego dominację i zastosowanie:

Język skryptowy wykorzystujący programowanie asynchroniczne

Za pomocą języka JavaScript można pisać skrypty, które można wykonywać w środowisku wykonawczym. Język skryptowy, taki jak JavaScript, nadaje się do szybkiego prototypowania, tworzenia aplikacji internetowych i automatyzacji powtarzalnych zadań.

JavaScript nie blokuje się i wykorzystuje funkcje takie jak wywołania zwrotne, obietnice i async/await do obsługi programowania asynchronicznego. Ta funkcja ułatwia pobieranie danych z serwera bez blokowania głównego wątku.

Spójrz na ten kod:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully!");
        }, 2000);
    });
}

fetchData().then(data => {
    console.log(data);  // Outputs: Data fetched successfully!
});

Funkcja fetchData zwraca obietnicę. Parametry „rozwiąż” i „odrzuć” zakończenie lub niepowodzenie operacji asynchronicznej.

Manipulacja DOM

Manipulacja modelem obiektowym dokumentu (DOM) ułatwia manipulowanie strukturą dokumentu HTML w oparciu o dane wprowadzone przez użytkownika.

Weźmy na przykład ten kod:

var heading = document.getElementById('myHeading');

        document.getElementById('changeTextButton').addEventListener('click', function() {
            heading.textContent="Text changed!";
        });

        document.getElementById('highlightButton').addEventListener('click', function() {
            heading.classList.add('highlight');
        });

Mamy detektor zdarzeń, który nasłuchuje zmian w oparciu o dane wyjściowe użytkownika. Po kliknięciu przycisku zmienia się kolor nagłówka.

Dynamiczne pisanie

Typy zmiennych w JavaScript są określane w czasie wykonywania. Ta funkcja ułatwia programistom szybkie pisanie kodu, ponieważ nie muszą określać typów zmiennych.

Rozważmy ten kod jako przykład:

let variable1 = 42;  // variable1 is of type number
console.log(variable1);  // Outputs: 42

variable1 = "Welcome to newsblog.pl!";  // Now variable1 is of type string
console.log(variable1);  // Outputs: Welcome to newsblog.pl!

Jak widać, w pierwszym przykładzie przypisaliśmy zmiennej 1 wartość 42. Nadal jednak możemy mu przypisać inną wartość „Witamy w newsblog.pl!” w przykładzie 2.

Rozciągliwość

Możesz rozszerzyć użyteczność JavaScriptu za pomocą różnych bibliotek i frameworków innych firm. Angular jest przykładem frameworku JavaScript, natomiast React jest biblioteką JavaScript.

Co to jest Reaguj?

Reagować to popularna biblioteka JavaScript do tworzenia mobilnych i internetowych interfejsów użytkownika. Ta biblioteka została opracowana przez firmę Meta (dawniej Facebook) do użytku wewnętrznego, ale później została wydana jako biblioteka typu open source. React został zaprojektowany, aby ograniczyć błędy napotykane przez programistów podczas tworzenia interfejsów użytkownika. Ta biblioteka umożliwia budowanie komponentów wielokrotnego użytku, czyli małych fragmentów kodu.

React jest znany ze swojej składni JSX, która łączy HTML i JavaScript. Ta składnia umożliwia programistom pisanie HTML i JavaScript w jednym pliku. Możesz także użyć React z frameworkami front-endowymi, takimi jak Bootstrap, aby nadać styl swojej aplikacji.

Funkcje reakcji

React to jeden z najbardziej znanych frameworków i technologii internetowych opartych na Ankieta Stackoverflow 2023.

Źródło obrazu: stackoverflow.co

Oto niektóre cechy wyjaśniające jego popularność:

Oparte na komponentach

React przyjmuje architekturę modułową, która ułatwia tworzenie małych fragmentów kodu nadających się do ponownego użycia. Możesz zatem zmieniać, edytować, dodawać lub usuwać takie komponenty bez przepisywania całego kodu.

W tej bibliotece znajduje się folder „src”, w którym umieszczone są wszystkie komponenty. To jest struktura folderów aplikacji React.

Deklaracyjny

Ta biblioteka umożliwia programistom opisanie stanu aplikacji i interfejsu użytkownika. Następnie React obsługuje podstawowe aktualizacje w oparciu o to, co opisuje programista. Zasadniczo programista opisuje pożądany wynik, a React określa, jak to zrobić.

Spójrz na ten przykład:

const numbers = [1, 2, 3, 4];

const DoubledNumbersList = () => {
  return (
    <ul>
      {numbers.map(number => (
        <li key={number}>{number * 2}</li>
      ))}
    </ul>
  );
};

// Render the component
ReactDOM.render(<DoubledNumbersList />, document.getElementById('root'));

Mamy tablicę „numbers” i komponent „DoubledNumbersList”. Deklarujemy, że każdą liczbę należy podwoić i przedstawić jako listę. Oznacza to, że opisaliśmy jak powinien wyglądać interfejs użytkownika.

Jednokierunkowe powiązanie danych

React wykorzystuje jednokierunkowy przepływ danych. Ta funkcja opisuje sposób przepływu danych z komponentów nadrzędnych do komponentów podrzędnych. Jeśli w komponencie nadrzędnym zostaną wprowadzone zmiany, komponenty podrzędne automatycznie odzwierciedlą te zmiany.

Jednakże zmiany w komponencie podrzędnym nie będą miały wpływu na komponent nadrzędny. Ta jednokierunkowa funkcja wiązania danych ułatwia bardziej przewidywalne zarządzanie stanem aplikacji.

import React, { useState } from 'react';

// Child Component
const ChildComponent = ({ data }) => {
  return (
    <div>
      <p>Data received from parent: {data}</p>
    </div>
  );
};

// Parent Component
const ParentComponent = () => {
  const [parentData, setParentData] = useState('Initial Data');

  const handleDataChange = () => {
    // Modifying the state in the parent component
    setParentData('Updated Data');
  };

  return (
    <div>
      <button onClick={handleDataChange}>Change Data</button>
      {/* Passing data down to the child component as a prop */}
      <ChildComponent data={parentData} />
    </div>
  );
};

// App Component
const App = () => {
  return (
    <div>
      <h1>React One-Way Data Binding Example</h1>
      {/* Rendering the parent component */}
      <ParentComponent />
    </div>
  );
};

export default App;

Komponent ParentComponent używa useState do zarządzania stanem parentData. Funkcja handleDataChange modyfikuje swój stan.

Mamy komponent funkcjonalny ChildComponent, który wyświetla przekazane mu dane jako rekwizyty.

Wirtualny DOM

React tworzy wirtualny DOM za każdym razem, gdy zmienia się stan komponentu React. Biblioteka ta porównuje następnie zmiany w wirtualnym DOM i rzeczywistym DOM i aktualizuje tylko niezbędne części.

Spójrz na ten kod:

import React, { useState } from 'react';

const App = () => {
  // State to keep track of a counter
  const [counter, setCounter] = useState(0);

  // Event handler to update the counter
  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default App;

Zadeklarowaliśmy zmienną z przyciskiem, która zwiększa się za każdym razem, gdy użytkownik kliknie przycisk. React nie zmienia całego DOM, w którym użytkownik kliknie przycisk. Jednak sprawdza tylko zmiany, porównuje je z rzeczywistym DOM, a następnie aktualizuje.

Reaguj kontra JavaScript

FeatureReactJavaScriptUsage/typeJavaScript to język programowania używany do tworzenia stron internetowych. Stosowany jest głównie w programowaniu front-end. Jednak ostatnio został zaadaptowany w programowaniu po stronie serwera z technologiami takimi jak Node.js. Vanilla JavaScript jest łatwiejszy do nauczenia niż React. Jako programista musisz wiedzieć, jak działają HTML i CSS, aby efektywnie używać JavaScript. Krzywa uczenia się React ma intensywną krzywą uczenia się, ponieważ wprowadza składnię JSX i architekturę opartą na komponentach. Aby szybko nauczyć się koncepcji React, potrzebna jest także wiedza o tym, jak działa JavaScript. JavaScript został wprowadzony na rynek w 1995 roku. Popularność tego języka programowania zyskała na popularności i przez lata jest najpopularniejszym językiem programowania. PopularityReact został wydany w 2013 roku. Mimo że ta biblioteka jest popularna, może nie można porównać z JavaScriptem, który ma setki bibliotek i frameworków. JavaScript został wprowadzony na rynek w 1995 roku. Popularność tego języka programowania stała się na przestrzeni lat najbardziej preferowanym językiem programowania. MaintenanceReact pozwala użytkownikom budować komponenty, które można podłączać i używać wielokrotnie. Utrzymanie takich komponentów jest łatwe, ponieważ nie trzeba przepisywać całego kodu, jeśli chcesz dodać nowe funkcje lub zaktualizować istniejące. Duże aplikacje mogą okazać się kosztowne w utrzymaniu. Posiadanie dużej ilości kodu JavaScript w tym samym pliku musi również wpływać na czytelność koduUI/UX. PerformanceReact wykorzystuje wirtualny DOM, aby ułatwić budowanie złożonych interfejsów użytkownika i zarządzanie nimi. Ta biblioteka pozwala użytkownikom organizować kod na małe bity, co sprawia, że aktualizacja DOM fastPlain JavaScript wymaga wielu ręcznych interwencji, aby osiągnąć pożądany poziom wydajności. SecurityReact został zbudowany z myślą o interoperacyjności. Ta cecha czyni go podatnym na ataki. Możesz jednak zwiększyć bezpieczeństwo aplikacji React, korzystając z aplikacji innych firm. JavaScript ma różne wbudowane funkcje bezpieczeństwa. Te interfejsy API języka programowania nie zapewniają tymczasowych tokenów bezpieczeństwa, dzięki czemu są bezpieczniejsze. EcosystemReact ma dużą kolekcję bibliotek i frameworków innych firm. Jednak jego ekosystem jest mniejszy w porównaniu do JavaScriptJavaScript ma tysiące bibliotek, takich jak React i frameworki, takie jak Vue i Angular. Niektóre biblioteki i frameworki mogą być używane w różnych ekosystemach

Ograniczenia Reagowania

Pomimo wielu funkcji i zalet, w niektórych obszarach nadal brakuje. Niektóre ograniczenia to:

Nie obsługuje starszych przeglądarek: React został zaprojektowany do współpracy z nowoczesnymi przeglądarkami, takimi jak Google Chrome, Opera, Mozilla Firefox, Apple Safari i Microsoft Edge. Możesz mieć problemy z uruchomieniem React, jeśli pracujesz ze starszą przeglądarką.
Nastawiony na front-end: React został zaprojektowany, aby pomóc programistom w tworzeniu interfejsów użytkownika. Można go jednak używać z frameworkami Node.js, takimi jak ExpressJS, jeśli chcesz mieć aplikację z pełnym stosem.
Stroma krzywa uczenia się: nauka React może być trudna, jeśli dopiero zaczynasz programować.

Ograniczenia JavaScriptu

JavaScript jest bardzo potężny. Według Statystaponad 63% respondentów korzysta z JavaScript.

Jednak ten język programowania ma następujące wady:

Czasochłonne: programiści muszą pisać kod od zera, używając zwykłego/waniliowego JavaScript w swojej aplikacji.
Nie nadaje się do dużych aplikacji: Utrzymanie dużych aplikacji JavaScript może okazać się wyzwaniem.
Jednowątkowy: JavaScript przetwarza jedną operację na raz. Ta funkcja może ograniczać zadania intensywnie obciążające procesor.

React vs JavaScript: który wybrać?

Wszystko, co mogę powiedzieć, to to, że React i JavaScript nie są bezpośrednimi konkurentami. React to tylko część wielu bibliotek JavaScript służących do tworzenia interfejsów użytkownika.

Istnieją jednak przypadki, w których możesz wybierać pomiędzy JavaScriptem a Reactem, aby zbudować swoje aplikacje. Z drugiej strony są przypadki, w których React będzie bardziej odpowiedni niż JavaScript i odwrotnie. Z mojej analizy wynika, że możesz użyć tego, gdy:

Kiedy wybrać Reaguj zamiast JavaScript

Chcesz szybko tworzyć aplikacje: React udostępnia standardowy kod, który ułatwia tworzenie aplikacji. Można go także używać z różnymi frameworkami i bibliotekami, aby ułatwić sobie pracę.
Tworzenie dużych aplikacji: Modułowa architektura React ułatwia budowanie i utrzymywanie dużych aplikacji. Możesz aktualizować, usuwać lub dodawać nowe komponenty w celu skalowania aplikacji bez zmiany kodu źródłowego.
Tworzenie aplikacji z dynamiczną zawartością: Możesz używać Reacta z bibliotekami innych firm, takimi jak Redukcja aby zarządzać stanem swojej aplikacji. Ta biblioteka tworzy również wirtualny DOM, który aktualizuje tylko niezbędne części, gdy użytkownicy aktualizują aplikację.

Kiedy wybrać JavaScript zamiast React

Małe aplikacje: JavaScript jest odpowiedni dla małych aplikacji, które nie wymagają wielu interakcji z użytkownikiem.
Jeśli chcesz dowiedzieć się, jak działa JavaScript: Vanilla JavaScript pozwala skonfigurować większość rzeczy od zera. Możesz zatem używać zwykłego JavaScript, jeśli chcesz lepiej zrozumieć JavaScript.

Wniosek

Mamy nadzieję, że teraz rozumiesz różnice między Reactem a JavaScriptem, ich funkcje i kiedy ich używać. Z naszej analizy wynika, że JavaScript będzie idealnie pasował do małego projektu, jeśli chcesz dowiedzieć się, jak JavaScript działa od podstaw.

Z drugiej strony możesz użyć React, gdy masz duży projekt i chcesz skupić się na interfejsie użytkownika. Zarówno React, jak i JavaScript umożliwiają korzystanie z różnych frameworków i bibliotek JavaScript.

Jeśli szukasz technologii będącej bezpośrednią konkurencją dla React, zapoznaj się z naszym artykułem na temat React vs Angular.