Partager via

Vue d’ensemble de React

Qu’est-ce que React JS ?

React est une bibliothèque JavaScript open source permettant de créer des interfaces utilisateur front-end. Contrairement à d’autres bibliothèques JavaScript qui fournissent une infrastructure d’application complète, React se concentre uniquement sur la création de vues d’application par le biais d’unités encapsulées appelées composants qui conservent l’état et génèrent des éléments d’interface utilisateur. Vous pouvez placer un composant individuel sur une page web ou imbriquer des hiérarchies de composants pour créer une interface utilisateur complexe.

Les composants React sont généralement écrits en JavaScript et JSX (XML JavaScript), extension JavaScript qui ressemble beaucoup à HTML, mais qui dispose de certaines fonctionnalités de syntaxe qui facilitent la réalisation de tâches courantes, telles que l’inscription de gestionnaires d’événements pour les éléments d’interface utilisateur. Un composant React implémente la méthode de rendu , qui retourne le JSX représentant l’interface utilisateur du composant. Dans une application web, le code JSX retourné par le composant est converti en une syntaxe HTML compatible qui est affichée dans le navigateur.

Importante

En février 2025, l’équipe React a annoncé que créer une application React (CRA) a été déconseillée pour les nouvelles applications. L’équipe recommande que les applications existantes migrent vers une infrastructure telle que Next.js ou React Router ou migrent vers un outil de génération tel que Vite, Parcel ou RSBuild.

React fonctionne-t-il sur Windows ?

Oui. Windows prend en charge deux environnements différents pour le développement d’applications React :

Qu’est-ce que React vous permet de faire ?

Windows prend en charge un large éventail de scénarios pour les développeurs React, notamment :

  • Applications web basiques : si vous débutez avec React et que vous êtes principalement intéressé par l'apprentissage de la création d'une application web basique avec React, nous vous recommandons de créer une application React en utilisant les outils frontend vite sur Windows. Si vous envisagez de créer une application web qui sera déployée pour la production, vous pouvez envisager créer une application React à l'aide des outils front-end rapide sur Windows Subsystem for Linux (WSL), pour une meilleure vitesse de performances, la compatibilité des appels système et l'alignement entre votre environnement de développement local et votre environnement de déploiement (qui est souvent un serveur Linux).

  • Single-Page Apps (SPAs) : il s’agit de sites web qui interagissent avec l’utilisateur en réécritant dynamiquement la page web active avec de nouvelles données à partir d’un serveur, plutôt que le navigateur par défaut de chargement des nouvelles pages entières. Si vous souhaitez créer un site web SPA statique orienté contenu, nous vous recommandons d’installer Gatsby sur WSL. Si vous souhaitez créer un site web SPA rendu par serveur avec un serveur principal Node.js, nous vous recommandons d’installer Next.js sur WSL. (Bien que Next.js offre désormais également le service de fichiers statiques).

  • applications de bureau natives : React Native for Desktop + macOS vous permet de créer des applications de bureau natives avec JavaScript qui s’exécutent sur divers types de PC, ordinateurs portables, tablettes, Xbox et appareils Mixed Reality. Il prend en charge les sdk Windows et macOS SDK.

  • Applications mobiles natives : React Native est un moyen multiplateforme de créer des applications Android et iOS avec JavaScript qui s’affichent en code d’interface utilisateur de plateforme native. Il existe deux méthodes principales pour installer React Native : l’interface CLI Expo et l’interface CLI React Native. Il existe une bonne comparaison des deux sur StackOverflow. Expo a une application cliente pour les appareils mobiles iOS et Android permettant d’exécuter et de tester vos applications. Pour obtenir des instructions sur le développement d’une application Android à l’aide de Windows, React Native et de l’interface CLI Expo, consultez React Native pour le développement Android sur Windows.

Options d'installation

Il existe plusieurs façons d’installer React ainsi qu’une chaîne d’outils intégrée adaptée à votre scénario d’utilisation. Voici quelques-unes des méthodes les plus utilisées :

Outils React

Même si l’écriture d’un composant React simple dans un éditeur de texte brut est une bonne introduction à React, le code généré de cette façon est conséquent, difficile à gérer et à déployer et lent. Certaines tâches courantes doivent être effectuées par les applications de production. Ces tâches sont gérées par d’autres frameworks JavaScript que l’application prend comme dépendance. Il s’agit notamment des tâches suivantes :

  • Compilation : JSX est le langage couramment utilisé pour les applications React, mais les navigateurs ne peuvent pas traiter cette syntaxe directement. Au lieu de cela, le code doit être compilé en une syntaxe JavaScript standard et personnalisé pour les différents navigateurs. Babel est un exemple de compilateur qui prend en charge JSX.
  • Regroupement : étant donné que les performances sont essentielles pour les applications web modernes, il est important que le code JavaScript d’une application inclut uniquement le code nécessaire pour l’application et combiné en autant de fichiers que possible. Un bundler, tel que webpack , effectue cette tâche pour vous.
  • Gestion des packages : les gestionnaires de packages facilitent l’inclusion des fonctionnalités des packages tiers dans votre application, notamment la mise à jour et la gestion des dépendances. Les gestionnaires de packages couramment utilisés incluent Yarn et npm.

La suite combinée de frameworks qui vous aident à créer, générer et déployer votre application est appelée « chaîne d’outils ». Un environnement de développement facile à configurer pour React, utilisant cette chaîne d'outils, est Vite, qui génère pour vous une application monopage simple. La seule configuration requise pour utiliser Vite est Node.js.

Annuaire des composants React Native

Les composants qui peuvent être utilisés dans une application React Native sont les suivants :

  • Composants principaux : composants développés et pris en charge dans le cadre du framework React Native.
  • Composants de la communauté : composants développés et gérés par la communauté.
  • Composants natifs : composants que vous créez vous-même, en utilisant du code natif de la plateforme, et que vous inscrivez afin qu’ils soient accessibles à partir de React Native.

React Native Directory fournit une liste de bibliothèques de composants qui peuvent être filtrées par plateforme cible.

Options de chaîne d’outils React complètes

React, qui est une bibliothèque, et non un framework, peut avoir besoin d’outils supplémentaires pour créer une application plus complexe. En plus d’utiliser React, vous pouvez envisager d’utiliser :

  • Gestionnaire de package : deux gestionnaires de packages populaires pour React sont npm (inclus avec NodeJS) et yarn. Les deux prennent en charge une grande bibliothèque de packages bien gérés qui peuvent être installés.
  • Routeur React : collection de composants de navigation qui peuvent vous aider à utiliser des URL avec signet pour votre application web ou un moyen composable de naviguer dans React Native. React ne se concentre véritablement que sur la gestion de l’état et sur le rendu de cet état dans le DOM. Ainsi, la création d’applications React nécessite généralement l’utilisation d’une bibliothèque de routage telle que React Router.
  • Redux : conteneur d’état prévisible qui permet d’utiliser l’architecture de flux de données. Il est probable que vous n’en ayez besoin qu’à un stade de développement React plus avancé. Pour citer Dan Abramov, l’un des créateurs de Redux : « n’utilisez pas Redux tant que vous n’avez pas de problèmes avec React pur ».
  • Webpack : outil de génération qui vous permet de compiler des modules JavaScript, également appelés bundler de modules. Quand webpack traite votre application, il génère en interne un graphique de dépendances qui mappe chaque module dont votre projet a besoin et génère un ou plusieurs bundles.
  • Uglify : un analyseur JavaScript, un minifier, un compresseur et un ensemble d'outils de beautification.
  • Babel : compilateur JavaScript principalement utilisé pour convertir du code ECMAScript 2015+ en version rétrocompatible de JavaScript dans les navigateurs ou environnements actuels et anciens. Il peut également être utile d’utiliser babel-preset-env afin que vous n'ayez pas besoin de gérer en détail les transformations de syntaxe ou les polyfills de navigateur et que vous puissiez définir quels navigateurs Internet prendre en charge.
  • ESLint : outil permettant d’identifier et de créer des rapports sur les modèles trouvés dans votre code JavaScript qui vous aide à rendre votre code plus cohérent et à éviter les bogues.
  • Enzyme : utilitaire de test JavaScript pour React qui facilite le test de la sortie de vos composants React.
  • Jest : infrastructure de test qui fonctionne avec Babel pour faciliter l’écriture de tests JavaScript idiomatiques dans les applications React.
  • Mocha : Infrastructure de test qui s’exécute sur Node.js et dans le navigateur pour faciliter le test asynchrone, la création de rapports et le mappage d’exceptions non interceptée aux cas de test appropriés.

Cours et tutoriels sur React

Voici où vous pouvez étudier React et générer des exemples d’applications :

Ressources supplémentaires

  • Last updated on