De geschiedenis en ondergang van Create React App, een legendarische webontwikkelingstool

Herinner je je 2016 nog? Proberen om snel een simpel React-project op te zetten was toen alsof je een kast in elkaar zette zonder handleiding. Je moest handmatig Webpack aansluiten, Babel configureren, configuraties schrijven voor CSS-loaders en een lokale dev-server opzetten. Het opzetten van de omgeving kostte een hele dag, ook al had je nog geen enkele regel van je eigen applicatiecode aangeraakt.

Toen bracht Facebook Create React App (CRA) uit. Een enkele npx create-react-app my-app-opdracht genereerde een kant-en-klaar project. Geen prompts, geen dialoogvensters, geen duizenden regels configuratie.

Vandaag is deze tool officieel gemarkeerd als deprecated en gaat met pensioen. De React-documentatie adviseert rechtstreeks om over te schakelen naar alternatieven zoals Vite of Next.js. Laten we onderzoeken hoe CRA de frontend-industrie transformeerde, wat er onder de motorkap zat, en waarom zijn tijd ten einde raakte.

Wat Create React App deed

Het idee van de tool paste in het "zero-configuration"-concept. De developer kreeg een werkende stack zonder zich te hoeven verdiepen in build tool-instellingen.

Alle infrastructuur was verborgen in één pakket — react-scripts. Het was een black box met Webpack, Babel, ESLint en PostCSS erin.

Een snelle start zag er zo uit:

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

Na ongeveer dertig seconden ging er een pagina open in je browser op http://localhost:3000.

De directory-structuur was uiterst clean. Geen .babelrc of webpack.config.js bestanden in de root:

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

Hoe het onder de motorkap werkte

CRA was opgebouwd rond drie principes: één build-afhankelijkheid, nul initiële setup, en een escape hatch-commando.

Één afhankelijkheid

Voorheen werd tooling updaten een hel. Webpack geüpdatet — Babel brak. Babel geüpdatet — een ESLint-plugin werkte niet meer.

Bij CRA was react-scripts verantwoordelijk voor alles. Door deze ene library te updaten werd de hele build-chain eronder geüpdatet. Het bevatte:

• JSX, ES6+ en TypeScript-ondersteuning out of the box
• Automatische vendor prefix-injectie in CSS via Autoprefixer
• Interactieve testruns met Jest en file watching
• Build error overlays direct in de browser

Als je een typo maakte in de syntax, toonde CRA een duidelijk scherm dat naar de exacte regel en het karakter wees:

Het eject-mechanisme

Wat als de standaardconfiguratie niet genoeg was? Stel, je had een zeldzame plugin nodig voor het verwerken van specifieke bestandstypen.

Daarvoor voegden de makers het npm run eject-commando toe. Het keerde letterlijk het hele project inside out: verwijderde react-scripts en kopieerde alle honderden regels Webpack- en Babel-configs rechtstreeks naar je project.

Dit was een enkele reis. Er was geen manier om de clean structuur terug te krijgen, en je moest zelf het uitdijende configuratiechaos onderhouden.

Waarom Create React App achterhaald raakte

De tijd werkte tegen CRA. Technologieën gingen vooruit, en de architectuurkeuzes van de tool werden zwakheden.

Ten eerste, snelheid. Webpack herbouwt en analyseert het hele project van scratch bij het starten van de dev server. Wanneer een project groeit tot honderden componenten, duren opstart en hot reload tientallen seconden. Vite, dat later kwam, gebruikt native browser ES-modules en bouwt code on the fly met de razendsnelle Go-compiler esbuild.

Ten tweede, de verschuiving naar SSR en server components. CRA kon alleen client-centrische Single Page Applications (SPA) bouwen — een leeg HTML-bestand dat zich vulde met scripts in de browser van de gebruiker. Goede SEO en een snelle first paint vereisten server-side rendering, wat CRA simpelweg niet kon leveren.

Ten derde, opgeblazen grootte. De node_modules-folder voor een vers aangemaakt project woog honderden megabytes, en het installeren van dependencies duurde een paar minuten, zelfs op een snelle verbinding.

Wat te gebruiken in plaats van CRA

De officiële React-guide geeft duidelijke richtingen:

• Vite — als je een snelle SPA nodig hebt, een pet project, of een persoonlijke blog zonder server-side rendering. Het start in milliseconden en draait merkbaar sneller.
• Next.js of Remix — als je een volwaardige productie-app bouwt met SSR, routing, image-optimalisatie en server components.
• Expo — als je van plan bent een cross-platform mobiele app te schrijven met React Native.

Nagedachtenis aan een legende

Create React App deed het belangrijkste: het zette een hoge standaard voor Developer Experience. Het toonde de hele industrie dat het bouwen van een webapplicatie simpel kon zijn en geen diepgaande Webpack-kennis vereiste op je allereerste werkdag.

Nieuwe serieuze projecten starten op CRA heeft vandaag geen praktische waarde meer. Maar als je een drie jaar oude tutorial tegenkomt of snel een sandbox wilt opzetten — CRA werkt nog steeds.