Zacznij nowy projekt w Reakcie
Jeśli chcesz zbudować nową aplikację lub stronę internetową wyłącznie za pomocą Reacta, zalecamy wybrać jeden z frameworków opartych na Reakcie, który jest popularny w społeczności. Frameworki te zapewniają funkcjonalności, które większość aplikacji i stron internetowych koniec końców będzie potrzebować, takie jak nawigacja, pobieranie danych i generowanie kodu HTML.
Dojrzałe frameworki reactowe
Next.js
Next.js to kompleksowy (ang. full-stack) framework reactowy. Jest wszechstronny i pozwala na tworzenie aplikacji reactowych o dowolnym rozmiarze - od prostej, głównie statycznej strony bloga po złożoną, dynamiczną aplikację. Aby utworzyć nowy projekt w Next.js, wywołaj poniższą komendę w terminalu:
Jeśli Next.js jest dla ciebie nowością, sprawdź samouczek Next.js.
Next.js jest rozwijany przez Vercel. Możesz wdrożyć aplikację Next.js na dowolnym hostingu obsługującym Node.js lub usłudze bezserwerowej, lub nawet na własnym serwerze. Next.js obsługuje również eksport statyczny, który nie wymaga serwera.
Remix
Remix to kompleksowy framework reactowy z wbudowanym nawigacją. Pozwala to na podzielenie aplikacji na zagnieżdżone części, które mogą ładować dane równolegle i odświeżać się w odpowiedzi na akcje użytkownika. Aby utworzyć nowy projekt w Remix, uruchom komendę:
Jeśli Remix jest dla ciebie czymś nowym, sprawdź tutorial na blogu (krótki) oraz tutorial z przykładową aplikacją (długi).
Remix jest utrzymywany przez Shopify. Kiedy tworzysz projekt z użyciem Remix, musisz wybrać platformę docelową. Możesz wdrożyć aplikację Remix na dowolnym hostingu obsługującym Node.js lub na usłudze bezserwerowej, korzystając z istniejącego lub własnego adaptera.
Gatsby
Gatsby to framework reactowy stworzony dla szybkich stron internetowych opartych o CMS. Jego bogaty ekosystem wtyczek i warstwa danych GraphQL ułatwiają integrację treści, interfejsów API i usług. Aby utworzyć nowy projekt Gatsby, uruchom komendę:
Jeśli Gatsby to dla ciebie nowość, sprawdź samouczek.
Gatsby jest utrzymywane przez Netlify. Możesz wdrożyć w pełni statyczną stronę Gatsby na dowolnym hostingu statycznym. Jeśli zdecydujesz się na korzystanie z funkcji obsługiwanych tylko przez serwer, upewnij się, że twój dostawca hostingu wspiera je dla Gatsby.
Expo (dla aplikacji natywnych)
Expo to framework reactowy, który pozwala tworzyć uniwersalne aplikacje na Androida, iOS oraz webowe z prawdziwie natywnym interfejsem użytkownika. Dostarcza on SDK dla React Native, które ułatwia korzystanie z natywnych funkcjonalności. Aby utworzyć nowy projekt Expo, uruchom komendę:
Jeśli Expo jest dla siebie nowy, zajrzyj do jego samouczka.
Expo jest utrzymywane przez Expo (firmę). Budowanie aplikacji z jego pomocą jest darmowe, a te możesz udostępniać w sklepach Google i Apple bez ograniczeń. Expo oferuje także dodatkowe płatne usługi w chmurze.
Dla dociekliwych
Oczywiście, możesz używać Reacta bez żadnego frameworka - w taki sposób używa się go tylko dla części strony. Jednakże, jeśli budujesz nową aplikację lub stronę w pełni za pomocą Reacta, zalecamy korzystanie z frameworka.
Oto dlaczego.
Nawet jeśli początkowo nie potrzebujesz nawigacji ani pobierania danych, prawdopodobnie później będziesz chcieć dodać pewne biblioteki do ich obsługi. W miarę jak twój bundle rośnie z każdą nową funkcją, możesz musieć zastanowić się, jak podzielić kod dla każdego widoku z osobna. Gdy potrzeby dotyczące pobierania danych stają się bardziej złożone, prawdopodobnie napotkasz problemy związane z kaskadami żądań sieciowych między serwerem a klientem, które sprawiają, że twoja strona działa bardzo wolno. Gdy aplikacja zaczyna obsługiwać więcej użytkowników z kiepskim połączeniem sieciowym i urządzeniami niskiej jakości, możesz potrzebować generować HTML z twoich komponentów, aby wyświetlać zawartość wcześniej - albo na serwerze, albo podczas budowania. Zmiana w celu uruchamiania części kodu na serwerze lub podczas budowania może być bardzo trudna.
Problemy te nie są specyficzne tylko dla Reacta. Dlatego Svelte korzysta z SvelteKit, Vue z Nuxt itp. Aby samodzielnie rozwiązać te problemy, będziesz musieć zintegrować swój bundler z bibliotekami do nawigacji i do pobierania danych. Nie jest trudno uzyskać początkową działającą konfigurację, ale istnieje wiele niuansów związanych z tworzeniem aplikacji, która ładuje się szybko nawet w miarę jej wzrostu. Będziesz chcieć przesłać minimalną ilość kodu aplikacji, ale zrób to w jednym cyklu klient-serwer, równolegle z danymi wymaganymi do wygenerowania strony. Prawdopodobnie zależy ci, aby strona była interaktywna jeszcze przed uruchomieniem kodu JavaScript, wspierając tym samym progresywne ulepszanie (ang. progressive enhancement). Możesz chcieć generować folder w pełni statycznych plików HTML dla swoich stron marketingowych, które można hostować w dowolnym miejscu i wciąż będą działać nawet przy wyłączonym JavaScripcie. Budowanie tych funkcji samodzielnie wymaga konkretnej pracy.
Wymienione tu frameworki Reacta, rozwiązują te problemy, bez dodatkowej pracy z twojej strony. Pozwalają rozpocząć od bardzo podstawowej konfiguracji, a następnie rozwijać aplikację zgodnie z twoimi potrzebami. Każdy framework Reacta ma swoją społeczność, co ułatwia znalezienie odpowiedzi na pytania i aktualizację narzędzi. Frameworki te również nadają strukturę twojemu kodowi, pomagając tobie i innym zachować kontekst i umiejętności pomiędzy różnymi projektami. Inaczej, korzystając z niestandardowego rozwiązania, łatwiej jest utknąć na niewspieranych wersjach zależności i w zasadzie skończyć tworząc swój własny framework, bez społeczności i sposobów ulepszeń (i jeśli będzie on w jakiś sposób podobny do tych, które stworzyliśmy wcześniej, będzie on bardziej chaotycznie zaprojektowany).
Jeżeli to wciąż cię nie przekonuje albo twoja aplikacja posiada nietypowe ograniczenia, które nie są dobrze obsługiwane przez te frameworki i chcesz stworzyć własne niestandardowe rozwiązanie, nie będziemy cię powstrzymywać — śmiało, działaj! Pobierz react i react-dom z npm, skonfiguruj swój własny proces kompilacji za pomocą bundlera, takiego jak Vite lub Parcel, a następnie dodawaj inne narzędzia, gdy będą ci potrzebne, np. do nawigacji, statycznego generowania lub renderowania po stronie serwera i inne.
Nowoczesne frameworki reactowe
W trakcie eksplorowania możliwości dalszego udoskonalania Reacta zauważyliśmy, że największą szansą, aby pomóc użytkownikom Reacta w budowaniu lepszych aplikacji jest jego ścisła integracja z frameworkami, zwłaszcza pod względem nawigacji, bundlowania i technologii serwerowych. Zespół Next.js zgodził się na współpracę z nami w zakresie badania, rozwoju, integracji i testowania funkcjonalności Reacta z pogranicza frameworków, takich jak React Server Components.
Z każdym dniem, funkcjonalności te stają się coraz bliższe użycia w wersji produkcyjnej, a my prowadzimy rozmowy z deweloperami innych bundlerów i frameworków w sprawie ich integracji. Mamy nadzieję, że za rok lub dwa, wszystkie wymienione tu frameworki będą w pełni obsługiwać te funkcjonalności. Jeśli tworzysz framework i interesuje cię współpraca z nami w celu przetestowania tych funkcji, daj nam znać!
Next.js (App Router)
App Router z Next.js to przeprojektowanie interfejsów API z Next.js, mające na celu zrealizowanie wizji architektury full-stack, przyświecającej zespołowi Reacta. Pozwala on na pobieranie danych w komponentach asynchronicznych, które uruchamiają się na serwerze lub nawet podczas procesu budowy.
Next.js jest rozwijane przez Vercel. Możesz wdrożyć aplikację Next.js na dowolny hosting wspierający Node.js lub rozwiązania chmurowe (ang. serverless), a nawet na własny serwer. Next.js obsługuje również eksport statyczny (ang. static export), który nie wymaga serwera.
Dla dociekliwych
Bundler App Router z Next.js w pełni implementuje oficjalną specyfikację React Server Components. Pozwala to na łączenie komponentów budowanych podczas kompilacji, budowanych na serwerze oraz interaktywnych w pojedynczym drzewie Reacta.
Na przykład, możesz napisać komponent serwerowy jako funkcję async, która czyta z bazy danych lub pliku. Następnie możesz przekazywać dane z niego do komponentów interaktywnych:
// Ten komponent jest wywoływany *tylko* po stronie serwera (lub podczas kompilacji).
async function Talks({ confId }) {
// 1. Jesteś na serwerze, więc możesz komunikować się z warstwą danych. Użycie API nie jest konieczne.
const talks = await db.Talks.findAll({ confId });
// 2. Dodaj dowolną ilość logiki renderowania. Nie zwiększy to rozmiaru bundla.
const videos = talks.map(talk => talk.video);
// 3. Przekaż dane do komponentów, które będą działały w przeglądarce.
return <SearchableVideoList videos={videos} />;
}App Router z Next.js zawiera również pobieranie danych z użyciem Suspense. Pozwala to na zdefiniowanie stanu ładowania (na przykład jako skeletonu) dla różnych części interfejsu użytkownika bezpośrednio w drzewie React:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Komponenty serwerowe i Suspense są funkcjonalnościami Reacta, a nie samego Next.js. Jednakże, ich zaadaptowanie w frameworku wymaga akceptacji i znacznej pracy. W chwili obecnej, App Router z Next.js jest ich najpełniejszą implementacją. Zespół Reacta współpracuje z deweloperami bundlerów, aby ułatwić implementację tych funkcjonalności w frameworkach następnej generacji.