Construire une application React à partir de zéro

Si votre application a des contraintes mal servies 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 construire une application React à partir de zéro.

Étape 1 : Installer un outil de build

La première étape consiste à installer un outil de build commevite,parceloursbuild. Ces outils de build fournissent des fonctionnalités pour empaqueter et exécuter le code source, fournir un serveur de développement pour le développement local et une commande de build pour déployer votre application sur un serveur de production.

Vite

Viteest un outil de build qui vise à fournir une expérience de développement plus rapide et plus légère pour les projets web modernes.

npm create vite@latest my-app -- --template react-ts

Vite est opinionated et propose des valeurs par défaut raisonnables dès le départ. Vite possède un riche écosystème de plugins pour supporter le fast refresh, le JSX, Babel/SWC et d'autres fonctionnalités courantes. Voir leplugin Reactde Vite ou leplugin React SWCet leprojet exemple React SSRpour commencer.

Vite est déjà utilisé comme outil de build dans l'un de nosframeworks recommandés:React Router.

Parcel

Parcelcombine une excellente expérience de développement prête à l'emploi avec une architecture évolutive qui peut accompagner votre projet depuis ses débuts jusqu'à des applications de production massives.

npm install --save-dev parcel

Parcel supporte le fast refresh, le JSX, TypeScript, Flow et le style prêts à l'emploi. Voir larecette React de Parcelpour commencer.

Rsbuild

Rsbuildest un outil de build alimenté par Rspack qui fournit une expérience de développement transparente pour les applications React. Il propose des valeurs par défaut soigneusement ajustées et des optimisations de performances prêtes à l'emploi.

npx create-rsbuild --template react

Rsbuild inclut un support intégré pour les fonctionnalités React comme le fast refresh, le JSX, TypeScript et le style. Voir leguide React de Rsbuildpour commencer.

Étape 2 : Construire des modèles d'application courants

Les outils de build listés ci-dessus commencent avec une application monopage (SPA) uniquement côté client, mais n'incluent aucune solution supplémentaire pour des fonctionnalités courantes comme le routage, la récupération de données ou le style.

L'écosystème React inclut de nombreux outils pour ces problèmes. Nous en avons listé quelques-uns largement utilisés comme point de départ, mais n'hésitez pas à choisir d'autres outils s'ils vous conviennent mieux.

Routage

Le routage détermine quel contenu ou quelles pages afficher lorsqu'un utilisateur visite une URL particulière. Vous devez configurer un routeur pour mapper les URL aux différentes parties de votre application. Vous devrez également gérer les routes imbriquées, les paramètres de route et les paramètres de requête. Les routeurs peuvent être configurés dans votre code, ou définis en fonction de la structure de vos dossiers et fichiers de composants.

Les routeurs sont un élément central des applications modernes et sont généralement intégrés à la récupération de données (y compris la pré-récupération des données pour une page entière pour un chargement plus rapide), au découpage de code (pour minimiser la taille des bundles clients) et aux approches de rendu des pages (pour décider comment chaque page est générée).

Nous suggérons d'utiliser :

• React Router
• Tanstack Router

Récupération de données

Récupérer des données depuis un serveur ou une autre source est une partie essentielle de la plupart des applications. Pour le faire correctement, il faut gérer les états de chargement, les états d'erreur et mettre en cache les données récupérées, ce qui peut être complexe.

Les bibliothèques dédiées à la récupération de données font le travail difficile de récupérer et de mettre en cache les données pour vous, vous permettant de vous concentrer sur les données dont votre application a besoin et sur la manière de les afficher. Ces bibliothèques sont généralement utilisées directement dans vos composants, mais peuvent également être intégrées dans les chargeurs de routage pour un préchargement plus rapide et de meilleures performances, ainsi que dans le rendu côté serveur.

Notez que récupérer des données directement dans les composants peut entraîner des temps de chargement plus lents en raison de cascades de requêtes réseau, nous recommandons donc de précharger les données dans les chargeurs du routeur ou sur le serveur autant que possible ! Cela permet de récupérer toutes les données d'une page en une seule fois pendant son affichage.

Si vous récupérez des données depuis la plupart des backends ou des API de style REST, nous suggérons d'utiliser :

• TanStack Query
• SWR
• RTK Query

Si vous récupérez des données depuis une API GraphQL, nous suggérons d'utiliser :

• Apollo
• Relay

Découpage de code

Le découpage de code est le processus qui consiste à diviser votre application en paquets plus petits qui peuvent être chargés à la demande. La taille du code d'une application augmente avec chaque nouvelle fonctionnalité et dépendance supplémentaire. Les applications peuvent devenir lentes à charger car tout le code de l'application entière doit être envoyé avant de pouvoir être utilisé. La mise en cache, la réduction des fonctionnalités/dépendances et le déplacement d'une partie du code pour qu'il s'exécute sur le serveur peuvent aider à atténuer les lenteurs de chargement, mais ce sont des solutions incomplètes qui peuvent sacrifier des fonctionnalités si elles sont trop utilisées.

De même, si vous comptez sur les applications utilisant votre framework pour découper le code, vous pourriez rencontrer des situations où le chargement devient plus lent que si aucun découpage n'avait lieu. Par exemple,le chargement différéd'un graphique retarde l'envoi du code nécessaire pour le rendre, en séparant le code du graphique du reste de l'application.Parcel prend en charge le découpage de code avec React.lazy. Cependant, si le graphique charge ses donnéesaprèsson rendu initial, vous attendez maintenant deux fois. C'est une cascade : au lieu de récupérer les données pour le graphique et d'envoyer le code pour le rendre simultanément, vous devez attendre que chaque étape se termine l'une après l'autre.

Le découpage du code par route, lorsqu'il est intégré au bundling et à la récupération de données, peut réduire le temps de chargement initial de votre application et le temps nécessaire pour que le plus grand contenu visible de l'application soit rendu (Largest Contentful Paint).

Pour les instructions de découpage de code, consultez la documentation de votre outil de build :

• Optimisations de build Vite
• Découpage de code Parcel
• Découpage de code Rsbuild

Amélioration des performances de l'application

Puisque l'outil de build que vous sélectionnez ne prend en charge que les applications à page unique (SPA), vous devrez implémenter d'autresmodèles de renducomme le rendu côté serveur (SSR), la génération de site statique (SSG) et/ou les Composants Serveur React (RSC). Même si vous n'avez pas besoin de ces fonctionnalités au début, à l'avenir, certaines routes pourraient bénéficier du SSR, du SSG ou du RSC.

• Applications monopages (SPA)chargent une seule page HTML et mettent à jour la page dynamiquement au fur et à mesure que l'utilisateur interagit avec l'application. Les SPA sont plus faciles à démarrer, mais leur temps de chargement initial peut être plus lent. Les SPA sont l'architecture par défaut pour la plupart des outils de build.
• Rendu côté serveur en streaming (SSR)rend une page sur le serveur et envoie la page entièrement rendue au client. Le SSR peut améliorer les performances, mais il peut être plus complexe à configurer et à maintenir qu'une application monopage. Avec l'ajout du streaming, le SSR peut devenir très complexe à configurer et à maintenir. Voir leguide SSR de Vite.
• Génération de site statique (SSG)génère des fichiers HTML statiques pour votre application au moment du build. La SSG peut améliorer les performances, mais elle peut être plus complexe à configurer et à maintenir que le rendu côté serveur. Voir leguide SSG de Vite.
• Composants serveur React (RSC)vous permettent de mélanger des composants de build, des composants serveur uniquement et des composants interactifs dans un seul arbre React. Les RSC peuvent améliorer les performances, mais ils nécessitent actuellement une expertise approfondie pour être configurés et maintenus. Voir lesexemples RSC de Parcel.

Vos stratégies de rendu doivent s'intégrer à votre routeur afin que les applications construites avec votre framework puissent choisir la stratégie de rendu au niveau de chaque route. Cela permettra d'utiliser différentes stratégies de rendu sans avoir à réécrire toute votre application. Par exemple, la page d'accueil de votre application pourrait bénéficier d'une génération statique (SSG), tandis qu'une page avec un flux de contenu pourrait être plus performante avec un rendu côté serveur.

Utiliser la bonne stratégie de rendu pour les bonnes routes peut réduire le temps nécessaire au chargement du premier octet de contenu (Time to First Byte), au rendu du premier élément de contenu (First Contentful Paint) et au rendu du plus grand contenu visible de l'application (Largest Contentful Paint).

Et plus encore…

Ce ne sont là que quelques exemples des fonctionnalités qu'une nouvelle application devra prendre en compte lors d'une construction à partir de zéro. De nombreuses limitations que vous rencontrerez peuvent être difficiles à résoudre car chaque problème est interconnecté avec les autres et peut nécessiter une expertise approfondie dans des domaines que vous ne maîtrisez peut-être pas.

Si vous ne souhaitez pas résoudre ces problèmes par vous-même, vous pouvezdémarrer avec un frameworkqui fournit ces fonctionnalités prêtes à l'emploi.