Depuis que Create React App est déprécié, React recommande officiellement de démarrer avec un framework.
Une nouvelle façon de démarrer avec React : de Create React App vers les frameworks
Si vous voulez créer une nouvelle application ou un nouveau site web avec React, il est recommandé de commencer par un framework.
Si votre application a des contraintes qui ne sont pas bien couvertes par les frameworks existants, si vous préférez construire votre propre framework, ou si vous voulez simplement apprendre les bases d’une application React, vous pouvez créer une application React à partir de zéro.
Frameworks full stack
Ces frameworks recommandés prennent en charge toutes les fonctionnalités nécessaires pour déployer et faire évoluer une application en production. Ils intègrent les fonctionnalités React les plus récentes et tirent parti de l’architecture de React.
Les frameworks full stack ne nécessitent pas de serveur
Tous les frameworks de cette page prennent en charge le rendu côté client (CSR), les applications monopage (SPA) et la génération de sites statiques (SSG). Ces applications peuvent être déployées sans serveur sur un CDN ou un service d’hébergement statique. Ces frameworks permettent également d’ajouter du rendu côté serveur route par route lorsque cela correspond à votre cas d’usage.
Cela vous permet de commencer avec une application uniquement côté client, puis, si les besoins changent plus tard, de choisir d’utiliser des fonctionnalités serveur sur certaines routes sans avoir à réécrire l’application. Consultez la documentation du framework pour savoir comment configurer la stratégie de rendu.
Next.js (App Router)
L’App Router de Next.js est un framework React qui exploite pleinement l’architecture de React pour permettre de créer des applications React full stack.
npx create-next-app@latest
Next.js est maintenu par Vercel. Vous pouvez créer une application Next.js et la déployer sur un hébergement Node.js, serverless ou sur votre propre serveur. Next.js prend également en charge l’export statique, qui ne nécessite pas de serveur. Vercel propose aussi des services cloud payants sur option.
React Router (v7)
React Router est la bibliothèque de routage la plus populaire pour React et, utilisée avec Vite, elle permet de créer un framework React full stack. Elle met l’accent sur les Web API standard et propose des modèles de déploiement prêts à l’emploi pour différents runtimes et plateformes JavaScript.
Pour créer un nouveau framework React Router, utilisez la commande suivante.
npx create-react-router@latest
React Router est maintenu par Shopify.
Expo (pour les applications natives)
Expo est un framework React qui permet de créer des applications universelles pour Android, iOS et le web avec une UI native. Il fournit un SDK React Native qui facilite l’utilisation des parties natives. Pour créer un nouveau projet Expo, utilisez la commande suivante.
npx create-expo-app@latest
Si vous débutez avec Expo, consultez le tutoriel Expo.
Expo est maintenu par Expo (the company). Créer une application avec Expo est gratuit et vous pouvez la soumettre sans restriction aux stores Google ou Apple. Expo propose également des services cloud payants sur option.
Autres frameworks
D’autres frameworks émergents progressent aussi vers la vision full stack de React.
- TanStack Start (Beta) : TanStack Start est un framework React full stack basé sur TanStack Router. Il propose SSR document complet, streaming, fonctions serveur, bundling et de nombreux outils utiles, avec Nitro ou Vite.
- RedwoodJS : Redwood est un framework React full stack avec des packages et une configuration préintégrés pour faciliter la création d’applications web full stack.
Quelles fonctionnalités composent la vision de l’architecture full stack de l’équipe React ?
Le bundler App Router de Next.js implémente l’intégralité de la spécification officielle de React Server Components. Cela permet de mélanger, dans un seul arbre React, des composants de build time, des composants réservés au serveur et des composants interactifs.
Par exemple, vous pouvez écrire un composant React réservé au serveur comme une fonction async qui lit une base de données ou des fichiers. Vous pouvez ensuite transmettre les données à un composant interactif.
// Ce composant s’exécute *uniquement* sur le serveur (ou seulement pendant le build).
async function Talks({ confId }) {
// 1. Sur le serveur, vous pouvez communiquer avec la couche de données. Aucun endpoint API n’est nécessaire.
const talks = await db.Talks.findAll({ confId });
// 2. Même si vous ajoutez de la logique de rendu, cela n’augmente pas fortement la taille du bundle JavaScript.
const videos = talks.map(talk => talk.video);
// 3. Transmettez les données à un composant qui s’exécutera dans le navigateur.
return <SearchableVideoList videos={videos} />;
}
L’App Router de Next.js intègre Suspense et la récupération de données. Il vous permet de définir directement des états de chargement (par exemple des skeleton placeholders) pour différentes interfaces utilisateur dans l’arbre React.
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
Les composants serveur et Suspense sont des fonctionnalités de React, pas de Next.js. Cependant, les adopter au niveau du framework demande de l’implication et un travail d’implémentation non trivial. À l’heure actuelle, l’App Router de Next.js en est l’implémentation la plus complète. L’équipe React collabore avec les développeurs de bundlers pour rendre ces fonctionnalités plus faciles à implémenter dans la prochaine génération de frameworks.
Commencer à partir de zéro
Si votre application a des contraintes qui ne sont pas bien couvertes par les frameworks existants, si vous préférez construire votre propre framework, ou si vous voulez apprendre les bases d’une application React, il existe d’autres options pour démarrer un projet React à partir de zéro.
Commencer à partir de zéro offre davantage de flexibilité, mais vous devrez choisir les outils à utiliser pour le routage, la récupération des données et d’autres patterns d’usage courants. Cela revient un peu à construire votre propre framework au lieu d’en utiliser un déjà existant. Les frameworks que nous recommandons intègrent des solutions prêtes à l’emploi pour ces problèmes.
Pour construire votre propre solution, consultez le guide de création d’une application React à partir de zéro, qui vous aide à démarrer avec des outils de build comme Vite, Parcel ou RSbuild.
6 commentaires
React n’est rien de plus qu’une bibliothèque d’interface utilisateur basée sur des composants. Il est simple d’afficher des composants dans du HTML, mais il faut de nombreuses fonctionnalités pour créer un site web ou une application. C’est pourquoi nous recommandons un framework. Ce n’est pas propre à React : une grande partie du web moderne est construite à l’aide de frameworks web. De plus, React peut être utilisé non seulement avec des frameworks basés sur React, mais aussi avec des frameworks web écrits dans divers langages (par ex. Go, Rust, Java, etc.) ; au final, le choix revient toujours à l’utilisateur.
Je pense que, lorsqu’on ne sait pas dans quelles contraintes un développeur utilisera React, la documentation officielle devrait être rédigée dans un environnement aussi proche que possible du vanilla.
React peut tout à fait être utilisé avec des frameworks web développés dans divers langages (par ex. Go, Rust, Java, etc.), sans forcément passer par un framework basé sur React.
-> En réalité, c’est précisément pour cette raison qu’il me semble que, au moins pour la section « Get Started » de la documentation officielle de React, il serait préférable de guider les utilisateurs vers une utilisation de React avec le moins de dépendances possible, en se limitant à React lui-même.
Eh bien... comme je me suis moi-même mis récemment à apprendre React,
avec l’arrêt de CRA, mes supports d’apprentissage étaient basés sur CRA, donc je me suis demandé quoi faire et j’ai regardé du côté de Next, React Router, etc., mais ils ajoutent chacun leurs propres technologies, donc pour quelqu’un qui apprend React, je ne trouve pas ça très adapté... Personnellement, j’ai l’impression que Vite est malgré tout une meilleure option.
React recommande désormais officiellement de démarrer avec un framework -> même si le sujet arrive déjà très tard, je me demande si c’est vraiment pertinent que la documentation officielle de React recommande d’emblée de commencer avec un framework ou un outil de build spécifique.
Dans une base de code existante, il peut y avoir des cas où l’on ne peut pas utiliser ce framework ou cet outil de build, et le simple fait d’ajouter des dépendances peut aussi sembler pesant.
J’ai l’impression qu’on était plus sereins à l’époque où il suffisait d’insérer une bibliothèque dans du HTML avec une simple balise
scriptpour pouvoir utiliser directement ses fonctionnalités. Est-ce que je parle déjà d’un temps trop lointain...Je me demande aussi vraiment si c’est indispensable.