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ę render , która zwraca JSX reprezentujący UI 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ło uznane za przestarzałe w przypadku 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 w systemie Windows?

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

• Instalowanie środowiska programistycznego React w systemie Windows
• Instalowanie środowiska programistycznego React w podsystemie Windows dla systemu Linux

Co można zrobić z platformą React?

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

• Podstawowe 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 utworzenie aplikacji React przy użyciu narzędzi frontonu vite w systemie Windows. Jeśli planujesz utworzyć aplikację internetową, która zostanie wdrożona na potrzeby środowiska produkcyjnego, warto rozważyć utworzenie aplikacji React przy użyciu narzędzia frontonu vite w podsystemie Windows dla systemu Linux (WSL), aby uzyskać lepszą szybkość wydajności, zgodność wywołań systemu i dopasowanie między lokalnym środowiskiem deweloperskim i środowiskiem wdrażania (często jest to serwer 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 Gatsby na WSL. Jeśli chcesz utworzyć witrynę spa renderowaną przez serwer z zapleczem Node.js, zalecamy zainstalowanie Next.js naWSL. (Chociaż Next.js teraz oferuje również obsługę plików statycznych).

• Natywne aplikacje klasyczne: platforma React Native dla komputerów stacjonarnych i 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, konsoli Xbox i urządzeń rzeczywistości mieszanej. Obsługuje zarówno zestaw SDK systemu Windows , jak i zestaw SDK systemu macOS.

• 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 elementów na 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 systemu Windows, react native i interfejsu wiersza polecenia expo, zobacz React Native for Android development on Windows (Programowanie aplikacji React Native dla systemu Android w systemie 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.

• Instalowanie oprogramowania React przy użyciu programu Vite bezpośrednio w systemie Windows
• Instalowanie oprogramowania React przy użyciu narzędzia Vite w podsystemie Windows dla systemu Linux (WSL)
• Instalacja frameworku Next.js na WSL
• Zainstaluj framework Gatsby na WSL
• Instalowanie React Native na potrzeby tworzenia aplikacji desktopowych
• Instalowanie oprogramowania React Native na potrzeby programowania dla systemu Android w systemie Windows
• Instalowanie oprogramowania React Native na potrzeby tworzenia aplikacji mobilnych na różnych platformach)
• Zainstaluj platformę React w przeglądarce bez łańcucha narzędzi: ponieważ react jest biblioteką Języka JavaScript, która jest w najbardziej podstawowej formie, tylko kolekcją plików tekstowych, możesz tworzyć aplikacje React bez instalowania żadnych narzędzi ani bibliotek na komputerze. Możesz dodać tylko kilka "posypek interakcyjności" do strony internetowej i nie potrzebujesz narzędzi kompilacji. Składnik React można dodać, dodając zwykły <script> tag na stronie HTML. Postępuj zgodnie z instrukcjami "Dodaj React w jednej minucie" w dokumentacji React.

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.
• Bundling — ponieważ wydajność jest kluczowa dla nowoczesnych aplikacji internetowych, ważne jest, aby kod JavaScript aplikacji zawierał tylko wymagany kod dla aplikacji i został połączony w jak najmniejszą liczbę 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 konfigurowaniu ś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.

• W przypadku programowania w systemie Windows postępuj zgodnie z instrukcjami, aby zainstalować Node.js w programie WSL lub zainstalować Node.js w systemie Windows.

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 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ć.
• pl-PL: React Router: zbiór komponentów nawigacyjnych, które mogą pomóc w takich czynnościach, jak tworzenie zapisywalnych adresów URL dla aplikacji internetowej lub elastyczna nawigacja w 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: analizator języka JavaScript, minifikator, kompresor i upiększacz.
• 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. Może być również pomocne użycie babel-preset-env, aby nie trzeba było zarządzać transformacjami składni ani polifiltrami przeglądarki i można było określić, które przeglądarki internetowe będą 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:

• Ścieżka szkoleniowa platformy React zawiera moduły kursu online, które ułatwiają rozpoczęcie pracy z podstawami.
• Utwórz jednostronicową aplikację działającą w przeglądarce (na przykładzie tej przykładowej aplikacji internetowej, która pobiera informacje z kalendarza dla użytkownika za pomocą interfejsu Microsoft Graph API)
• Tworzenie aplikacji renderowanej przez serwer przy użyciu Next.js lub aplikacji wygenerowanej statycznie w witrynie przy użyciu narzędzia Gatsby
• Tworzenie interfejsu użytkownika dla aplikacji natywnej działającej na urządzeniach z systemem Windows, Android i iOS (wyewidencjonuj te natywne przykłady aplikacji systemu Windows lub tę przykładową aplikację natywną, która pobiera informacje kalendarza dla użytkownika przy użyciu interfejsu API programu Microsoft Graph)
• Tworzenie aplikacji dla urządzenia Surface Duo z podwójnym ekranem
• Tworzenie aplikacji internetowej lub aplikacji natywnej przy użyciu składników Fluent UI React
• Tworzenie aplikacji React przy użyciu języka TypeScript

Dodatkowe zasoby

• Oficjalna dokumentacja Reacta oferuje wszystkie najnowsze, up-to-aktualne informacje o React.
• Dodatki przeglądarki Microsoft Edge dla narzędzi programistycznych React: dodaje dwie karty do narzędzi deweloperskich przeglądarki Microsoft Edge, aby ułatwić programowanie react: składniki i profiler.