Tworzenie aplikacji React — Kurs React 18

Zobacz, jak stworzyć aplikację React oraz zapoznaj się z instrukcją krok po kroku tworzenia projektu React dla Vite i Next.js.

Wstęp

W ciągu kilku ostatnich lat wiele się zmieniło. Na oficjalnej stronie react.dev w sekcji instalacji, nie polecają już CRA (Create React App) do stworzenia projektu w React. Polecane są frameworki React, które oferują coś więcej niż sam React. Możemy więc wyróżnić dwa sposoby na stworzenie aplikacji React. Pierwszym jest stworzenie za pomocą „builderów”, czyli narzędzi, które używane są do transpilacji, kompilacji i uruchamiania kodu. Drugim sposobem jest utworzenie z wykorzystaniem frameworku, który dostarcza więcej funkcjonalności takich jak routing, pobieranie danych czy generowanie HTML.

Sposoby tworzenia aplikacji React

Kompilery

Vite

Vite to narzędzie do budowania kodu, które umożliwia jego budowanie czy również uruchamianie serwera do podglądu aplikacji. Vite nie jest tylko do React, ale może być wykorzystany również do JavaScript, Svelte czy Vue.

npm create vite@latest

Create React App

CRA to słynne narzędzie, które towarzyszyło nam od początków Reacta. W tej chwili nie zaleca się korzystania z niego. Umieszczam go tutaj informacyjnie.

npx create-react-app my-app

Frameworki React

Next.js

Next.js to fullstackowy framework React, dzięki któremu stworzysz aplikację zawierającą backend i frontend.

npx create-next-app@latest

Remix

Remix to fullstackowy framework, który podobnie jak Next.js umożliwia stworzenie aplikacji zawierającej backend i frontend. To bezpośredni konkurent Next.js.

Gatsby

Gatsby to framework React, który umożliwia tworzenie stron, głównie CMS (Content Management System).

npx create-gatsby

Expo (aplikacje natywne)

Expo to framework React do tworzenia aplikacji mobilnych na Androida, iOS i Web.

npx create-expo-app

Którą opcję wybrać?

Oficjalna dokumentacja React rekomenduje stworzenie aplikacji React za pomocą jednego z frameworków (tylko te propozycje są tam zamieszczone).

Osobiście polecam opcję z Vite (który nie jest frameworkiem) lub z Next.js. Na pewno unikałbym używania CRA!

Tworzenie projektu React krok po kroku

Zaprezentuję oba sposoby tworzenia aplikacji React tj. z Vite i Next.js.

Vite

Tworzenie projektu

Zacznijmy od wykonania komendy.

npm create vite@latest

W terminalu będziemy mieć kilka rzeczy do konfiguracji.

• Project Name – wpisz nazwę projektu lub pozostaw domyślną vite-project
• Select a framework – wybierz framework, w tym kroku zaznacz React
• Select a variant – wybierz wariant, polecam wybrać TypeScript

Po wykonaniu tego kroku utworzy się projekt o nazwie podanej w pierwszej opcji.

Instalacja zależności

Następnie należy przejść do folderu, który utworzyliśmy. W moim przypadku będzie to react-vite.

cd react-vite

Wymagana jest instalacja zależności za pomocą komendy:

npm install

Uruchamianie aplikacji

Wszystko gotowe. Pozostało już tylko uruchomić aplikację React.

npm run dev

Aplikacja powinna zostać uruchomiona poprawnie i efekt w terminalu powinien być taki jak na obrazku poniżej.

Pierwsza aplikacja jest już uruchomiona pod adresem http://localhost:5173.

Next.js

Tworzenie projektu

Projekt w Next.js tworzymy za pomocą komendy:

npx create-next-app@latest

W terminalu zobaczymy konfigurację, która wygląda następująco:

• What is your project named – nazwa Twojego projektu, ja wpisałem react-next
• Would you like to use TypeScript? – czy chcesz użyć TypeScript, polecam wybrać tak (yes)
• Would you like to use ESLint? – czy chcesz ESLint w projekcie, polecam wybrać tak (yes)
• Would you like to use Tailwind CSS? – czy chcesz użyć Tailwind CSS w projekcie. Tutaj według uznania
• Would you like to use src/ directory? – czy kod ma być umieszczony w katalogu src/. Nie ma to jakiegoś większego znaczenia. Pytanie czy chcesz odseparować kod od konfiguracji w głównym folderze. Więcej o katalogu src/ w oficjalnej dokumentacji Next.js
• Would you like to use App Router? – czy chcesz użyć App Router. Jeśli nie wiesz, to wybierz domyślną opcję
• Would you like to customize the default import alias (@/*)? – ustawienie aliasu do importów, wybierz domyślną opcję

Po wykonaniu konfiguracji nastąpi instalacja zależności w projekcie.

Uruchamianie aplikacji

Teraz wystarczy uruchomić aplikację za pomocą komendy:

npm run dev

Oto wynik.

Pod adresem http://localhost:3000 została uruchomiona aplikacja.

Podsumowanie

Mamy wiele dostępnych możliwości, jeśli chodzi o sposoby tworzenia aplikacji React. Dostępne narzędzia możemy podzielić na dwa rodzaje. Kompilery, który tylko uruchamia aplikację React oraz frameworki React, które posiadają więcej funkcji czy dołączonych narzędzi. Druga opcja z frameworkiem React wydaje się bardziej interesująca, ponieważ na końcu chcemy mieć już wszystko to, co potrzebne gotowe do użycia. Warto zwrócić uwagę, że kompiler może być użyty wewnątrz frameworku co oznacza, że framework to zbiór nadrzędny. Przypomina to różnice pomiędzy edytorem tekstu i IDE.

Poznaliśmy sposoby instalacji, a następnie przedstawiłem instalację oraz uruchomienie aplikacji za pomocą Vite, oraz Next.js. Teraz czas na kodowanie.