React (bibliothèque JavaScript) - React (JavaScript library)

Réagir

Auteur(s) original(aux)	Jordan Walke
Développeur(s)	Facebook et communauté
Première version	29 mai 2013 ; il y a 8 ans ( 2013-05-29 )
Version stable	17.0.2  / 22 mars 2021 ; il y a 6 mois ( 22 mars 2021 )
Dépôt
Écrit en	JavaScript
Plate-forme	Plateforme Web
Taper	bibliothèque JavaScript
Licence	Licence MIT
Site Internet	reactjs .org

React (également connu sous le nom de React.js ou ReactJS ) est une bibliothèque JavaScript frontale gratuite et open source permettant de créer des interfaces utilisateur ou des composants d' interface utilisateur. Il est maintenu par Facebook et une communauté de développeurs individuels et d'entreprises. React peut être utilisé comme une base dans le développement de une seule page des applications ou mobiles. Cependant, React ne concerne que la gestion de l'état et le rendu de cet état dans le DOM , donc la création d'applications React nécessite généralement l'utilisation de bibliothèques supplémentaires pour le routage, ainsi que certaines fonctionnalités côté client.

Utilisation de base

Ce qui suit est un exemple rudimentaire d'utilisation de React en HTML avec JSX et JavaScript.

<div id="myReactApp"></div>

<script type="text/babel">
  function Greeter(props) {
    return <h1>{props.greeting}</h1>;
  }
  let App = <Greeter greeting="Hello World!" />;
  ReactDOM.render(App, document.getElementById('myReactApp'));
</script>

La Greeterfonction est un composant React qui accepte une propriété greeting. La variable Appest une instance du Greetercomposant où la greetingpropriété est définie sur 'Hello World!'. La ReactDOM.renderméthode rend ensuite notre composant Greeter à l'intérieur de l' élément DOM avec id myReactApp.

Lorsqu'il est affiché dans un navigateur Web, le résultat sera

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>

Caractéristiques notables

Composants

Le code React est composé d'entités appelées composants. Les composants peuvent être rendus à un élément particulier du DOM à l'aide de la bibliothèque React DOM. Lors du rendu d'un composant, on peut passer des valeurs appelées "props":

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

Les deux principales façons de déclarer des composants dans React sont via les composants de fonction et les composants basés sur les classes.

Composants fonctionnels

Les composants de fonction sont déclarés avec une fonction qui renvoie ensuite du JSX.

const Greeter = (props) => <div>Hello, {props.name}!</div>;

Composants basés sur les classes

Les composants basés sur les classes sont déclarés à l'aide des classes ES6 .

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

DOM virtuel

Une autre caractéristique notable est l'utilisation d'un modèle d'objet de document virtuel , ou DOM virtuel. Réagir crée un en mémoire cache des données structure, calcule les différences qui en résultent, puis met à jour DOM affichée du navigateur efficacement. Ce processus est appelé réconciliation . Cela permet au programmeur d'écrire du code comme si la page entière était rendue à chaque modification, tandis que les bibliothèques React ne rendent que les sous-composants qui changent réellement. Ce rendu sélectif offre un gain de performances majeur. Cela évite de recalculer le style CSS, la mise en page de la page et le rendu de la page entière.

Méthodes de cycle de vie

Les méthodes de cycle de vie utilisent une forme d' accrochage qui permet l'exécution de code à des points définis pendant la durée de vie d'un composant.

• shouldComponentUpdate permet au développeur d'empêcher un nouveau rendu inutile d'un composant en retournant false si un rendu n'est pas requis.
• componentDidMountest appelé une fois le composant "monté" (le composant a été créé dans l'interface utilisateur, souvent en l'associant à un nœud DOM ). Ceci est couramment utilisé pour déclencher le chargement de données à partir d'une source distante via une API .
• componentWillUnmountest appelé juste avant que le composant ne soit démonté ou "démonté". Ceci est couramment utilisé pour supprimer les dépendances exigeantes en ressources du composant qui ne seront pas simplement supprimées lors du démontage du composant (par exemple, suppression de toutes les setInterval()instances liées au composant ou d'un " eventListener " défini sur le " document " car de la présence du composant)
• renderest la méthode de cycle de vie la plus importante et la seule requise dans n'importe quel composant. Il est généralement appelé chaque fois que l'état du composant est mis à jour, ce qui doit être reflété dans l'interface utilisateur.

JSX

JSX, ou JavaScript XML , est une extension de la syntaxe du langage JavaScript. D'apparence similaire à HTML, JSX fournit un moyen de structurer le rendu des composants à l'aide d'une syntaxe familière à de nombreux développeurs. Les composants React sont généralement écrits à l'aide de JSX, bien qu'ils ne soient pas obligés de l'être (les composants peuvent également être écrits en JavaScript pur). JSX est similaire à une autre syntaxe d'extension créée par Facebook pour PHP appelée XHP .

Un exemple de code JSX :

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

Architecture au-delà du HTML

L'architecture de base de React s'applique au-delà du rendu HTML dans le navigateur. Par exemple, Facebook a des graphiques dynamiques qui s'affichent sous forme de <canvas>balises, et Netflix et PayPal utilisent le chargement universel pour afficher un code HTML identique à la fois sur le serveur et sur le client.

Réagissez aux crochets

Les hooks sont des fonctions qui permettent aux développeurs de "s'accrocher" aux fonctionnalités d'état et de cycle de vie de React à partir des composants de fonction. Les hooks ne fonctionnent pas à l'intérieur des classes - ils vous permettent d'utiliser React sans classes.

React fournit quelques crochets internes comme useState, useContext, useReducer, useMemoet useEffect. D'autres sont documentés dans la référence de l'API Hooks. useState, useReduceret useEffect, qui sont les plus utilisés, sont respectivement pour contrôler les effets d'état et secondaires.

Règles de crochets

Il existe des règles de hooks qui décrivent le modèle de code caractéristique sur lequel les hooks s'appuient. C'est la façon moderne de gérer l'état avec React.

1. Les hooks ne doivent être appelés qu'au niveau supérieur (pas à l'intérieur des boucles ou des instructions if).
2. Les hooks ne doivent être appelés qu'à partir de composants de fonction React, pas de fonctions normales ou de composants de classe

Bien que ces règles ne puissent pas être appliquées au moment de l'exécution, les outils d'analyse de code tels que les linters peuvent être configurés pour détecter de nombreuses erreurs au cours du développement. Les règles s'appliquent à la fois à l'utilisation des hooks et à l'implémentation de hooks personnalisés, qui peuvent appeler d'autres hooks.

idiomes communs

React n'essaie pas de fournir une "bibliothèque d'applications" complète. Il est conçu spécifiquement pour créer des interfaces utilisateur et n'inclut donc pas la plupart des outils que certains développeurs pourraient considérer comme nécessaires pour créer une application. Cela permet de choisir les bibliothèques que le développeur préfère pour accomplir des tâches telles que l'accès au réseau ou le stockage de données local. Des modèles communs d'utilisation ont émergé au fur et à mesure que la bibliothèque mûrit.

Flux de données unidirectionnel

Pour prendre en charge le concept de flux de données unidirectionnel de React (qui pourrait être contrasté avec le flux bidirectionnel d' AngularJS ), l'architecture Flux a été développée comme alternative à l' architecture modèle-vue-contrôleur populaire . Flux propose des actions qui sont envoyées via un répartiteur central à un magasin , et les modifications apportées au magasin sont répercutées dans la vue. Lorsqu'il est utilisé avec React, cette propagation est accomplie via les propriétés des composants. Depuis sa conception, Flux a été supplanté par des bibliothèques telles que Redux et MobX.

Le flux peut être considéré comme une variante du modèle d'observateur .

Un composant React sous l'architecture Flux ne doit pas modifier directement les accessoires qui lui sont transmis, mais doit recevoir des fonctions de rappel qui créent des actions qui sont envoyées par le répartiteur pour modifier le magasin. L'action est un objet dont la responsabilité est de décrire ce qui s'est passé : par exemple, une action décrivant un utilisateur "suivant" un autre peut contenir un identifiant d'utilisateur, un identifiant d'utilisateur cible et le type USER_FOLLOWED_ANOTHER_USER. Les magasins, qui peuvent être considérés comme des modèles, peuvent se modifier en réponse aux actions reçues du répartiteur.

Ce modèle est parfois exprimé comme « les propriétés descendent, les actions montent ». De nombreuses implémentations de Flux ont été créées depuis sa création, la plus connue étant peut-être Redux , qui propose un magasin unique, souvent appelé source unique de vérité .

Développement futur

L'état du projet peut être suivi via le forum de discussion de l'équipe principale. Cependant, les modifications majeures apportées à React passent par les problèmes du référentiel Future of React et les demandes d'extraction . Cela permet à la communauté React de fournir des commentaires sur les nouvelles fonctionnalités potentielles, les API expérimentales et les améliorations de la syntaxe JavaScript.

Histoire

React a été créé par Jordan Walke, un ingénieur logiciel chez Facebook, qui a publié un premier prototype de React appelé "FaxJS". Il a été influencé par XHP , une bibliothèque de composants HTML pour PHP . Il a été déployé pour la première fois sur le fil d' actualités de Facebook en 2011, puis sur Instagram en 2012. Il a été diffusé en open source à JSConf US en mai 2013.

React Native , qui permet le développement natif Android , iOS et UWP avec React, a été annoncé lors de la conférence React de Facebook en février 2015 et open source en mars 2015.

Le 18 avril 2017, Facebook a annoncé React Fiber, un nouvel ensemble d'algorithmes internes pour le rendu, par opposition à l'ancien algorithme de rendu de React, Stack. React Fiber devait devenir la base de toutes les améliorations futures et du développement de fonctionnalités de la bibliothèque React. La syntaxe réelle pour la programmation avec React ne change pas ; seule la façon dont la syntaxe est exécutée a changé. L'ancien système de rendu de React, Stack, a été développé à une époque où l'accent du système sur le changement dynamique n'était pas compris. Stack était lent à dessiner une animation complexe, par exemple, essayant de tout accomplir en un seul morceau. La fibre décompose l'animation en segments pouvant être répartis sur plusieurs images. De même, la structure d'une page peut être divisée en segments qui peuvent être maintenus et mis à jour séparément. Les fonctions JavaScript et les objets DOM virtuels sont appelés "fibres", et chacun peut être utilisé et mis à jour séparément, permettant un rendu plus fluide à l'écran.

Le 26 septembre 2017, React 16.0 a été rendu public.

Le 16 février 2019, React 16.8 a été rendu public. La version a introduit React Hooks.

Le 10 août 2020, l'équipe React a annoncé la première version candidate de React v17.0, notable comme la première version majeure sans modifications majeures de l'API React destinée aux développeurs.

Licence

La version publique initiale de React en mai 2013 utilisait la licence Apache 2.0 . En octobre 2014, React 0.12.0 l'a remplacé par la licence BSD à 3 clauses et a ajouté un fichier texte BREVETS distinct qui permet l'utilisation de tous les brevets Facebook liés au logiciel :

La licence accordée en vertu des présentes prendra fin, automatiquement et sans préavis, pour toute personne faisant une réclamation (y compris en déposant une action en justice, une affirmation ou toute autre action) alléguant (a) une contrefaçon directe, indirecte ou contributive ou une incitation à contrefaire un brevet : (i ) par Facebook ou l'une de ses filiales ou sociétés affiliées, que cette réclamation soit ou non liée au Logiciel, (ii) par toute partie si une telle réclamation découle en tout ou en partie de tout logiciel, produit ou service de Facebook ou de l'un de ses filiales ou sociétés affiliées, que cette réclamation soit ou non liée au Logiciel, ou (iii) par toute partie liée au Logiciel ; ou (b) que tout droit sur une revendication de brevet de Facebook est invalide ou inapplicable.

Cette clause non conventionnelle a suscité des controverses et des débats au sein de la communauté des utilisateurs de React, car elle pourrait être interprétée comme permettant à Facebook de révoquer la licence dans de nombreux scénarios, par exemple, si Facebook poursuit le titulaire de la licence en l'incitant à prendre "d'autres mesures" en publiant l'action. sur un blog ou ailleurs. Beaucoup ont exprimé la crainte que Facebook puisse exploiter injustement la clause de résiliation ou que l'intégration de React dans un produit ne complique l'acquisition future d'une start-up.

Sur la base des commentaires de la communauté, Facebook a mis à jour la délivrance du brevet en avril 2015 pour qu'elle soit moins ambiguë et plus permissive :

La licence accordée en vertu des présentes prendra fin, automatiquement et sans préavis, si vous (ou l'une de vos filiales, sociétés affiliées ou agents) initiez directement ou indirectement, ou prenez un intérêt financier direct dans, toute Affirmation de brevet : (i) contre Facebook ou tout autre de ses filiales ou sociétés affiliées, (ii) contre toute partie si une telle revendication de brevet découle en tout ou en partie de tout logiciel, technologie, produit ou service de Facebook ou de l'une de ses filiales ou sociétés affiliées, ou (iii) contre toute partie relatives au Logiciel. [...] Une « affirmation de brevet » est toute action en justice ou autre action alléguant une contrefaçon directe, indirecte ou contributive ou une incitation à enfreindre un brevet, y compris une demande reconventionnelle ou reconventionnelle.

L' Apache Software Foundation a considéré que cet accord de licence était incompatible avec ses politiques de licence, car il "transfère le risque aux consommateurs en aval de notre logiciel en faveur du concédant de licence, et non du licencié, violant ainsi notre politique légale Apache d'être un donateur universel ", et "ne sont pas un sous-ensemble de ceux trouvés dans [Apache License 2.0], et ils ne peuvent pas être sous-licenciés en tant que [Apache License 2.0]". En août 2017, Facebook a rejeté les préoccupations en aval de la Fondation Apache et a refusé de reconsidérer sa licence. Le mois suivant, WordPress a décidé d'éloigner ses projets Gutenberg et Calypso de React.

Le 23 septembre 2017, Facebook a annoncé que la semaine suivante, il re-licencierait Flow, Jest , React et Immutable.js sous une licence MIT standard ; la société a déclaré que React était « le fondement d'un vaste écosystème de logiciels open source pour le Web », et qu'ils ne voulaient pas « retarder les progrès pour des raisons non techniques ».

Le 26 septembre 2017, React 16.0.0 est sorti avec la licence MIT. Le changement de licence MIT a également été rétroporté vers la ligne de version 15.x avec React 15.6.2.

Voir également

• Réagir natif
• AngularJS
• Angulaire
• Backbone.js
• Ember.js
• Suivant.js
• Svelte
• Vue.js
• Comparaison des bibliothèques JavaScript
• Composants Web

Les références

Liens externes

• Site officiel