Stwórz nową aplikację w Reakcie

Najwygodniej będzie ci się pracowało, jeśli zastosujesz zintegrowany zestaw narzędzi (ang. toolchain). Użycie go pozwoli ci też zapewnić dobre doświadczenie użytkownikom twojej aplikacji.

Poniżej przedstawiamy kilka popularnych zestawów narzędziowych używanych w Reakcie. Pomagają one w zadaniach typu:

• zwiększanie skali projektu do wielu plików i komponentów;
• stosowanie dodatkowych bibliotek dostępnych w npm;
• wczesne wykrywanie często popełnianych błędów;
• ciągła, edycja CSS i JS w trakcie tworzenia aplikacji bez konieczności odświeżania strony w przeglądarce;
• optymalizacja zbudowanego kodu przed wdrożeniem go do środowiska produkcyjnego.

Zestawy narzędziowe, które tutaj podajemy, umożliwiają szybkie rozpoczęcie pracy nad aplikacją i nie wymagają żadnej wstępnej konfiguracji

Stosowanie zestawu narzędziowego nie jest konieczne

Jeśli powyższe zadania nie przysparzają ci żadnych problemów lub jeśli nie wiesz jeszcze, jak stosować narzędzia JavaScript, możesz dodać React jako zwykły znacznik <script> do strony HTML, ewentualnie z użyciem JSX.

Jest to najprostszy sposób zintegrowania Reacta z istniejącą już stroną internetową. Zestaw narzędziowy możesz zawsze dodać do swojej aplikacji, gdy pojawi się taka potrzeba.

Zalecane zestawy narzędziowe

Zespół Reacta rekomenduje następujące rozwiązania:

• Jeśli uczysz się Reacta lub jeśli tworzysz nową aplikację jednostronicową, skorzystaj z Create React App.
• Jeśli tworzysz stronę internetową renderowaną na serwerze z użyciem Node.js, spróbuj zastosować Next.js.
• Jeśli tworzysz stronę statyczną, która ma głównie wyświetlać określone treści, spróbuj zastosować Gatsby.
• Jeśli tworzysz bibliotekę komponentów lub dokonujesz integracji z istniejącą bazą kodu, spróbuj zastosować bardziej elastyczne zestawy narzędziowe.

Create React App

Create React App zapewnia bardzo dogodne środowisko pracy sprzyjające nauce Reacta. Jest to najlepszy sposób, aby zacząć tworzyć nową jednostronicową aplikację w Reakcie.

Środowisko pracy stworzone przez Create React App nie tylko umożliwi ci stosowanie najnowszych funkcjonalności języka JavaScript, lecz także zoptymalizuje twój kod przed oddaniem go do użytku i ogólnie znacznie usprawni twoją pracę. Aby móc skorzystać z tego rozwiązania na swoim komputerze, będziesz potrzebować Node >= 14.0.0 and npm >= 5.6. Stworzenie projektu umożliwią ci następujące komendy:

npx create-react-app moja-aplikacja
cd moja-aplikacja
npm start

Wskazówka

npx w pierwszej linijce powyżej to nie literówka, to narzędzie uruchamiające pakiety zawarte w npm 5.2+.

Create React App nie obsługuje ani logiki backendu ani baz danych; tworzy jedynie frontendowy potok budowania (ang. build pipeline). Dzięki temu możesz go używać z dowolnie wybranym przez siebie backendem. Create React App zawiera narzędzia takie jak Babel i webpack, ale nie musisz nic o nich wiedzieć, aby z powodzeniem używać ich w swoich projektach.

Kiedy uznasz, że twoja aplikacja jest gotowa do wdrożenia do środowiska produkcyjnego, zastosuj komendę npm run build. Dzięki temu uzyskasz zoptymalizowaną wersję swojej aplikacji. Znajdziesz ją w folderze build. Więcej informacji na temat Create React App znajdziesz w pliku README oraz w tym Przewodniku użytkownika.

Next.js

Next.js jest popularnym, lekkim frameworkiem służącym do budowy aplikacji reactowych statycznych oraz renderowanych po stronie serwera. Zestaw ten zawiera rozwiązania ułatwiające dodawanie stylu i mechanizmy routingu. Ponadto, Next.js domyślnie zakłada, że stosujesz Node.js jako środowisko serwerowe.

Zapoznaj się z zestawem narzędziowym Next.js poprzez oficjalny przewodnik.

Gatsby

Gatsby to najlepsze narzędzie do tworzenia stron statycznych korzystających z Reacta. Pozwala ono na tworzenie struktury aplikacji przy użyciu komponentów reactowych, lecz jako wynik końcowy generuje wstępnie wyrenderowane pliki HTML i CSS, co zapewnienia maksymalną szybkość ładowania strony.

Zapoznaj się z Gatsbym poprzez oficjalny przewodnik oraz galerię zestawów startowych.

Bardziej elastyczne zestawy narzędziowe

Podane niżej zestawy narzędziowe są stosunkowo bardziej elastyczne i dają większą dowolność konfiguracji. Polecamy je bardziej doświadczonym użytkownikom:

• Neutrino łączy w sobie siłę webpacka z prostotą ustawień domyślnych. Zestaw ten zawiera ustawienia domyślne dla aplikacji reactowych i komponentów reactowych.
• Nx jest zestawem narzędzi do programistów full-stackowych, z wbudowanym wsparciem dla Reacta, Next.js, Expressa i wielu innych.
• Parcel jest szybkim bundlerem aplikacji webowych, współgrającym z Reactem.
• Razzle jest frameworkiem umożliwiającym renderowanie po stronie serwera bez konieczności konfiguracji, ale zarazem dającym większy wybór niż Next.js.

Tworzenie zestawu narzędziowego od podstaw

W skład javascriptowych narzędzi do budowania aplikacji wchodzą zazwyczaj następujące elementy:

• Menadżer pakietów np. Yarn lub npm. Umożliwia on korzystanie z ogromnego ekosystemu dodatkowych pakietów. Pozwala łatwo je instalować i aktualizować.
• Bundler np. webpack lub Parcel. Umożliwia on pisanie kodu modularnego i pakowania go w małe pakiety, aby zoptymalizować czas ładowania.
• Kompilator np. Babel. Pozwala on na stosowanie nowych wersji JavaScriptu przy zachowaniu kompatybilności ze starszymi przeglądarkami.

Jeśli chcesz stworzyć swój własny zestaw narzędziowy od podstaw, zajrzyj do tego przewodnika. Dowiesz się z niego, jak odtworzyć niektóre z funkcjonalności Create React App.

Pamiętaj, aby upewnić się, że twój własny zestaw narzędziowy jest przystosowany do wdrożeń produkcyjnych.