Partager via

Vue d’ensemble de React

  • Article

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 un framework d’application complet, React se concentre uniquement sur la création de vues d’application par le biais d’unités encapsulées appelées composants qui gèrent 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 render, qui retourne le code 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.

Est-ce que React fonctionne 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 de base : si vous débutez avec React et que vous souhaitez essentiellement apprendre à créer une application web de base avec React, nous vous recommandons d’installer create-react-app directement sur Windows. Si vous envisagez de créer une application web destinée à être déployée en production, vous souhaiterez peut-être installer create-react-app sur le Sous-système Windows pour Linux (WSL), afin d’améliorer la vitesse des performances, la compatibilité des appels système et l’alignement entre votre environnement de développement local et l’environnement de déploiement (qui est souvent un serveur Linux).

  • Applications monopages(SPA) : il s’agit de sites web qui interagissent avec l’utilisateur en réécrivant de manière dynamique la page web actuelle avec de nouvelles données provenant d’un serveur, au lieu de recourir au comportement par défaut du navigateur, qui consiste à charger de nouvelles pages entières. Si vous souhaitez créer un site web SPA orienté contenu statique, nous vous recommandons d’installer Gatsby sur WSL. Si vous souhaitez créer un site web SPA rendu côté serveur avec un back-end Node.js, nous vous recommandons d’installer Next.js sur WSL. (Toutefois, Next.js offre désormais également des services 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 différents types de PC de bureau, ordinateurs portables, tablettes, Xbox et appareils de réalité mixte. Il prend en charge le SDK Windows et le SDK macOS.

  • Applications mobiles natives : React Native est un moyen multiplateforme de créer des applications Android et iOS avec JavaScript qui s’affichent dans le code de l’interface utilisateur de la plateforme native. Il existe deux méthodes principales pour installer React Native : l’interface CLI Expo et l’interface CLI React Native. Vous pouvez consulter une bonne comparaison des deux méthodes 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 avec l’interface CLI Expo, React Native et Windows, 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.
  • Bundling : les performances étant essentielles pour les applications web modernes, il est important que le code JavaScript d’une application inclue uniquement le code nécessaire à l’application et qu’il soit combiné en un nombre de fichiers aussi réduit que possible. Un bundler, tel que webpack, effectue cette tâche pour vous.
  • Gestion des packages : les gestionnaires de packages facilitent l’intégration des fonctionnalités des packages tiers à votre application, y compris leur mise à jour et la gestion des dépendances. Parmi les gestionnaires de packages couramment utilisés figurent 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 à développement facile à configurer pour React qui utilise cette chaîne d’outils est Vite qui génère 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.

L’annuaire React Native fournit une liste des 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 packages : deux gestionnaires de packages connus 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.
  • React Router : collection de composants de navigation dont vous pouvez vous servir afin de mettre en place, par exemple, des URL avec signet pour votre application web ou une méthode composable de navigation 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 facilite la gestion de l’architecture du 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 ».
  • webpack : outil de génération qui vous permet de compiler des modules JavaScript, également appelé 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 : kit de ressources comprenant un analyseur, un réducteur, un compresseur et un embellisseur JavaScript.
  • Babel : compilateur JavaScript principalement utilisé pour convertir du code ECMAScript 2015+ en une version à compatibilité descendante de JavaScript dans des environnements ou navigateurs actuels et anciens. Il peut également être utile de recourir à babel-preset-env pour ne pas avoir à microgérer des transformations syntaxiques ou des polyfills de navigateur et pouvoir définir les navigateurs Internet à prendre en charge.
  • ESLint : outil permettant d’identifier et de signaler des séquences trouvées 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 : framework de test intégré au package create-react-app qui aide à écrire des tests JavaScript idiomatiques.
  • Mocha : framework de test s’exécutant sur Node.js et dans le navigateur qui facilite les tests asynchrones, la création de rapports et le mappage d’exceptions non interceptées 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