Composants spécifiques à la plateforme

Oublier le HTML : Les briques de base de React Native

Comme nous l'avons vu, la différence la plus marquante entre React pour le web (React DOM) et React Native réside dans les éléments utilisés pour construire l'interface utilisateur. Oubliez les balises HTML comme

Présentation des composants fondamentaux (Core Components)

Voici quelques-uns des composants React Native les plus couramment utilisés :

• : Le bloc de construction le plus fondamental pour l'interface utilisateur. Il peut être considéré comme l'équivalent d'un
  sur le web. C'est un conteneur qui supporte la mise en page avec Flexbox, le styling, et peut contenir d'autres composants. Il ne peut pas afficher de texte directement.
• : Indispensable pour afficher n'importe quelle chaîne de caractères. Tout texte dans une application React Native doit être enveloppé dans un composant . Il supporte également l'imbrication pour hériter des styles de texte.
• : Utilisé pour afficher des images, qu'elles proviennent de ressources locales (dans le projet) ou d'une URL réseau. Il possède des props pour contrôler la source (`source`), le redimensionnement (`resizeMode`), et le style.
• : Permet à l'utilisateur de saisir du texte. C'est l'équivalent d'un ou </code>. Il fournit des props pour gérer la valeur (`value`), réagir aux changements (`onChangeText`), configurer le type de clavier (`keyboardType`), etc.</li><li><b><code><ScrollView></code> :</b> Un conteneur générique qui permet de faire défiler son contenu si celui-ci dépasse la taille de l'écran. Utile pour des listes de contenu de longueur variable mais pas excessivement longues.</li><li><b><code><FlatList></code> / <code><SectionList></code> :</b> Des composants optimisés pour afficher de longues listes de données déroulantes de manière performante. Ils ne rendent que les éléments visibles à l'écran (et quelques autres en prévision), évitant ainsi les problèmes de mémoire et de performance rencontrés avec le rendu de milliers d'éléments dans un <code><ScrollView></code>. <code>FlatList</code> est pour les listes simples, <code>SectionList</code> pour les listes groupées par sections.</li><li><b><code><Button></code> :</b> Un composant bouton basique qui rend un bouton natif standard sur iOS et Android avec un look and feel spécifique à la plateforme. Il est simple à utiliser mais offre peu d'options de personnalisation.</li><li><b>Composants tactiles (<code><Pressable></code>, <code><TouchableOpacity></code>, <code><TouchableHighlight></code>) :</b> Pour des interactions tactiles plus personnalisables que <code><Button></code>. Ils permettent d'envelopper n'importe quelle <code><View></code> (ou autre composant) pour la rendre cliquable/pressable, en fournissant un retour visuel configurable (opacité, surbrillance, ou aucun). <code><Pressable></code> est le plus récent et le plus flexible, souvent recommandé pour les nouveaux développements.</li><li><b><code><StyleSheet></code> :</b> Bien que ce ne soit pas un composant UI visible, c'est une API essentielle utilisée pour créer des objets de style de manière optimisée, comme vu dans la section sur le styling.</li></ul></section><section><h2 id="section-le-lien-avec-les-widgets-natifs">Le lien avec les widgets natifs</h2><p>Il est important de réitérer que l'utilisation de ces composants React Native ne signifie pas que vous créez une imitation de l'interface native en JavaScript. Au contraire, le framework React Native fait le pont (via le "Bridge" ou la JSI) pour que ces composants React se traduisent par l'instanciation et la manipulation des <b>véritables widgets UI natifs</b> de la plateforme sous-jacente.</p><p>Un <code><TextInput></code> devient un <code>UITextField</code> sur iOS et un <code>EditText</code> sur Android. Un <code><Switch></code> devient un <code>UISwitch</code> ou un <code>SwitchCompat</code>. Cela garantit que votre application non seulement ressemble à une application native, mais qu'elle se comporte aussi comme telle en termes de performance, d'accessibilité et d'interactions.</p></section><section><h2 id="section-gerer-les-specificites-des-plateformes">Gérer les spécificités des plateformes</h2><p>Si la plupart des composants de base fonctionnent de manière similaire sur iOS et Android, il existe des cas où :</p><ul><li>Un composant ou une API n'existe que sur une plateforme (ex: <code>DatePickerIOS</code>, <code>PermissionsAndroid</code>).</li><li>Le rendu ou le comportement par défaut d'un composant diffère suffisamment pour nécessiter une adaptation (ex: l'ombre portée via les styles, le comportement de la barre de statut).</li><li>Vous souhaitez utiliser un design ou une convention spécifique à une plateforme.</li></ul><p>React Native fournit plusieurs mécanismes pour gérer ces différences :</p><ul><li><b>Le module `Platform` :</b> Il expose une propriété `Platform.OS` (`'ios'` ou `'android'`) et une méthode `Platform.select({ ios: ..., android: ... })` pour appliquer des styles ou choisir des composants différents en fonction de la plateforme.</li><li><b>Extensions de fichiers spécifiques :</b> Vous pouvez créer des fichiers avec les extensions `.ios.js` (ou `.tsx`) et `.android.js` (ou `.tsx`). React Native chargera automatiquement le fichier correspondant à la plateforme sur laquelle l'application s'exécute. C'est utile pour implémenter des composants entiers de manière différente.</li><li><b>Modules natifs :</b> Pour des besoins très spécifiques, vous pouvez écrire ou utiliser des modules natifs qui exposent des fonctionnalités spécifiques à chaque plateforme.</li></ul><p>Un composant souvent utilisé pour gérer les différences de layout liées aux encoches ou aux barres système est <code><SafeAreaView></code>, qui assure que le contenu est rendu dans la zone "sûre" de l'écran, principalement pertinent pour iOS.</p></section><section><h2 id="section-conclusion-les-nouveaux-outils-de-votre-boite-a-outils-ui">Conclusion : Les nouveaux outils de votre boîte à outils UI</h2><p>Construire des interfaces avec React Native implique d'apprendre et d'utiliser ce nouvel ensemble de composants fondamentaux. Chacun a son rôle spécifique et se traduit en éléments natifs performants.</p><p>En maîtrisant ces composants de base comme <code><View></code>, <code><Text></code>, <code><Image></code>, <code><TextInput></code>, et les composants de liste et tactiles, vous disposez des outils nécessaires pour commencer à assembler des écrans d'applications mobiles natives robustes et esthétiques, tout en exploitant la puissance et la familiarité de l'écosystème React.</p></section><div id="quizz"></div><p id="pagination"><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/differences-cles-avec-react-pour-le-web" title="React Native vs React DOM : Comprendre les différences clés" rel="prev">◄ Précédent</a> <a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utiliser-typescript-avec-react" title="Intégrer TypeScript dans vos projets React pour plus de robustesse" rel="next">Suivant ►</a></p></div></div><input type="checkbox" id="rightSidebarToggle" class="rightSidebarToggle toggle"><label for="rightSidebarToggle" id="rightSidebarToggleButton" class="toggleBtn">く</label><nav id="summary" class="rightSidebar" aria-label="Table des matières" itemscope itemtype="http://schema.org/SiteNavigationElement"><h2>Table des matières</h2><meta itemprop="description" content="Table des matières pour React.js : Le guide de référence"> <ol class="summary"><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/les-fondamentaux-de-react" itemprop="url" title="Les Fondamentaux de React"><span itemprop="name">Les Fondamentaux de React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-react-js" itemprop="url" title="Introduction à React.js"><span itemprop="name">Introduction à React.js</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/qu-est-ce-que-react-bibliotheque-vs-framework" itemprop="url" title="Qu'est-ce que React ? (Bibliothèque vs framework)"><span itemprop="name">Qu'est-ce que React ? (Bibliothèque vs framework)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/philosophie-et-avantages-de-react-declaratif-base-sur-les-composants-apprendre-une-fois-ecrire-partout" itemprop="url" title="Philosophie et avantages de React (Déclaratif, basé sur les composants, apprendre une fois, écrire partout)"><span itemprop="name">Philosophie et avantages de React (Déclaratif, basé sur les composants, apprendre une fois, écrire partout)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-dom-virtuel-virtual-dom-concept-et-fonctionnement" itemprop="url" title="Le DOM virtuel (Virtual DOM) : Concept et fonctionnement"><span itemprop="name">Le DOM virtuel (Virtual DOM) : Concept et fonctionnement</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-vs-autres-frameworks-bibliotheques-angular-vue-js-svelte" itemprop="url" title="React vs autres frameworks/bibliothèques (Angular, Vue.js, Svelte)"><span itemprop="name">React vs autres frameworks/bibliothèques (Angular, Vue.js, Svelte)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/l-ecosysteme-react-react-native-next-js-gatsby-etc" itemprop="url" title="L'écosystème React (React Native, Next.js, Gatsby, etc.)"><span itemprop="name">L'écosystème React (React Native, Next.js, Gatsby, etc.)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-en-place-de-l-environnement-de-developpement" itemprop="url" title="Mise en place de l'environnement de développement"><span itemprop="name">Mise en place de l'environnement de développement</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/prerequis-logiciels-node-js-npm-yarn" itemprop="url" title="Prérequis logiciels (Node.js, npm/yarn)"><span itemprop="name">Prérequis logiciels (Node.js, npm/yarn)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/creation-d-un-projet-react-avec-create-react-app-cra" itemprop="url" title="Création d'un projet React avec Create React App (CRA)"><span itemprop="name">Création d'un projet React avec Create React App (CRA)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/structure-d-un-projet-react-typique" itemprop="url" title="Structure d'un projet React typique"><span itemprop="name">Structure d'un projet React typique</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/lancement-du-serveur-de-developpement-et-outils-de-base-devtools" itemprop="url" title="Lancement du serveur de développement et outils de base (DevTools)"><span itemprop="name">Lancement du serveur de développement et outils de base (DevTools)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/alternatives-a-cra-vite-next-js-configuration-manuelle-avec-webpack-babel-apercu" itemprop="url" title="Alternatives à CRA (Vite, Next.js, configuration manuelle avec Webpack/Babel - Aperçu)"><span itemprop="name">Alternatives à CRA (Vite, Next.js, configuration manuelle avec Webpack/Babel - Aperçu)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/jsx-syntaxe-javascript-etendue" itemprop="url" title="JSX - Syntaxe JavaScript étendue"><span itemprop="name">JSX - Syntaxe JavaScript étendue</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-jsx-pourquoi-et-comment" itemprop="url" title="Introduction à JSX : Pourquoi et comment ?"><span itemprop="name">Introduction à JSX : Pourquoi et comment ?</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/regles-de-base-de-jsx-element-racine-unique-fermeture-des-balises" itemprop="url" title="Règles de base de JSX (Elément racine unique, fermeture des balises)"><span itemprop="name">Règles de base de JSX (Elément racine unique, fermeture des balises)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/integration-d-expressions-javascript-dans-jsx" itemprop="url" title="Intégration d'expressions JavaScript dans JSX (`{}`)"><span itemprop="name">Intégration d'expressions JavaScript dans JSX (`{}`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/attributs-jsx-classname-htmlfor-style-etc" itemprop="url" title="Attributs JSX (className, htmlFor, style, etc.)"><span itemprop="name">Attributs JSX (className, htmlFor, style, etc.)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/jsx-et-la-prevention-des-injections-xss" itemprop="url" title="JSX et la prévention des injections (XSS)"><span itemprop="name">JSX et la prévention des injections (XSS)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/commentaires-en-jsx" itemprop="url" title="Commentaires en JSX"><span itemprop="name">Commentaires en JSX</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/fragments" itemprop="url" title="Fragments"><span itemprop="name">Fragments</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/les-composants-react-blocs-de-construction-fondamentaux" itemprop="url" title="Les composants React : Blocs de construction fondamentaux"><span itemprop="name">Les composants React : Blocs de construction fondamentaux</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-fonctionnels-function-components-approche-moderne-et-privilegiee" itemprop="url" title="Composants fonctionnels (Function Components) - Approche moderne et privilégiée"><span itemprop="name">Composants fonctionnels (Function Components) - Approche moderne et privilégiée</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-classe-class-components-comprendre-l-heritage-pour-maintenance-lecture" itemprop="url" title="Composants classe (Class Components) - Comprendre l'héritage (pour maintenance/lecture)"><span itemprop="name">Composants classe (Class Components) - Comprendre l'héritage (pour maintenance/lecture)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendu-des-composants" itemprop="url" title="Rendu des composants"><span itemprop="name">Rendu des composants</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composition-de-composants-imbrication" itemprop="url" title="Composition de composants (imbrication)"><span itemprop="name">Composition de composants (imbrication)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/modules-javascript-import-export-pour-les-composants" itemprop="url" title="Modules JavaScript (import/export) pour les composants"><span itemprop="name">Modules JavaScript (import/export) pour les composants</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/props-passage-de-donnees-aux-composants" itemprop="url" title="Props - Passage de données aux composants"><span itemprop="name">Props - Passage de données aux composants</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-props-proprietes" itemprop="url" title="Introduction aux props (Propriétés)"><span itemprop="name">Introduction aux props (Propriétés)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/passer-des-props-d-un-parent-a-un-enfant" itemprop="url" title="Passer des props d'un parent à un enfant"><span itemprop="name">Passer des props d'un parent à un enfant</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/lecture-des-props-dans-les-composants-fonctionnels-et-classe" itemprop="url" title="Lecture des props dans les composants fonctionnels et classe"><span itemprop="name">Lecture des props dans les composants fonctionnels et classe</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/props-children-passer-des-elements-enfants" itemprop="url" title="`props.children` : Passer des éléments enfants"><span itemprop="name">`props.children` : Passer des éléments enfants</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/props-par-defaut-default-props" itemprop="url" title="Props par défaut (Default Props)"><span itemprop="name">Props par défaut (Default Props)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/proptypes-validation-des-types-de-props-importance-et-utilisation" itemprop="url" title="PropTypes : Validation des types de props (Importance et utilisation)"><span itemprop="name">PropTypes : Validation des types de props (Importance et utilisation)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/destructuration-des-props" itemprop="url" title="Déstructuration des props"><span itemprop="name">Déstructuration des props</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/state-gestion-de-l-etat-local-d-un-composant" itemprop="url" title="State - Gestion de l'état local d'un composant"><span itemprop="name">State - Gestion de l'état local d'un composant</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-au-concept-d-etat-state" itemprop="url" title="Introduction au concept d'état (State)"><span itemprop="name">Introduction au concept d'état (State)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-hook-usestate-introduction-et-utilisation" itemprop="url" title="Le hook `useState` : Introduction et utilisation"><span itemprop="name">Le hook `useState` : Introduction et utilisation</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/declaration-d-une-variable-d-etat" itemprop="url" title="Déclaration d'une variable d'état"><span itemprop="name">Déclaration d'une variable d'état</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/lecture-de-l-etat" itemprop="url" title="Lecture de l'état"><span itemprop="name">Lecture de l'état</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-a-jour-de-l-etat-fonction-de-mise-a-jour" itemprop="url" title="Mise à jour de l'état (Fonction de mise à jour)"><span itemprop="name">Mise à jour de l'état (Fonction de mise à jour)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-a-jour-basee-sur-l-etat-precedent" itemprop="url" title="Mise à jour basée sur l'état précédent"><span itemprop="name">Mise à jour basée sur l'état précédent</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/l-etat-dans-les-composants-classe-this-state-this-setstate-comparaison" itemprop="url" title="L'état dans les composants classe (`this.state`, `this.setState`) - Comparaison"><span itemprop="name">L'état dans les composants classe (`this.state`, `this.setState`) - Comparaison</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/quand-utiliser-le-state-vs-les-props" itemprop="url" title="Quand utiliser le state vs les props ?"><span itemprop="name">Quand utiliser le state vs les props ?</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/lifting-state-up-remonter-l-etat-partage-d-etat-entre-composants" itemprop="url" title="Lifting state up (Remonter l'état) : Partage d'état entre composants"><span itemprop="name">Lifting state up (Remonter l'état) : Partage d'état entre composants</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-evenements" itemprop="url" title="Gestion des événements"><span itemprop="name">Gestion des événements</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/ecouteurs-d-evenements-en-jsx-onclick-onchange-onsubmit" itemprop="url" title="Ecouteurs d'événements en JSX (onClick, onChange, onSubmit...)"><span itemprop="name">Ecouteurs d'événements en JSX (onClick, onChange, onSubmit...)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestionnaires-d-evenements-event-handlers" itemprop="url" title="Gestionnaires d'événements (Event handlers)"><span itemprop="name">Gestionnaires d'événements (Event handlers)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/l-objet-evenement-synthetique-de-react" itemprop="url" title="L'objet événement synthétique de React"><span itemprop="name">L'objet événement synthétique de React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/passer-des-arguments-aux-gestionnaires-d-evenements" itemprop="url" title="Passer des arguments aux gestionnaires d'événements"><span itemprop="name">Passer des arguments aux gestionnaires d'événements</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/liaison-bind-et-fonctions-flechees-dans-les-composants-classe-contexte-this-pertinence-historique" itemprop="url" title="Liaison (`bind`) et fonctions fléchées dans les composants classe (Contexte `this`) - Pertinence historique"><span itemprop="name">Liaison (`bind`) et fonctions fléchées dans les composants classe (Contexte `this`) - Pertinence historique</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendu-conditionnel" itemprop="url" title="Rendu conditionnel"><span itemprop="name">Rendu conditionnel</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-des-instructions-if" itemprop="url" title="Utilisation des instructions `if`"><span itemprop="name">Utilisation des instructions `if`</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/operateur-ternaire-condition-expr1-expr2" itemprop="url" title="Opérateur ternaire (`condition ? expr1 : expr2`)"><span itemprop="name">Opérateur ternaire (`condition ? expr1 : expr2`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/operateur-logique-et-pour-le-rendu-conditionnel-court" itemprop="url" title="Opérateur logique ET (`&&`) pour le rendu conditionnel court"><span itemprop="name">Opérateur logique ET (`&&`) pour le rendu conditionnel court</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/renvoyer-null-pour-ne-rien-afficher" itemprop="url" title="Renvoyer `null` pour ne rien afficher"><span itemprop="name">Renvoyer `null` pour ne rien afficher</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/strategies-pour-des-conditions-multiples" itemprop="url" title="Stratégies pour des conditions multiples"><span itemprop="name">Stratégies pour des conditions multiples</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/listes-et-cles-keys" itemprop="url" title="Listes et clés (Keys)"><span itemprop="name">Listes et clés (Keys)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendu-de-listes-d-elements-methode-map" itemprop="url" title="Rendu de listes d'éléments (méthode `map()`)"><span itemprop="name">Rendu de listes d'éléments (méthode `map()`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/l-importance-des-key-props-identification-et-performance" itemprop="url" title="L'importance des `key` props : Identification et performance"><span itemprop="name">L'importance des `key` props : Identification et performance</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/choisir-une-bonne-key-stable-unique-et-predictible" itemprop="url" title="Choisir une bonne `key` (stable, unique et prédictible)"><span itemprop="name">Choisir une bonne `key` (stable, unique et prédictible)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pieges-courants-avec-les-cles-index-comme-cle" itemprop="url" title="Pièges courants avec les clés (index comme clé)"><span itemprop="name">Pièges courants avec les clés (index comme clé)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/formulaires" itemprop="url" title="Formulaires"><span itemprop="name">Formulaires</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-controles-controlled-components-liaison-etat-et-input" itemprop="url" title="Composants contrôlés (Controlled components) : Liaison état et input"><span itemprop="name">Composants contrôlés (Controlled components) : Liaison état et input</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-differents-types-d-inputs-text-textarea-select-checkbox-radio" itemprop="url" title="Gestion des différents types d'inputs (text, textarea, select, checkbox, radio)"><span itemprop="name">Gestion des différents types d'inputs (text, textarea, select, checkbox, radio)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-de-la-soumission-de-formulaire-onsubmit" itemprop="url" title="Gestion de la soumission de formulaire (`onSubmit`)"><span itemprop="name">Gestion de la soumission de formulaire (`onSubmit`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/validation-de-base-des-formulaires" itemprop="url" title="Validation de base des formulaires"><span itemprop="name">Validation de base des formulaires</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-non-controles-uncontrolled-components-et-useref-alternative" itemprop="url" title="Composants non contrôlés (Uncontrolled components) et `useRef` (Alternative)"><span itemprop="name">Composants non contrôlés (Uncontrolled components) et `useRef` (Alternative)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/bibliotheques-de-gestion-de-formulaires-react-hook-form-formik-apercu" itemprop="url" title="Bibliothèques de gestion de formulaires (React Hook Form, Formik - Aperçu)"><span itemprop="name">Bibliothèques de gestion de formulaires (React Hook Form, Formik - Aperçu)</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/maitrise-des-hooks" itemprop="url" title="Maîtrise des Hooks"><span itemprop="name">Maîtrise des Hooks</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usestate-revisite-et-cas-avances" itemprop="url" title="`useState` - Revisité et cas avancés"><span itemprop="name">`useState` - Revisité et cas avancés</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/initialisation-paresseuse-lazy-initial-state" itemprop="url" title="Initialisation paresseuse (Lazy initial state)"><span itemprop="name">Initialisation paresseuse (Lazy initial state)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mises-a-jour-fonctionnelles-pour-garantir-la-fraicheur-de-l-etat" itemprop="url" title="Mises à jour fonctionnelles pour garantir la fraîcheur de l'état"><span itemprop="name">Mises à jour fonctionnelles pour garantir la fraîcheur de l'état</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-d-objets-et-de-tableaux-dans-l-etat-immutabilite" itemprop="url" title="Gestion d'objets et de tableaux dans l'état (Immutabilité)"><span itemprop="name">Gestion d'objets et de tableaux dans l'état (Immutabilité)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useeffect-effets-de-bord" itemprop="url" title="`useEffect` - Effets de bord"><span itemprop="name">`useEffect` - Effets de bord</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-effets-de-bord-data-fetching-subscriptions-timers-mutations-manuelles-du-dom" itemprop="url" title="Introduction aux effets de bord (Data fetching, subscriptions, timers, mutations manuelles du DOM)"><span itemprop="name">Introduction aux effets de bord (Data fetching, subscriptions, timers, mutations manuelles du DOM)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-de-useeffect-pour-executer-du-code-apres-le-rendu" itemprop="url" title="Utilisation de `useEffect` pour exécuter du code après le rendu"><span itemprop="name">Utilisation de `useEffect` pour exécuter du code après le rendu</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-tableau-des-dependances-controler-l-execution-de-l-effet" itemprop="url" title="Le tableau des dépendances : Contrôler l'exécution de l'effet"><span itemprop="name">Le tableau des dépendances : Contrôler l'exécution de l'effet</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/fonction-de-nettoyage-cleanup-function-prevenir-les-fuites-memoire" itemprop="url" title="Fonction de nettoyage (Cleanup function) : Prévenir les fuites mémoire"><span itemprop="name">Fonction de nettoyage (Cleanup function) : Prévenir les fuites mémoire</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useeffect-sans-dependances-montage-demontage-et-mises-a-jour" itemprop="url" title="`useEffect` sans dépendances (montage/démontage et mises à jour)"><span itemprop="name">`useEffect` sans dépendances (montage/démontage et mises à jour)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useeffect-avec-dependances-vides-montage-uniquement" itemprop="url" title="`useEffect` avec dépendances vides (`[]`) (montage uniquement)"><span itemprop="name">`useEffect` avec dépendances vides (`[]`) (montage uniquement)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useeffect-avec-dependances-specifiques" itemprop="url" title="`useEffect` avec dépendances spécifiques"><span itemprop="name">`useEffect` avec dépendances spécifiques</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pieges-courants-avec-useeffect-dependances-manquantes-boucles-infinies" itemprop="url" title="Pièges courants avec `useEffect` (dépendances manquantes, boucles infinies)"><span itemprop="name">Pièges courants avec `useEffect` (dépendances manquantes, boucles infinies)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usecontext-partage-d-etat-global-simplifie" itemprop="url" title="`useContext` - Partage d'état global simplifié"><span itemprop="name">`useContext` - Partage d'état global simplifié</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-probleme-du-prop-drilling" itemprop="url" title="Le problème du "prop drilling""><span itemprop="name">Le problème du "prop drilling"</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-l-api-context-react-createcontext-provider-consumer" itemprop="url" title="Introduction à l'API Context (React.createContext, Provider, Consumer)"><span itemprop="name">Introduction à l'API Context (React.createContext, Provider, Consumer)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-hook-usecontext-consommer-le-contexte-facilement" itemprop="url" title="Le hook `useContext` : Consommer le contexte facilement"><span itemprop="name">Le hook `useContext` : Consommer le contexte facilement</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/structurer-les-providers" itemprop="url" title="Structurer les Providers"><span itemprop="name">Structurer les Providers</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mises-a-jour-du-contexte-et-optimisation-separation-des-contextes" itemprop="url" title="Mises à jour du contexte et optimisation (séparation des contextes)"><span itemprop="name">Mises à jour du contexte et optimisation (séparation des contextes)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/quand-utiliser-context-vs-state-local-vs-state-management-externe" itemprop="url" title="Quand utiliser Context vs state local vs state management externe ?"><span itemprop="name">Quand utiliser Context vs state local vs state management externe ?</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useref-acces-aux-elements-dom-et-valeurs-persistantes" itemprop="url" title="`useRef` - Accès aux éléments DOM et valeurs persistantes"><span itemprop="name">`useRef` - Accès aux éléments DOM et valeurs persistantes</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/acceder-aux-noeuds-du-dom-focus-mesures-integration-de-bibliotheques-tierces" itemprop="url" title="Accéder aux noeuds du DOM (focus, mesures, intégration de bibliothèques tierces)"><span itemprop="name">Accéder aux noeuds du DOM (focus, mesures, intégration de bibliothèques tierces)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/stocker-des-valeurs-mutables-persistantes-sans-causer-de-re-render" itemprop="url" title="Stocker des valeurs mutables persistantes sans causer de re-render"><span itemprop="name">Stocker des valeurs mutables persistantes sans causer de re-render</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/differences-entre-useref-et-le-state" itemprop="url" title="Différences entre `useRef` et le state"><span itemprop="name">Différences entre `useRef` et le state</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/forwardref-transmettre-des-refs-a-des-composants-enfants" itemprop="url" title="`forwardRef` : Transmettre des refs à des composants enfants"><span itemprop="name">`forwardRef` : Transmettre des refs à des composants enfants</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usereducer-gestion-d-etat-complexe" itemprop="url" title="`useReducer` - Gestion d'état complexe"><span itemprop="name">`useReducer` - Gestion d'état complexe</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/alternative-a-usestate-pour-une-logique-d-etat-plus-complexe" itemprop="url" title="Alternative à `useState` pour une logique d'état plus complexe"><span itemprop="name">Alternative à `useState` pour une logique d'état plus complexe</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/concept-de-reducer-inspire-de-redux" itemprop="url" title="Concept de reducer (inspiré de Redux)"><span itemprop="name">Concept de reducer (inspiré de Redux)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-en-place-de-usereducer-etat-initial-fonction-reducer-dispatch" itemprop="url" title="Mise en place de `useReducer` (état initial, fonction reducer, dispatch)"><span itemprop="name">Mise en place de `useReducer` (état initial, fonction reducer, dispatch)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/actions-et-payloads" itemprop="url" title="Actions et payloads"><span itemprop="name">Actions et payloads</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/avantages-par-rapport-a-usestate-logique-centralisee-testabilite-optimisation-des-dispatchs-via-context" itemprop="url" title="Avantages par rapport à `useState` (logique centralisée, testabilité, optimisation des dispatchs via Context)"><span itemprop="name">Avantages par rapport à `useState` (logique centralisée, testabilité, optimisation des dispatchs via Context)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/les-hooks-personnalises-custom-hooks" itemprop="url" title="Les hooks personnalisés (Custom Hooks)"><span itemprop="name">Les hooks personnalisés (Custom Hooks)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/motivation-reutiliser-la-logique-d-etat-et-d-effets" itemprop="url" title="Motivation : Réutiliser la logique d'état et d'effets"><span itemprop="name">Motivation : Réutiliser la logique d'état et d'effets</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/creation-d-un-custom-hook-regles-et-conventions-use" itemprop="url" title="Création d'un custom hook : Règles et conventions (`use...`)"><span itemprop="name">Création d'un custom hook : Règles et conventions (`use...`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/exemples-usefetch-uselocalstorage-usetoggle-useforminput" itemprop="url" title="Exemples : `useFetch`, `useLocalStorage`, `useToggle`, `useFormInput`"><span itemprop="name">Exemples : `useFetch`, `useLocalStorage`, `useToggle`, `useFormInput`</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/partage-de-logique-non-visuelle" itemprop="url" title="Partage de logique non visuelle"><span itemprop="name">Partage de logique non visuelle</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/regles-des-hooks-et-linters" itemprop="url" title="Règles des hooks et linters"><span itemprop="name">Règles des hooks et linters</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/les-deux-regles-fondamentales-des-hooks-appel-au-niveau-superieur-appel-depuis-fonctions-react" itemprop="url" title="Les deux règles fondamentales des hooks (Appel au niveau supérieur, appel depuis fonctions React)"><span itemprop="name">Les deux règles fondamentales des hooks (Appel au niveau supérieur, appel depuis fonctions React)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/plugin-eslint-pour-les-hooks-eslint-plugin-react-hooks" itemprop="url" title="Plugin ESLint pour les hooks (`eslint-plugin-react-hooks`)"><span itemprop="name">Plugin ESLint pour les hooks (`eslint-plugin-react-hooks`)</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/structuration-d-applications-et-interactions" itemprop="url" title="Structuration d'Applications et Interactions"><span itemprop="name">Structuration d'Applications et Interactions</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/styles-et-css-dans-react" itemprop="url" title="Styles et CSS dans React"><span itemprop="name">Styles et CSS dans React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/css-classique-classname-et-feuilles-de-style-globales-locales" itemprop="url" title="CSS classique (`className`) et feuilles de style globales/locales"><span itemprop="name">CSS classique (`className`) et feuilles de style globales/locales</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/css-modules-styles-scopes-localement" itemprop="url" title="CSS Modules : Styles scopés localement"><span itemprop="name">CSS Modules : Styles scopés localement</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/css-in-js-styled-components-emotion-principes-et-exemples" itemprop="url" title="CSS-in-JS : Styled Components, Emotion (Principes et exemples)"><span itemprop="name">CSS-in-JS : Styled Components, Emotion (Principes et exemples)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/frameworks-css-utility-first-tailwind-css-integration-et-avantages" itemprop="url" title="Frameworks CSS utility-first (Tailwind CSS) : Intégration et avantages"><span itemprop="name">Frameworks CSS utility-first (Tailwind CSS) : Intégration et avantages</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/styles-en-ligne-inline-styles-quand-et-comment" itemprop="url" title="Styles en ligne (Inline styles) : Quand et comment ?"><span itemprop="name">Styles en ligne (Inline styles) : Quand et comment ?</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-de-preprocesseurs-css-sass-scss-less" itemprop="url" title="Utilisation de préprocesseurs CSS (Sass/SCSS, Less)"><span itemprop="name">Utilisation de préprocesseurs CSS (Sass/SCSS, Less)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/routage-cote-client-avec-react-router" itemprop="url" title="Routage côté client avec React Router"><span itemprop="name">Routage côté client avec React Router</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-au-routage-spa-single-page-application" itemprop="url" title="Introduction au routage SPA (Single Page Application)"><span itemprop="name">Introduction au routage SPA (Single Page Application)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/installation-et-configuration-de-react-router-dom-browserrouter-routes-route" itemprop="url" title="Installation et configuration de React Router DOM (`BrowserRouter`, `Routes`, `Route`)"><span itemprop="name">Installation et configuration de React Router DOM (`BrowserRouter`, `Routes`, `Route`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/creation-de-liens-link-navlink" itemprop="url" title="Création de liens (`Link`, `NavLink`)"><span itemprop="name">Création de liens (`Link`, `NavLink`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/routes-dynamiques-et-parametres-d-url-useparams" itemprop="url" title="Routes dynamiques et paramètres d'URL (`useParams`)"><span itemprop="name">Routes dynamiques et paramètres d'URL (`useParams`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/routes-imbriquees-outlet" itemprop="url" title="Routes imbriquées (`Outlet`)"><span itemprop="name">Routes imbriquées (`Outlet`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/redirections-navigate" itemprop="url" title="Redirections (`Navigate`)"><span itemprop="name">Redirections (`Navigate`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/navigation-programmatique-usenavigate" itemprop="url" title="Navigation programmatique (`useNavigate`)"><span itemprop="name">Navigation programmatique (`useNavigate`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/routes-protegees-authentification" itemprop="url" title="Routes protégées (Authentification)"><span itemprop="name">Routes protégées (Authentification)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-du-not-found-404" itemprop="url" title="Gestion du "Not Found" (404)"><span itemprop="name">Gestion du "Not Found" (404)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/parametres-de-recherche-usesearchparams-et-etat-de-localisation-uselocation" itemprop="url" title="Paramètres de recherche (`useSearchParams`) et état de localisation (`useLocation`)"><span itemprop="name">Paramètres de recherche (`useSearchParams`) et état de localisation (`useLocation`)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-d-etat-globale-avancee" itemprop="url" title="Gestion d'état globale avancée"><span itemprop="name">Gestion d'état globale avancée</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/limites-de-usestate-et-usecontext-pour-les-grandes-applications" itemprop="url" title="Limites de `useState` et `useContext` pour les grandes applications"><span itemprop="name">Limites de `useState` et `useContext` pour les grandes applications</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-bibliotheques-de-gestion-d-etat-dediees" itemprop="url" title="Introduction aux bibliothèques de gestion d'état dédiées"><span itemprop="name">Introduction aux bibliothèques de gestion d'état dédiées</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/redux-concepts-cles-store-actions-reducers-dispatch-middleware-thunk-saga" itemprop="url" title="Redux : Concepts clés (Store, Actions, Reducers, Dispatch, Middleware - Thunk/Saga)"><span itemprop="name">Redux : Concepts clés (Store, Actions, Reducers, Dispatch, Middleware - Thunk/Saga)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-en-place-avec-react-redux-provider-useselector-usedispatch" itemprop="url" title="Mise en place avec React Redux (`Provider`, `useSelector`, `useDispatch`)"><span itemprop="name">Mise en place avec React Redux (`Provider`, `useSelector`, `useDispatch`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/redux-toolkit-l-approche-moderne-et-simplifiee" itemprop="url" title="Redux Toolkit : L'approche moderne et simplifiée"><span itemprop="name">Redux Toolkit : L'approche moderne et simplifiée</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/zustand-approche-minimaliste-basee-sur-les-hooks" itemprop="url" title="Zustand : Approche minimaliste basée sur les hooks"><span itemprop="name">Zustand : Approche minimaliste basée sur les hooks</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mobx-recoil-jotai-apercu-des-alternatives-et-de-leurs-philosophies" itemprop="url" title="MobX, Recoil, Jotai (Aperçu des alternatives et de leurs philosophies)"><span itemprop="name">MobX, Recoil, Jotai (Aperçu des alternatives et de leurs philosophies)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/choisir-la-bonne-strategie-de-gestion-d-etat-pour-votre-projet" itemprop="url" title="Choisir la bonne stratégie de gestion d'état pour votre projet"><span itemprop="name">Choisir la bonne stratégie de gestion d'état pour votre projet</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/communication-avec-les-api-data-fetching" itemprop="url" title="Communication avec les API (Data fetching)"><span itemprop="name">Communication avec les API (Data fetching)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-de-fetch-ou-axios-dans-useeffect" itemprop="url" title="Utilisation de `fetch` ou `axios` dans `useEffect`"><span itemprop="name">Utilisation de `fetch` ou `axios` dans `useEffect`</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-etats-de-chargement-loading-succes-success-et-erreur-error" itemprop="url" title="Gestion des états de chargement (Loading), succès (Success) et erreur (Error)"><span itemprop="name">Gestion des états de chargement (Loading), succès (Success) et erreur (Error)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/annulation-des-requetes-abortcontroller" itemprop="url" title="Annulation des requêtes (AbortController)"><span itemprop="name">Annulation des requêtes (AbortController)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/bibliotheques-dediees-au-data-fetching" itemprop="url" title="Bibliothèques dédiées au data fetching :"><span itemprop="name">Bibliothèques dédiées au data fetching :</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/swr-stale-while-revalidate" itemprop="url" title="SWR (Stale-While-Revalidate)"><span itemprop="name">SWR (Stale-While-Revalidate)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-query-tanstack-query-caching-synchronisation-mises-a-jour-en-arriere-plan" itemprop="url" title="React Query (TanStack Query) : Caching, synchronisation, mises à jour en arrière-plan"><span itemprop="name">React Query (TanStack Query) : Caching, synchronisation, mises à jour en arrière-plan</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-requetes-post-put-delete" itemprop="url" title="Gestion des requêtes POST, PUT, DELETE"><span itemprop="name">Gestion des requêtes POST, PUT, DELETE</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/authentification-et-en-tetes-headers" itemprop="url" title="Authentification et en-têtes (Headers)"><span itemprop="name">Authentification et en-têtes (Headers)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-erreurs-d-api" itemprop="url" title="Gestion des erreurs d'API"><span itemprop="name">Gestion des erreurs d'API</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/optimisation-et-patterns-avances" itemprop="url" title="Optimisation et Patterns Avancés"><span itemprop="name">Optimisation et Patterns Avancés</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/optimisation-des-performances-de-rendu" itemprop="url" title="Optimisation des performances de rendu"><span itemprop="name">Optimisation des performances de rendu</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/comprendre-le-processus-de-rendu-et-de-reconciliation-de-react" itemprop="url" title="Comprendre le processus de rendu et de réconciliation de React"><span itemprop="name">Comprendre le processus de rendu et de réconciliation de React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-de-profiling-react-react-devtools-profiler" itemprop="url" title="Outils de profiling React (React DevTools Profiler)"><span itemprop="name">Outils de profiling React (React DevTools Profiler)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-memo-memoisation-des-composants-fonctionnels" itemprop="url" title="`React.memo` : Mémoïsation des composants fonctionnels"><span itemprop="name">`React.memo` : Mémoïsation des composants fonctionnels</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usememo-memoisation-des-valeurs-calculees" itemprop="url" title="`useMemo` : Mémoïsation des valeurs calculées"><span itemprop="name">`useMemo` : Mémoïsation des valeurs calculées</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usecallback-memoisation-des-fonctions-callback" itemprop="url" title="`useCallback` : Mémoïsation des fonctions callback"><span itemprop="name">`useCallback` : Mémoïsation des fonctions callback</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/quand-et-comment-utiliser-memo-usememo-usecallback-eviter-l-optimisation-prematuree" itemprop="url" title="Quand et comment utiliser `memo`, `useMemo`, `useCallback` (Eviter l'optimisation prématurée)"><span itemprop="name">Quand et comment utiliser `memo`, `useMemo`, `useCallback` (Eviter l'optimisation prématurée)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/virtualisation-des-listes-longues-react-window-react-virtualized" itemprop="url" title="Virtualisation des listes longues (react-window, react-virtualized)"><span itemprop="name">Virtualisation des listes longues (react-window, react-virtualized)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/code-splitting-decoupage-du-code" itemprop="url" title="Code splitting (Découpage du code)"><span itemprop="name">Code splitting (Découpage du code)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pourquoi-decouper-son-code-reduire-la-taille-du-bundle-initial" itemprop="url" title="Pourquoi découper son code ? (Réduire la taille du bundle initial)"><span itemprop="name">Pourquoi découper son code ? (Réduire la taille du bundle initial)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-lazy-chargement-paresseux-des-composants" itemprop="url" title="`React.lazy` : Chargement paresseux des composants"><span itemprop="name">`React.lazy` : Chargement paresseux des composants</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/suspense-gerer-l-etat-de-chargement-des-composants-lazy" itemprop="url" title="`Suspense` : Gérer l'état de chargement des composants lazy"><span itemprop="name">`Suspense` : Gérer l'état de chargement des composants lazy</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/code-splitting-base-sur-les-routes" itemprop="url" title="Code splitting basé sur les routes"><span itemprop="name">Code splitting basé sur les routes</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-erreurs-error-boundaries" itemprop="url" title="Gestion des erreurs (Error Boundaries)"><span itemprop="name">Gestion des erreurs (Error Boundaries)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-error-boundaries-composants-classe-uniquement-pour-la-capture" itemprop="url" title="Introduction aux Error Boundaries (Composants classe uniquement pour la capture)"><span itemprop="name">Introduction aux Error Boundaries (Composants classe uniquement pour la capture)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/implementation-d-un-error-boundary-componentdidcatch-getderivedstatefromerror" itemprop="url" title="Implémentation d'un Error Boundary (`componentDidCatch`, `getDerivedStateFromError`)"><span itemprop="name">Implémentation d'un Error Boundary (`componentDidCatch`, `getDerivedStateFromError`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/placement-strategique-des-error-boundaries" itemprop="url" title="Placement stratégique des Error Boundaries"><span itemprop="name">Placement stratégique des Error Boundaries</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-avec-des-bibliotheques-ex-react-error-boundary-pour-une-approche-hooks-friendly" itemprop="url" title="Utilisation avec des bibliothèques (ex: `react-error-boundary`) pour une approche Hooks-friendly"><span itemprop="name">Utilisation avec des bibliothèques (ex: `react-error-boundary`) pour une approche Hooks-friendly</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/accessibilite-a11y" itemprop="url" title="Accessibilité (a11y)"><span itemprop="name">Accessibilité (a11y)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/importance-de-l-accessibilite-web" itemprop="url" title="Importance de l'accessibilité web"><span itemprop="name">Importance de l'accessibilité web</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/attributs-aria-et-html-semantique-dans-react" itemprop="url" title="Attributs ARIA et HTML sémantique dans React"><span itemprop="name">Attributs ARIA et HTML sémantique dans React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-du-focus" itemprop="url" title="Gestion du focus"><span itemprop="name">Gestion du focus</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-de-test-d-accessibilite-axe-lighthouse" itemprop="url" title="Outils de test d'accessibilité (axe, Lighthouse)"><span itemprop="name">Outils de test d'accessibilité (axe, Lighthouse)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/bonnes-pratiques-pour-les-formulaires-modales-etc" itemprop="url" title="Bonnes pratiques pour les formulaires, modales, etc."><span itemprop="name">Bonnes pratiques pour les formulaires, modales, etc.</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/portails-portals" itemprop="url" title="Portails (Portals)"><span itemprop="name">Portails (Portals)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendre-des-composants-en-dehors-de-leur-hierarchie-dom-parente" itemprop="url" title="Rendre des composants en dehors de leur hiérarchie DOM parente"><span itemprop="name">Rendre des composants en dehors de leur hiérarchie DOM parente</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/cas-d-usage-modales-tooltips-popovers" itemprop="url" title="Cas d'usage : Modales, tooltips, popovers"><span itemprop="name">Cas d'usage : Modales, tooltips, popovers</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/creation-et-utilisation-de-portails-reactdom-createportal" itemprop="url" title="Création et utilisation de portails (`ReactDOM.createPortal`)"><span itemprop="name">Création et utilisation de portails (`ReactDOM.createPortal`)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/patterns-de-composition-avances" itemprop="url" title="Patterns de composition avancés"><span itemprop="name">Patterns de composition avancés</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/higher-order-components-hocs-comprendre-le-pattern-moins-courant-avec-les-hooks" itemprop="url" title="Higher-Order Components (HOCs) - Comprendre le pattern (moins courant avec les hooks)"><span itemprop="name">Higher-Order Components (HOCs) - Comprendre le pattern (moins courant avec les hooks)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/render-props-comprendre-le-pattern-moins-courant-avec-les-hooks" itemprop="url" title="Render Props - Comprendre le pattern (moins courant avec les hooks)"><span itemprop="name">Render Props - Comprendre le pattern (moins courant avec les hooks)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/compound-components-composants-composes-api-flexible-et-expressive" itemprop="url" title="Compound Components (Composants composés) : API flexible et expressive"><span itemprop="name">Compound Components (Composants composés) : API flexible et expressive</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/provider-pattern-via-context-api" itemprop="url" title="Provider Pattern (via Context API)"><span itemprop="name">Provider Pattern (via Context API)</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-et-qualite-du-code" itemprop="url" title="Tests et Qualité du Code"><span itemprop="name">Tests et Qualité du Code</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-tests-dans-react" itemprop="url" title="Introduction aux tests dans React"><span itemprop="name">Introduction aux tests dans React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pourquoi-tester-types-de-tests-unitaire-integration-end-to-end" itemprop="url" title="Pourquoi tester ? Types de tests (Unitaire, intégration, end-to-end)"><span itemprop="name">Pourquoi tester ? Types de tests (Unitaire, intégration, end-to-end)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pyramide-des-tests" itemprop="url" title="Pyramide des tests"><span itemprop="name">Pyramide des tests</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-courants-jest-test-runner-react-testing-library-philosophie-et-utilisation" itemprop="url" title="Outils courants : Jest (Test runner), React Testing Library (Philosophie et utilisation)"><span itemprop="name">Outils courants : Jest (Test runner), React Testing Library (Philosophie et utilisation)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-unitaires-et-d-integration-avec-jest-et-react-testing-library-rtl" itemprop="url" title="Tests unitaires et d'intégration avec Jest et React Testing Library (RTL)"><span itemprop="name">Tests unitaires et d'intégration avec Jest et React Testing Library (RTL)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/configuration-de-l-environnement-de-test" itemprop="url" title="Configuration de l'environnement de test"><span itemprop="name">Configuration de l'environnement de test</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/philosophie-de-rtl-tester-comme-un-utilisateur" itemprop="url" title="Philosophie de RTL : Tester comme un utilisateur"><span itemprop="name">Philosophie de RTL : Tester comme un utilisateur</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendu-de-composants-render" itemprop="url" title="Rendu de composants (`render`)"><span itemprop="name">Rendu de composants (`render`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/requetes-de-selection-queries-getby-findby-queryby" itemprop="url" title="Requêtes de sélection (Queries : getBy, findBy, queryBy...)"><span itemprop="name">Requêtes de sélection (Queries : getBy, findBy, queryBy...)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/simulation-d-evenements-utilisateur-user-event" itemprop="url" title="Simulation d'événements utilisateur (`user-event`)"><span itemprop="name">Simulation d'événements utilisateur (`user-event`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/assertions-avec-jest-expect" itemprop="url" title="Assertions avec Jest (`expect`)"><span itemprop="name">Assertions avec Jest (`expect`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-de-composants-simples-et-complexes" itemprop="url" title="Tests de composants simples et complexes"><span itemprop="name">Tests de composants simples et complexes</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-de-hooks-personnalises-renderhook" itemprop="url" title="Tests de hooks personnalisés (`renderHook`)"><span itemprop="name">Tests de hooks personnalisés (`renderHook`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mocking-de-modules-et-de-fonctions-appels-api-etc" itemprop="url" title="Mocking de modules et de fonctions (Appels API, etc.)"><span itemprop="name">Mocking de modules et de fonctions (Appels API, etc.)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-asynchrones" itemprop="url" title="Tests asynchrones"><span itemprop="name">Tests asynchrones</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-de-contexte-et-de-routage" itemprop="url" title="Tests de contexte et de routage"><span itemprop="name">Tests de contexte et de routage</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-end-to-end-e2e" itemprop="url" title="Tests end-to-end (E2E)"><span itemprop="name">Tests end-to-end (E2E)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-tests-e2e-simuler-le-parcours-utilisateur-complet" itemprop="url" title="Introduction aux tests E2E (Simuler le parcours utilisateur complet)"><span itemprop="name">Introduction aux tests E2E (Simuler le parcours utilisateur complet)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-populaires-cypress-playwright-apercu" itemprop="url" title="Outils populaires : Cypress, Playwright (Aperçu)"><span itemprop="name">Outils populaires : Cypress, Playwright (Aperçu)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/ecriture-de-scenarios-de-test-e2e-de-base" itemprop="url" title="Ecriture de scénarios de test E2E de base"><span itemprop="name">Ecriture de scénarios de test E2E de base</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/qualite-du-code-et-bonnes-pratiques" itemprop="url" title="Qualité du code et bonnes pratiques"><span itemprop="name">Qualité du code et bonnes pratiques</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/linting-avec-eslint-et-configuration-pour-react" itemprop="url" title="Linting avec ESLint et configuration pour React"><span itemprop="name">Linting avec ESLint et configuration pour React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/formatage-avec-prettier" itemprop="url" title="Formatage avec Prettier"><span itemprop="name">Formatage avec Prettier</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/conventions-de-nommage-et-structure-de-projet" itemprop="url" title="Conventions de nommage et structure de projet"><span itemprop="name">Conventions de nommage et structure de projet</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/ecrire-du-code-lisible-et-maintenable" itemprop="url" title="Ecrire du code lisible et maintenable"><span itemprop="name">Ecrire du code lisible et maintenable</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/revue-de-code-code-reviews" itemprop="url" title="Revue de code (Code reviews)"><span itemprop="name">Revue de code (Code reviews)</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/ecosysteme-et-outils-complementaires" itemprop="url" title="Ecosystème et outils complémentaires"><span itemprop="name">Ecosystème et outils complémentaires</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/frameworks-meta-bases-sur-react" itemprop="url" title="Frameworks meta basés sur React"><span itemprop="name">Frameworks meta basés sur React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/next-js-rendu-cote-serveur-ssr-generation-de-site-statique-ssg-routage-base-sur-les-fichiers-api-routes-optimisation-d-images" itemprop="url" title="Next.js : Rendu côté serveur (SSR), génération de site statique (SSG), routage basé sur les fichiers, API Routes, optimisation d'images..."><span itemprop="name">Next.js : Rendu côté serveur (SSR), génération de site statique (SSG), routage basé sur les fichiers, API Routes, optimisation d'images...</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/remix-focus-sur-les-fondamentaux-du-web-ssr-ssg-gestion-des-formulaires-routage-imbrique-puissant" itemprop="url" title="Remix : Focus sur les fondamentaux du web, SSR/SSG, gestion des formulaires, routage imbriqué puissant."><span itemprop="name">Remix : Focus sur les fondamentaux du web, SSR/SSG, gestion des formulaires, routage imbriqué puissant.</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gatsby-generateur-de-site-statique-puissant-focus-sur-la-performance-et-les-sources-de-donnees-via-graphql" itemprop="url" title="Gatsby : Générateur de site statique puissant (focus sur la performance et les sources de données via GraphQL)."><span itemprop="name">Gatsby : Générateur de site statique puissant (focus sur la performance et les sources de données via GraphQL).</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/quand-utiliser-un-framework-meta-vs-cra-vite" itemprop="url" title="Quand utiliser un framework meta vs CRA/Vite ?"><span itemprop="name">Quand utiliser un framework meta vs CRA/Vite ?</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-native-apercu" itemprop="url" title="React Native (Aperçu)"><span itemprop="name">React Native (Aperçu)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-react-native-creer-des-applications-mobiles-natives-avec-react" itemprop="url" title="Introduction à React Native : Créer des applications mobiles natives avec React"><span itemprop="name">Introduction à React Native : Créer des applications mobiles natives avec React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/differences-cles-avec-react-pour-le-web" itemprop="url" title="Différences clés avec React pour le web"><span itemprop="name">Différences clés avec React pour le web</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-specifiques-a-la-plateforme" itemprop="url" title="Composants spécifiques à la plateforme"><span itemprop="name">Composants spécifiques à la plateforme</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utiliser-typescript-avec-react" itemprop="url" title="Utiliser TypeScript avec React"><span itemprop="name">Utiliser TypeScript avec React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-typescript-et-ses-avantages-typage-statique" itemprop="url" title="Introduction à TypeScript et ses avantages (Typage statique)"><span itemprop="name">Introduction à TypeScript et ses avantages (Typage statique)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/configuration-d-un-projet-react-avec-typescript" itemprop="url" title="Configuration d'un projet React avec TypeScript"><span itemprop="name">Configuration d'un projet React avec TypeScript</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-les-composants-fonctionnels-react-fc-et-les-props-interface-type" itemprop="url" title="Typer les composants fonctionnels (`React.FC`) et les props (`interface`, `type`)"><span itemprop="name">Typer les composants fonctionnels (`React.FC`) et les props (`interface`, `type`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-le-state-usestate-type" itemprop="url" title="Typer le state (`useState<Type>`)"><span itemprop="name">Typer le state (`useState<Type>`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-les-evenements" itemprop="url" title="Typer les événements"><span itemprop="name">Typer les événements</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-les-refs-useref-type" itemprop="url" title="Typer les refs (`useRef<Type>`)"><span itemprop="name">Typer les refs (`useRef<Type>`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-le-context-createcontext-type" itemprop="url" title="Typer le Context (`createContext<Type>`)"><span itemprop="name">Typer le Context (`createContext<Type>`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-les-hooks-personnalises" itemprop="url" title="Typer les hooks personnalisés"><span itemprop="name">Typer les hooks personnalisés</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-de-types-provenant-de-bibliotheques-tierces-types" itemprop="url" title="Utilisation de types provenant de bibliothèques tierces (`@types/...`)"><span itemprop="name">Utilisation de types provenant de bibliothèques tierces (`@types/...`)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/server-components-concept" itemprop="url" title="Server Components (Concept)"><span itemprop="name">Server Components (Concept)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-react-server-components-rsc-principalement-via-next-js-remix" itemprop="url" title="Introduction aux React Server Components (RSC) - (Principalement via Next.js/Remix)"><span itemprop="name">Introduction aux React Server Components (RSC) - (Principalement via Next.js/Remix)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/differences-entre-server-components-et-client-components" itemprop="url" title="Différences entre Server Components et Client Components"><span itemprop="name">Différences entre Server Components et Client Components</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/avantages-reduction-du-bundle-js-client-acces-direct-au-backend" itemprop="url" title="Avantages (Réduction du bundle JS client, accès direct au backend)"><span itemprop="name">Avantages (Réduction du bundle JS client, accès direct au backend)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/modele-mental-et-utilisation" itemprop="url" title="Modèle mental et utilisation"><span itemprop="name">Modèle mental et utilisation</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-en-production-et-suivi" itemprop="url" title="Mise en Production et Suivi"><span itemprop="name">Mise en Production et Suivi</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/processus-de-build" itemprop="url" title="Processus de build"><span itemprop="name">Processus de build</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/comprendre-le-build-de-production-npm-run-build-yarn-build" itemprop="url" title="Comprendre le build de production (`npm run build` / `yarn build`)"><span itemprop="name">Comprendre le build de production (`npm run build` / `yarn build`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/optimisations-du-build-minification-bundling-tree-shaking" itemprop="url" title="Optimisations du build (Minification, bundling, tree shaking)"><span itemprop="name">Optimisations du build (Minification, bundling, tree shaking)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/variables-d-environnement-env" itemprop="url" title="Variables d'environnement (`.env`)"><span itemprop="name">Variables d'environnement (`.env`)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/strategies-de-deploiement" itemprop="url" title="Stratégies de déploiement"><span itemprop="name">Stratégies de déploiement</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/deploiement-sur-des-plateformes-statiques-netlify-vercel-github-pages" itemprop="url" title="Déploiement sur des plateformes statiques (Netlify, Vercel, GitHub Pages)"><span itemprop="name">Déploiement sur des plateformes statiques (Netlify, Vercel, GitHub Pages)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/deploiement-sur-des-serveurs-traditionnels-node-js-express-servant-le-build" itemprop="url" title="Déploiement sur des serveurs traditionnels (Node.js/Express servant le build)"><span itemprop="name">Déploiement sur des serveurs traditionnels (Node.js/Express servant le build)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/deploiement-dans-des-conteneurs-docker" itemprop="url" title="Déploiement dans des conteneurs (Docker)"><span itemprop="name">Déploiement dans des conteneurs (Docker)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/integration-continue-et-deploiement-continu-ci-cd-avec-github-actions-gitlab-ci-etc" itemprop="url" title="Intégration continue et déploiement continu (CI/CD) avec GitHub Actions, GitLab CI, etc."><span itemprop="name">Intégration continue et déploiement continu (CI/CD) avec GitHub Actions, GitLab CI, etc.</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/monitoring-et-debugging-en-production" itemprop="url" title="Monitoring et debugging en production"><span itemprop="name">Monitoring et debugging en production</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-de-suivi-d-erreurs-sentry-logrocket" itemprop="url" title="Outils de suivi d'erreurs (Sentry, LogRocket)"><span itemprop="name">Outils de suivi d'erreurs (Sentry, LogRocket)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/analyse-de-performance-web-vitals-lighthouse-ci" itemprop="url" title="Analyse de performance (Web Vitals, Lighthouse CI)"><span itemprop="name">Analyse de performance (Web Vitals, Lighthouse CI)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/techniques-de-debogage-avancees" itemprop="url" title="Techniques de débogage avancées"><span itemprop="name">Techniques de débogage avancées</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/projet-pratique-et-conclusion" itemprop="url" title="Projet Pratique et Conclusion"><span itemprop="name">Projet Pratique et Conclusion</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/projet-de-synthese" itemprop="url" title="Projet de synthèse"><span itemprop="name">Projet de synthèse</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/definition-du-projet-ex-application-e-commerce-tableau-de-bord-reseau-social-simple" itemprop="url" title="Définition du projet (Ex: Application e-commerce, tableau de bord, réseau social simple)"><span itemprop="name">Définition du projet (Ex: Application e-commerce, tableau de bord, réseau social simple)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/application-pratique-des-concepts-appris-tout-au-long-du-cours" itemprop="url" title="Application pratique des concepts appris tout au long du cours"><span itemprop="name">Application pratique des concepts appris tout au long du cours</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/phases-du-projet-planification-developpement-test-deploiement" itemprop="url" title="Phases du projet : Planification, développement, test, déploiement"><span itemprop="name">Phases du projet : Planification, développement, test, déploiement</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/conclusion-et-prochaines-etapes" itemprop="url" title="Conclusion et prochaines étapes"><span itemprop="name">Conclusion et prochaines étapes</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/resume-des-competences-acquises" itemprop="url" title="Résumé des compétences acquises"><span itemprop="name">Résumé des compétences acquises</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/comment-rester-a-jour-avec-l-ecosysteme-react-veille-technologique" itemprop="url" title="Comment rester à jour avec l'écosystème React (Veille technologique)"><span itemprop="name">Comment rester à jour avec l'écosystème React (Veille technologique)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pistes-pour-aller-plus-loin-graphql-websockets-micro-frontends-design-systems" itemprop="url" title="Pistes pour aller plus loin (GraphQL, WebSockets, micro-frontends, design systems)"><span itemprop="name">Pistes pour aller plus loin (GraphQL, WebSockets, micro-frontends, design systems)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/contribution-a-l-open-source" itemprop="url" title="Contribution à l'Open Source"><span itemprop="name">Contribution à l'Open Source</span></a></li></ol></li></ol></li> </ol></nav></main><footer id="footer" aria-labelledby="footer-heading"><div class="footer-main"><div><h2 id="footer-heading">Pied de page du site CertiQuizz</h2><p class="footer-logo"><img src="/favicon.svg" alt="Logo CertiQuizz" width="40" height="40"><span>ertiQuizz</span></p><p class="footer-description">Votre plateforme de microlearning :<br>1. Testez vos connaissances<br>2. Apprenez de nouvelles compétences<br>3. Excellez dans votre parcours</p><p><a href="/fr/quiz/classement/" title="Classement des membres">🏆 Classement des membres</a></p></div><nav class="footer-navigation" aria-label="Navigation secondaire"><h3>Navigation</h3><ul><li><a href="/fr/quiz-qcm-certification" title="A propos de CertiQuizz, la plateforme de microlearning">A propos</a></li><li><a href="/fr/faq" title="FAQ">FAQ</a></li><li><a href="/fr/contact" title="Contact">Contact</a></li></ul></nav><nav><h3>Légal</h3><ul><li><a href="/fr/mentions-legales" title="Mentions légales">Mentions légales</a></li><li><a href="/fr/politique-de-confidentialite" title="Politique de confidentilité">Politique de confidentilité</a></li><li><a href="/fr/cgu" title="Conditions Générales d'Utilisation">Conditions Générales d'Utilisation</a></li></ul></nav><nav><h3>Suivez-nous</h3><ul><li><a href="/fr/newsletter/" title="S'abonner à la newsletter">Newsletter</a></li></ul></nav></div><div class="footer-bottom"><p>© <span id="copyYear">2025</span> CertiQuizz. Tous droits réservés.</p><p>Conçu avec un objectif d'<a href="/fr/eco-responsabilite-et-performance" title="Eco-conception">éco-conception</a></p></div></footer><div id="overlayBody"></div><div id="overlay2Body"></div><script>/*<![CDATA[*/let loaded=false,f=()=>{loaded=true;let tag = _new("link");tag.rel = "stylesheet";tag.href = "/css/prism.css";_doc.head.appendChild(tag);tag = _new("script");tag.src = "/js/prism.js";tag.async = true;_doc.head.appendChild(tag);ajax({targetId: "quizz",url: "/fr/course/quizz,event",data: {courseId: 1831,name: "composants-specifiques-a-la-plateforme"},success: _event.onSuccess,error: _event.onError});initPageSummary("pageBody","pageSummary");activeMenu(window.location.pathname,"homeLink");initBreadcrumb();gtag("G-Y5V4QB3XL0")};document.getElementById("corejs").onload=f;window.addEventListener("load",()=>{!loaded&&f();});(async ()=>{const mb=document.getElementById("modeBtn"),dm="dark-mode",lm="light-mode",mk="mode",am=localStorage.getItem(mk),d=document.documentElement.classList;function cm(m1){const m2=m1!=dm?dm:lm,c=mb.children;d.add(m1);d.remove(m2);c[0].innerHTML=c[0].innerHTML.replace(m1,{[dm]:lm,[lm]:dm}[m1]);c[1].textContent={[dm]:"Clair",[lm]:"Sombre"}[m1];localStorage.setItem(mk,m1);}cm(am?am:dm);mb.addEventListener("click",(e)=>{e.preventDefault();cm(d.contains(dm)?lm:dm)});})();/*]]>*/</script></body></html>