Dodaj Reacta do istniejącego projektu
Jeśli chcesz dodać trochę interaktywności do istniejącego projektu, nie musisz przepisywać go w Reakcie. Dodaj Reacta do istniejącego stacku i renderuj interaktywne komponenty w dowolnym miejscu
Korzystanie z Reacta dla całej podścieżki istniejącej strony internetowej
Załóżmy, że masz istniejącą aplikację internetową pod adresem example.com zbudowaną przy użyciu innej technologii serwerowej (np. Rails) i chcesz zaimplementować wszystkie ścieżki zaczynające się od example.com/some-app/ przy użyciu Reacta.
Oto jak polecamy to skonfigurować:
- Zbuduj część aplikacji w Reakcie przy użyciu jednego z frameworków opartych na Reakcie.
- Określ
/some-appjako bazową ścieżkę w konfiguracji twojego frameworka (oto jak: Next.js, Gatsby). - Skonfiguruj serwer lub proxy, aby wszystkie żądania pod adresem
/some-app/były obsługiwane przez twoją aplikację w Reakcie.
Dzięki temu część aplikacji napisana w Reakcie będzie mogła korzystać z najlepszych praktyk wbudowanych w te frameworki.
Wiele frameworków opartych na Reakcie jest full-stackowych i pozwala twojej reactowej aplikacji wykorzystać serwer. Można jednak zastosować takie samo podejście, nawet jeśli nie możesz lub nie chcesz uruchamiać JavaScriptu na serwerze. W takim przypadku, zamiast tego dostarcz wyeksportowane pliki HTML/CSS/JS (pliki wyjściowe z next export dla Next.js, domyślne dla Gatsby) pod adresem /some-app/.
Korzystanie z Reacta dla części istniejącej strony
Załóżmy, że masz istniejącą stronę zbudowaną przy użyciu innej technologii (może to być technologia serwerowa, jak Rails, lub klientowa, jak Backbone), i chcesz renderować interaktywne komponenty Reacta gdzieś na tej stronie. Jest to powszechny sposób integracji Reacta - w rzeczywistości, większość zastosowań Reacta wyglądała właśnie tak w Meta przez wiele lat!
Możesz to zrobić w dwóch krokach:
- Skonfiguruj środowisko javascriptowe, które pozwoli ci używać składni JSX, podziel kod na moduły za pomocą składni
import/exportoraz używaj pakietów (na przykład React) z rejestru pakietów npm. - Renderuj swoje reactowe komponenty tam, gdzie chcesz je zobaczyć na stronie.
Dokładny sposób postępowania zależy od konfiguracji istniejącej strony, więc przejdźmy przez kilka szczegółów.
Krok 1: Skonfiguruj modularne środowisko javascriptowe
Modularne środowisko javascriptowe umożliwia pisanie reactowych komponentów w osobnych plikach, zamiast umieszczania całego kodu w jednym pliku. Pozwala również na korzystanie ze wspaniałych pakietów opublikowanych przez innych deweloperów w rejestrze npm - w tym także z Reacta! Sposób postępowania zależy od istniejącej konfiguracji:
-
Jeśli twoja aplikacja jest już podzielona na pliki, które używają instrukcji
import, spróbuj użyć istniejącej konfiguracji. Sprawdź, czy napisanie<div />w kodzie JavaScript powoduje błąd składniowy. Jeśli powoduje błąd składniowy, możesz potrzebować przetworzyć swój kod JavaScript za pomocą narzędzia Babel i włączyć Babel React preset, aby używać JSX. -
Jeśli twoja aplikacja nie ma istniejącej konfiguracji do kompilowania modułów JavaScript, skonfiguruj ją przy użyciu Vite. Społeczność Vite utrzymuje wiele integracji z frameworkami backendowymi, w tym z Rails, Django i Laravel. Jeśli nie widzisz na liście twojego frameworka backendowego, postępuj zgodnie z tym przewodnikiem, aby ręcznie zintegrować proces budowy Vite z twoim backendem.
Aby sprawdzić, czy twoja konfiguracja działa, uruchom następującą komendę w folderze projektu:
Następnie dodaj te linie kodu na początku głównego pliku JavaScript (może to być plik o nazwie index.js lub main.js):
import { createRoot } from 'react-dom/client'; // Wyczyść istniejącą zawartość HTML document.body.innerHTML = '<div id="app"></div>'; // Zamiast niej wyrenderuj swój komponent reactowy const root = createRoot(document.getElementById('app')); root.render(<h1>Witaj, świecie!</h1>);
Jeśli cała zawartość twojej strony została zastąpiona przez “Witaj, świecie!”, to wszystko działa! Kontynuuj czytanie.
Krok 2: Renderuj reactowe komponenty gdziekolwiek na stronie
W poprzednim kroku umieściliśmy poniższy kod na początku pliku głównego:
import { createRoot } from 'react-dom/client';
// Wyczyść istniejącą zawartość HTML
document.body.innerHTML = '<div id="app"></div>';
// Zamiast niej wyrenderuj swój komponent reactowy
const root = createRoot(document.getElementById('app'));
root.render(<h1>Witaj, świecie!</h1>);Oczywiście nie chcesz faktycznie wyczyścić istniejącej zawartości HTML!
Usuń ten kod.
Zamiast tego prawdopodobnie chcesz renderować swoje reactowe komponenty w określonych miejscach w HTML-u. Otwórz swoją stronę HTML (lub szablony serwera, które ją generują) i dodaj unikalny atrybut id do dowolnego tagu, na przykład:
<!-- ... gdzieś w twoim kodzie html ... -->
<nav id="navigation"></nav>
<!-- ... więcej html-a ... -->Pozwoli ci to znaleźć ten element HTML za pomocą document.getElementById i przekazać go do createRoot, abyś mógł renderować twój własny komponent reactowy wewnątrz niego:
import { createRoot } from 'react-dom/client'; function NavigationBar() { // TODO: Dodać implementację paska nawigacji return <h1>Witaj z Reacta!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);
Zauważ, że oryginalna zawartość HTML z pliku index.html została zachowana, ale twój własny komponent NavigationBar od teraz pojawia się wewnątrz <nav id="navigation"> w kodzie HTML. Przeczytaj dokumentację dotyczącą użycia createRoot, aby dowiedzieć się więcej na temat renderowania komponentów reactowych na istniejącej stronie HTML.
Kiedy wdrażasz Reacta w istniejącym projekcie, proces ten często zaczyna się od małych interaktywnych komponentów (takich jak przyciski), a następnie stopniowo “przesuwa się w górę”, aż w końcu cała strona jest zbudowana z użyciem Reacta. Jeśli kiedykolwiek osiągniesz ten punkt, zalecamy migrację do frameworka opartego na Reakcie, aby w pełni wykorzystać jego możliwości.
Korzystanie z React Native w istniejącej aplikacji mobilnej napisanej w natywnym języku
React Native można również stopniowo integrować z istniejącymi aplikacjami natywnymi. Jeśli masz istniejącą aplikację natywną dla systemu Android (napisaną w Java lub Kotlin) lub iOS (napisaną w Objective-C lub Swift), postępuj zgodnie z tym przewodnikiem, aby dodać do niej ekran w React Native.