Est-ce la fin de Create React App ?

Depuis 2016 l’outil create-react-app est le moyen officiel pour bootstraper des applications React.

Suite à la proposition d’un dev de migrer de CRA vers Vite, de nombreuses questions se posent sur cet outil.

Découvrons ensemble pourquoi CRA fait débat dans la communauté React.

Qu’est-ce qui se cache derrière create-react-app ?

Si l’on regarde le contenu du package.json généré par l’utilisation de la commande `npx create-react-app my-app`, on peut voir l’utilisation de react-script.

Cette lib, qui est gérée dans le même monorepo que create-react-app, utilise webpack/babel et propose un ensemble d’outils pré-configurés :

– le support de TS et la transpilation du code
– un serveur de dev avec un support HMR
– quelques options de gestion de style
– des outils de tests (Jest) et de qualité (ESLint)

CRA permet donc de travailler rapidement avec la lib React grâce à des choix forts et très orientés.

Plusieurs scripts sont prêts à l’emploi pour démarrer le serveur de dev, lancer les tests et builder l’application.

Enfin, il y a la possibilité d’éjecter `react-script` pour reprendre la main sur toute la configuration mais cela est irréversible 😬.
On se retrouve donc à devoir gérer plus de 40+ dépendances et des centaines de lignes de conf de webpack 😭.

Les limitations de CRA

Mais pourquoi voudrait-on se passer d’un outil qui a permis à de nombreux devs React de ne plus verser des larmes de sang sur des problèmes de configuration liés à webpack/babel.

On ne se souvient même plus du setup initial à base de npm install — save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader

1. Les options de configuration sont naturellement limitées par le choix des outils et de leurs versions. Impossible d’utiliser des librairies comme less, tailwind et antd (avant leurs versions 3) car elles demandaient des configurations webpack spécifiques.
   Des alternatives ont donc vu le jour comme craco et rewired afin de surcharger les configurations de webpack sans éjecter le projet.
2. CRA permet de faire des SPA (Single Page Application) uniquement, le seul mode de rendu supporté étant le CSR (Client Side Rendering).
3. Le repo de CRA n’est plus mis à jour depuis un certain temps. Cela pose, entre autres, des problématiques liées à la sécurité.

Il y a actuellement beaucoup d’issues (1,5k+) qui sont ouvertes ainsi qu’un grand nombre de PR en attente.
Ces deux points permettent légitimement de se demander si le projet est toujours en vie.

Mais est-ce qu’un projet stable devrait-il être continuellement mis à jour ?

Qu’est-ce qui cloche au sein de la communauté React ? Encore un coup de la team JavaScriptFatigue ?

React, une lib et plusieurs types d’usage

Depuis l’émergence de React, (React existe depuis 2013, webpack/babel depuis 2012.), une nouvelle vague d’usages et d’outils a vu le jour.

Si l’on souhaite publier une librairie React, que ce soit un ensemble de hooks ou une librairie de composants graphiques, CRA n’est pas adapté.

Le script de build de react-script n’est pas prévu pour exposer un module JS ou encore des assets (CSS, images, fonts).

Comme vu précédemment, CRA n’a pas été pensée pour une utilisation autre que CSR (Client Side Rendering). Si l’on veut faire une app avec un autre mode de rendu, il faut opter pour un framework comme Gatsby, Next.js ou Remix afin de bénéficier du SSR (Server Side Rendering) ou du SSG (Static Site Generation).

Le futur de CRA

Le thread Github est une véritable mine d’informations et d’idées sur l’avenir de cet outil qui nous a accompagné pendant tant d’années.

Dan Abramov propose de faire évoluer CRA vers un launcher afin d’utiliser l’outil le plus adapté en fonction de l’usage que l’on veut faire de son projet React.

La nouvelle doc de React propose des choix plus complets sur les solutions à utiliser en fonction du besoin.

TL;DR

Pour faire un POC ou un workshop, CRA fait très bien l’affaire.

Si j’utilise React tous les jours sur un projet CSR, mon choix se porte sur Vite ou Turbopack. Ils s’appuient sur des modules bundlers modernes (Rollup) ou des compilateurs JS plus performants que Babel comme sbuild et SWC qui sont écrits en Go et en Rust.

Si j’utilise React sur un projet CSR, qui mobilise plusieurs devs, ou qui nécessite du SSR, j’utilise Next.js ou Remix. Ces frameworks disposent d’une ample documentation, de conventions et de guides pour développer efficacement des applications web modernes.

Merci d’avoir lu jusqu’ici.

Au plaisir d’échanger en commentaire, sur Twitter ou sur Trusty (on recrute chez ekino !).

Est-ce la fin de Create React App ? was originally published in ekino-france on Medium, where people are continuing the conversation by highlighting and responding to this story.