add-react-to-an-existing-project.md

title
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

Musisz zainstalować Node.js do programowania w środowisku lokalnym. Chociaż możesz wypróbować Reacta online lub z pomocą prostej strony HTML, realistycznie większość javascriptowych narzędzi, których będziesz chcieć użyć do programowania, wymaga Node.js.

Korzystanie z Reacta dla całej podścieżki istniejącej strony internetowej {/using-react-for-an-entire-subroute-of-your-existing-website/}

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ć:

1. Zbuduj część aplikacji w Reakcie przy użyciu jednego z frameworków opartych na Reakcie.
2. Określ /some-app jako bazową ścieżkę w konfiguracji twojego frameworka (oto jak: Next.js, Gatsby).
3. 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 {/using-react-for-a-part-of-your-existing-page/}

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:

1. Skonfiguruj środowisko javascriptowe, które pozwoli ci używać składni JSX, podziel kod na moduły za pomocą składni import / export oraz używaj pakietów (na przykład React) z rejestru pakietów npm.
2. 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 {/step-1-set-up-a-modular-javascript-environment/}

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:

npm install react react-dom

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):

<!DOCTYPE html>
<html>
  <head><title>Moja aplikacja</title></head>
  <body>
    <!-- Zawartość istniejącej strony (w tym przykładzie zostanie zastąpiona) -->
  </body>
</html>

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.

Integracja modularnego środowiska javascriptowego po raz pierwszy do istniejącego już projektu może wydawać się przytłaczająca, ale warto! Jeśli utkniesz, spróbuj skorzystać z zasobów społeczności lub czatu Vite.

Krok 2: Renderuj reactowe komponenty gdziekolwiek na stronie {/step-2-render-react-components-anywhere-on-the-page/}

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:

<!DOCTYPE html>
<html>
  <head><title>Moja aplikacja</title></head>
  <body>
    <p>Ten akapit jest częścią HTML-a.</p>
    <nav id="navigation"></nav>
    <p>Ten akapit jest również częścią HTML-a.</p>
  </body>
</html>

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 {/using-react-native-in-an-existing-native-mobile-app/}

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.