Historia i upadek Create React App, legendy tworzenia stron internetowych

Pamiętasz 2016? Próba szybkiego stworzenia prostego projektu React była wtedy jak składanie szafki bez instrukcji. Musiałeś ręcznie konfigurować Webpack, ustawiać Babel, pisać konfiguracje dla loaderów CSS i konfigurować lokalny serwer deweloperski. Przygotowanie środowiska zajmowało cały dzień, mimo że nie napisałeś ani jednej linijki kodu swojej aplikacji.

Następnie Facebook wydał Create React App (CRA). Pojedyncze polecenie npx create-react-app my-app generowało gotowy do pracy projekt. Bez monitów, bez okien dialogowych, bez tysięcy linii konfiguracji.

Dziś to narzędzie zostało oficjalnie oznaczone jako przestarzałe i odesłane na długoterminową emeryturę. Dokumentacja Reacta bezpośrednio zaleca przejście na alternatywy takie jak Vite czy Next.js. Przyjrzyjmy się, jak CRA zrewolucjonizowało branżę frontendową, co kryło się pod maską i dlaczego jego era dobiegła końca.

Co robiło Create React App

Idea narzędzia wpisywała się w koncepcję „zero-konfiguracji". Deweloper otrzymywał działający stack bez konieczności zagłębiania się w ustawienia narzędzi budowania.

Cała infrastruktura była ukryta w jednym pakiecie — react-scripts. Była to czarna skrzynka zawierająca Webpack, Babel, ESLint i PostCSS.

Szybki start wyglądał tak:

npx create-react-app my-app
cd my-app
npm start

Po około trzydziestu sekundach strona otwierała się w przeglądarce pod adresem http://localhost:3000.

Struktura katalogów była niezwykle czysta. Brak plików .babelrc czy webpack.config.js w korzeniu:

my-app
├── README.md
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    └── index.js

Jak to działało pod maską

CRA zostało zbudowane na trzech zasadach: pojedyncza zależność budowania, zero początkowej konfiguracji i polecenie ucieczki.

Pojedyncza zależność

Wcześniej aktualizacja narzędzi zamieniała się w piekło. Zaktualizujesz Webpack — Babel się psuł. Zaktualizujesz Babel — przestawał działać plugin ESLint.

W CRA za wszystko odpowiadał react-scripts. Aktualizacja tej jednej biblioteki aktualizowała cały łańcuch budowania pod spodem. Zawierał:

• Wsparcie dla JSX, ES6+ i TypeScript out of the box
• Automatyczne wstrzykiwanie prefiksów dostawców w CSS przez Autoprefixer
• Interaktywne uruchamianie testów z Jest i obserwowanie plików
• Nakładki błędów budowania bezpośrednio w przeglądarce

Jeśli zrobiłeś literówkę w składni, CRA pokazywał czytelny ekran wskazujący dokładną linię i znak:

Mechanizm eject

Co jeśli domyślna konfiguracja nie była wystarczająca? Powiedzmy, że potrzebowałeś rzadkiego pluginu do przetwarzania określonych typów plików.

W takich przypadkach twórcy dodali polecenie npm run eject. Dosłownie wywracało projekt na nice: usuwało react-scripts i kopiowało setki linii konfiguracji Webpack i Babel prosto do twojego projektu.

To była jednokierunkowa podróż. Nie było sposobu, żeby wrócić do czystej struktury, a musiałeś sam utrzymywać ten rozbudowany bałagan konfiguracyjny.

Dlaczego Create React App stało się przestarzałe

Czas pracował przeciwko CRA. Technologie poszły do przodu, a architektoniczne decyzje narzędzia zamieniły się w słabości.

Po pierwsze, szybkość. Webpack przebudowuje i analizuje cały projekt od zera przy uruchamianiu serwera deweloperskiego. Gdy projekt rośnie do setek komponentów, uruchomienie i hot reload trwają dziesiątki sekund. Vite, który pojawił się później, używa natywnych modułów ES przeglądarki i buduje kod w locie dzięki błyskawicznemu kompilatorowi Go — esbuild.

Po drugie, przesunięcie w kierunku SSR i komponentów serwera. CRA mogło budować tylko aplikacje jednostronicowe (SPA) zorientowane na klienta — pusty plik HTML, który wypełniał się skryptami w przeglądarce użytkownika. Dobry SEO i szybki pierwszy paint wymagały renderowania po stronie serwera, czego CRA po prostu nie mogło zapewnić.

Po trzecie, rozdęty rozmiar. Folder node_modules dla świeżo utworzonego projektu ważył setki megabajtów, a instalacja zależności trwała kilka minut nawet na szybkim łączu.

Co używać zamiast CRA

Oficjalny przewodnik Reacta daje jasne wskazówki:

• Vite — jeśli potrzebujesz szybkiej SPA, projektu hobbystycznego lub osobistego bloga bez renderowania po stronie serwera. Uruchamia się w milisekundach i działa zauważalnie szybciej.
• Next.js lub Remix — jeśli budujesz pełnoprawną aplikację produkcyjną z SSR, routingiem, optymalizacją obrazów i komponentami serwera.
• Expo — jeśli planujesz pisać wieloplatformową aplikację mobilną z React Native.

Pamięć o legendzie

Create React App zrobiło najważniejszą rzecz: ustanowiło wysoki standard Developer Experience. Pokazało całej branży, że budowanie aplikacji webowej może być proste i nie wymagać głębokiej znajomości Webpacka już pierwszego dnia pracy.

Zaczynanie nowych poważnych projektów na CRA dzisiaj nie ma praktycznej wartości. Ale jeśli natkniesz się na trzyletni tutorial lub będziesz musiał szybko uruchomić sandbox — CRA nadal będzie działać.