Integracja Reacta w twojej aplikacji Astro

W tym tutorialu dowiesz się, jak dodać React do swojej aplikacji Astro. Pozwoli ci to tworzyć nowoczesne komponenty React i integrować je w swojej aplikacji. Przejdziemy przez niezbędne kroki, aby przygotować swoją aplikację Astro do Reacta i stworzyć prosty komponent.

Najważniejsze wnioski

• Musisz zainstalować pakiet React i odpowiednie wtyczki.
• Struktura twoich komponentów w Astro różni się nieco od czystego HTML-a.
• Aby upewnić się, że twoje komponenty React są renderowane w przeglądarce, musisz użyć atrybutu client:only.

Instrukcja krok po kroku

Aby dodać React do swojej aplikacji Astro, postępuj zgodnie z poniższymi krokami:

Najpierw upewnij się, że serwer deweloperski nie działa. Możesz to zrobić, przerywając polecenie npm run dev. Jest to ważne, aby zapobiec konfliktom podczas instalacji nowych zależności.

Teraz jesteś gotowy, aby oficjalnie zintegrować Reacta. Aby to zrobić, użyj polecenia npx astro add react. Dzięki temu poleceniu dodasz niezbędne paczki wymagane do wsparcia Reacta w Twojej aplikacji Astro.

Następnie zostaniesz zapytany, czy chcesz zainstalować nowe zależności za pomocą npm. Upewnij się, że potwierdzisz to, ponieważ instalacja bez tych zależności nie będzie działać poprawnie.

Podczas procesu instalacji zostaną dokonane zmiany w pliku astro.config.mjs. Powinieneś również zaakceptować te zmiany, aby wszystko działało płynnie.

Po zakończeniu instalacji Twoja aplikacja powinna teraz mieć wsparcie dla Reacta. Sprawdźmy, jakie nowe zależności zostały dodane. W pliku package.json znajdziesz teraz react, react-dom, a także @astrojs/react jako wtyczki.

Aby upewnić się, że wszystko jest poprawnie skonfigurowane, potrzebujesz komponentu React, który można przetestować. W katalogu src utwórz nowy katalog o nazwie components, który będzie zawierać twoje komponenty React.

W tym katalogu stwórz plik o nazwie index.jsx. Będzie to gotowy do użycia komponent React, do którego można dodać kod.

Następnie upewnij się, że komponent jest importowany w pliku index.astro. Dzieje się to między trzema myślnikami (---) w górnej części pliku, gdzie można wstawić instrukcje importu.

Instrukcja importu może wyglądać mniej więcej tak: import App from '../components/index.jsx';. Zapewni to poprawne załadowanie twojego komponentu.

Najpierw upewnij się, że eksportujesz coś, aby plik nie pozostał pusty. Dodaj prostą funkcję, która renderuje coś do DOMu.

Pamiętaj, aby ustawić atrybut client:only dla swojego komponentu React. Zapewni to renderowanie komponentu w przeglądarce, a nie na serwerze.

Następnie przejdźmy do pliku index.jsx i stwórzmy prosty komponent React. Możesz na przykład dodać prosty div z tekstem „App” do HTML.

Jeśli teraz uruchomisz aplikację, powinieneś zobaczyć, że nowy komponent został pomyślnie załadowany i działa poprawnie.

Kiedy spojrzysz na DOM, zauważysz, że Astro używa specjalnego zamiennika o nazwie „Astro Island”, gdzie renderowane są twoje komponenty React.

Astro pozwala jednocześnie używać wielu bibliotek frontendowych. Oznacza to, że możesz łączyć react, Vue czy inne biblioteki w jednej aplikacji, bez komplikacji.

Działanie twojego komponentu to już dobry krok, teraz możesz pracować nad rozbudową swojej aplikacji. W przyszłych samouczkach rozwiniemy ten komponent w aplikację czatową.

Podsumowanie

W tym samouczku nauczyłeś się, jak dodać React do swojej aplikacji Astro i jak stworzyć prosty komponent. Otwiera to wiele możliwości do rozbudowy twojej aplikacji.