Udostępnij za pośrednictwem

Omówienie platformy React

Co to jest React JS?

React to biblioteka JavaScript open-source do tworzenia interfejsów użytkownika frontendu. W przeciwieństwie do innych bibliotek Języka JavaScript, które zapewniają pełną strukturę aplikacji, react koncentruje się wyłącznie na tworzeniu widoków aplikacji za pomocą hermetyzowanych jednostek nazywanych składnikami , które utrzymują stan i generują elementy interfejsu użytkownika. Można umieścić pojedynczy składnik na stronie internetowej lub zagnieżdżać hierarchie składników, aby utworzyć złożony interfejs użytkownika.

Składniki React są zwykle napisane w języku JavaScript i JSX (JavaScript XML), które jest rozszerzeniem JavaScript, które wygląda podobnie do kodu HTML, ale ma pewne funkcje składni, które ułatwiają wykonywanie typowych zadań, takich jak rejestrowanie programów obsługi zdarzeń dla elementów interfejsu użytkownika. Składnik React implementuje metodę renderowania , która zwraca plik JSX reprezentujący interfejs użytkownika składnika. W aplikacji internetowej kod JSX zwrócony przez składnik jest tłumaczony na kod HTML zgodny ze standardem przeglądarki renderowany w przeglądarce.

Ważne

W lutym 2025 r. zespół React ogłosił, że Create React App (CRA) została uznana za przestarzałą dla nowych aplikacji. Zespół zaleca, aby istniejące aplikacje migrowały do platformy, takiej jak Next.js lub React Router, albo migrowały do narzędzia kompilacji, takiego jak Vite, Parcel lub RSBuild.

Czy platforma React działa na Windows?

Tak. Windows obsługuje dwa różne środowiska do tworzenia aplikacji React:

Co można zrobić z platformą React?

Windows obsługuje szeroką gamę scenariuszy dla deweloperów platformy React, w tym:

  • Aplikacje internetowe: Jeśli dopiero zaczynasz korzystać z platformy React i interesuje Cię przede wszystkim poznanie tworzenia podstawowej aplikacji internetowej za pomocą platformy React, zalecamy tworzenie aplikacji React przy użyciu narzędzia frontonu vite na platformie Windows. Jeśli planujesz utworzyć aplikację internetową, która zostanie wdrożona na potrzeby środowiska produkcyjnego, warto rozważyć utworzyć aplikację React przy użyciu narzędzia frontonu vite w Windows Subsystem for Linux (WSL), aby uzyskać lepszą szybkość wydajności, zgodność wywołań systemowych i wyrównać między lokalnym środowiskiem deweloperskim i środowiskiem wdrażania (często serwerem z systemem Linux).

  • Single-Page Apps (SPAs): Są to witryny internetowe, które wchodzą w interakcję z użytkownikiem przez dynamiczne ponowne zapisywanie bieżącej strony internetowej przy użyciu nowych danych z serwera, a nie domyślnego ładowania całych nowych stron przez przeglądarkę. Jeśli chcesz utworzyć statyczną witrynę spa zorientowaną na zawartość, zalecamy zainstalowanie narzędzia Gatsby w programie WSL. Jeśli chcesz utworzyć witrynę internetową SPA renderowaną przez serwer z zapleczem Node.js, zalecamy zainstalowanie Next.js w programie WSL. (Chociaż Next.js teraz oferuje również funkcję obsługi plików statycznych).

  • Aplikacje klasyczne: React Native for Desktop + macOS umożliwia tworzenie natywnych aplikacji klasycznych przy użyciu języka JavaScript, które działają na różnych typach komputerów stacjonarnych, laptopów, tabletów, Xbox i Mixed Reality urządzeń. Obsługuje zarówno zestaw SDK Windows, jak i macOS SDK.

  • Natywne aplikacje mobilne: React Native to międzyplatformowy sposób tworzenia aplikacji dla systemów Android i iOS za pomocą języka JavaScript renderowanych w natywnym kodzie interfejsu użytkownika platformy. Istnieją dwa główne sposoby instalowania oprogramowania React Native — interfejsu wiersza polecenia expo i interfejsu wiersza polecenia platformy React Native. Istnieje dobre porównanie tych dwóch w witrynie StackOverflow. Expo ma aplikację kliencką dla urządzeń przenośnych z systemami iOS i Android na potrzeby uruchamiania i testowania aplikacji. Aby uzyskać instrukcje dotyczące tworzenia aplikacji dla systemu Android przy użyciu Windows, react native i interfejsu wiersza polecenia Expo, zobacz React Native for Android development on Windows (Programowanie aplikacji natywnej dla systemu Android na platformie Windows

Opcje instalacji

Istnieje kilka różnych sposobów instalowania platformy React wraz ze zintegrowanym łańcuchem narzędzi, który najlepiej sprawdza się w scenariuszu przypadków użycia. Oto kilka z najpopularniejszych.

Narzędzia React

Pisanie prostego komponentu React w edytorze zwykłego tekstu jest dobrym wprowadzeniem do React, ale kod generowany w ten sposób jest obszerny, trudny do utrzymania i wdrażania oraz powolny. Należy wykonać niektóre typowe zadania związane z aplikacjami produkcyjnymi. Te zadania są obsługiwane przez inne struktury języka JavaScript, które są pobierane przez aplikację jako zależność. Do zadań mogą należeć:

  • Kompilacja — jsX jest językiem powszechnie używanym w aplikacjach React, ale przeglądarki nie mogą przetwarzać tej składni bezpośrednio. Zamiast tego kod musi zostać skompilowany w standardowej składni języka JavaScript i dostosowany do różnych przeglądarek. Babel jest przykładem kompilatora obsługującego język JSX.
  • Tworzenie pakietów — ponieważ wydajność jest kluczowa dla nowoczesnych aplikacji internetowych, ważne jest, aby JavaScript aplikacji zawierał tylko wymagany kod dla aplikacji i był zintegrowany w jak najmniejszej liczbie plików. Pakiet, taki jak webpack , wykonuje to zadanie.
  • Zarządzanie pakietami — menedżerowie pakietów ułatwiają dołączanie funkcji pakietów innych firm w aplikacji, w tym aktualizowanie ich i zarządzanie zależnościami. Często używane menedżery pakietów obejmują Yarn i npm.

Razem zestaw struktur, które ułatwiają tworzenie, kompilowanie i wdrażanie aplikacji, jest nazywane łańcuchem narzędzi. Łatwe w konfiguracji środowisko programistyczne dla React, które używa tego łańcucha narzędzi, to Vite, które generuje prostą jednostronicową aplikację. Jedyną konfiguracją wymaganą do korzystania z usługi Vite jest Node.js.

Katalog składników oprogramowania React Native

Składniki, które mogą być używane w aplikacji React Native, obejmują następujące elementy:

  • Podstawowe składniki — składniki, które są opracowywane i obsługiwane w ramach platformy React Native.
  • Składniki społeczności — składniki opracowywane i obsługiwane przez społeczność.
  • Składniki natywne — składniki tworzone samodzielnie, używając kodu natywnego dla platformy i rejestrują się, aby były dostępne z platformy React Native.

Usługa React Native Directory udostępnia listę bibliotek składników, które można filtrować według platformy docelowej.

Opcje łańcucha narzędzi Fullstack React

React to biblioteka, a nie struktura, więc może wymagać dodatkowych narzędzi do utworzenia bardziej złożonej aplikacji. Oprócz korzystania z platformy React warto rozważyć użycie:

  • Menedżer pakietów: dwa popularne menedżery pakietów dla platformy React to npm (który jest dołączony do środowiska NodeJS) i yarn. Obie obsługują szeroką bibliotekę dobrze obsługiwanych pakietów, które można zainstalować.
  • React Router: kolekcja składników nawigacji, które mogą pomóc w rozwiązywaniu problemów, takich jak adresy URL z zakładkami dla aplikacji internetowej lub sposób komponowalnego nawigowania w rozwiązaniu React Native. React dotyczy tylko zarządzania stanem i renderowania tego stanu w modelu DOM, dlatego tworzenie aplikacji React zwykle wymaga użycia biblioteki routingu, takiej jak React Router.
  • Redux: przewidywalny kontener stanu, który pomaga w architekturze przepływu danych. Prawdopodobnie nie jest to coś, czego potrzebujesz, dopóki nie dojdziesz do bardziej zaawansowanego opracowywania oprogramowania React. Cytat Dan Abramov, jeden z twórców Redux: "Nie używaj Redux, dopóki nie masz problemów z vanilla React."
  • Webpack: narzędzie kompilacji, które umożliwia kompilowanie modułów JavaScript, nazywanych również pakietem modułów. Gdy pakiet webpack przetwarza aplikację, wewnętrznie tworzy graf zależności, który mapuje każdy moduł, którego potrzebuje projekt i generuje co najmniej jeden pakiet.
  • Uglify: zestaw narzędzi do analizowania, minifikacji, kompresji i upiększania JavaScriptu.
  • Babel: kompilator języka JavaScript używany głównie do konwertowania kodu ECMAScript 2015+ na wsteczną wersję języka JavaScript w bieżących i starszych przeglądarkach lub środowiskach. Warto również użyć babel-preset-env, aby nie było potrzeby drobiazgowego zarządzania przekształceniami składniowymi ani polyfillami przeglądarki, a także aby można było określić, które przeglądarki internetowe mają być obsługiwane.
  • ESLint: narzędzie do identyfikowania i raportowania wzorców znalezionych w kodzie JavaScript, które ułatwia zapewnienie spójności kodu i uniknięcie błędów.
  • Enzym: narzędzie do testowania języka JavaScript dla platformy React, które ułatwia testowanie danych wyjściowych składników React.
  • Jest: Struktura testowania, która współpracuje z babelem, aby ułatwić pisanie idiomatycznych testów języka JavaScript w aplikacjach React.
  • Mocha: platforma testowania, która działa na Node.js i w przeglądarce, aby ułatwić testowanie asynchroniczne, raportowanie i mapowanie nieuchwyconych wyjątków do prawidłowych przypadków testowych.

Kursy i samouczki dotyczące platformy React

Oto kilka zalecanych miejsc do nauki platformy React i tworzenia przykładowych aplikacji:

Dodatkowe zasoby

  • Last updated on