Qu'est-ce que React et comment ça marche ?

React est une bibliothèque Javascript permettant de créer des interfaces utilisateur. Maintenant, deux choses sont importantes, l’une est la bibliothèque Javascript et l’autre les interfaces utilisateur. La bibliothèque est une collection de code que nous pouvons réutiliser pour créer notre application. En utilisant React et une collection de code, nous pouvons créer notre application Web, notre application mobile, notre application de bureau et notre interface utilisateur.

Chaque fois que nous parlons d'une application, elle comporte essentiellement deux parties. L'un est le frontend (c'est-à-dire l'interface utilisateur), l'autre est le backend, où réside toute la logique.
Le frontend est la partie où l'utilisateur interagit, comme la navigation, le clic sur les boutons, la soumission de formulaires, etc. Ensuite, notre frontend y répond avec le backend.
Et le backend contient beaucoup de logiques et de données complexes, telles que l'authentification, l'autorisation, la manipulation de données, etc.
Mais React ne se soucie pas du tout du backend. React ne fonctionne qu'avec l'interface utilisateur.

Maintenant, si nous parlons du web, nous savons que Javascript est le langage de programmation par défaut du navigateur. Mais React n'est pas un langage de programmation, c'est juste une bibliothèque Javascript.
Cela signifie que tout ce que nous faisons dans React n’est en fin de compte rien de plus que du Javascript pur vanille.

Eh bien, laissez-moi vous poser une question. React est arrivé en 2013 mon frère, alors n'avons-nous pas créé une interface utilisateur avant cela ?
Oui, nous l'avons déjà fait avec du Javascript pur et jQuery.
Maintenant, la question est : pourquoi React est-il revenu ? Quel serait le problème avec Javascript ?
Pour comprendre quel problème React vient réellement résoudre, nous devons creuser un peu plus. Plongeons en profondeur...!

On verra avec une petite application. Nous allons créer une petite application de compteur, comme vous pouvez le voir ci-dessous, un simple code HTML avec deux identifiants nommés counterNumber et bouton.

Jetez maintenant un œil à l'image du code JavaScript, il y a un code simple. Je n'ai pas l'intention de vous expliquer ce code. Faites attention à ce que je veux dire.

counterNumber et bouton sont sélectionnés comme éléments DOM, puis la valeur du nombre est incrémentée de 1 avec addEventListener. Ensuite, la valeur de counterNumberEl y est mise à jour. Que se passe-t-il réellement ici ? Si vous regardez bien, vous comprendrez qu'il y a essentiellement deux fonctions :

1. Saisir les éléments et travailler avec eux est ce que nous voulons faire.
2. Mise à jour de l'interface utilisateur (interface utilisateur)

Alors, quel est le problème ici ? Le code fonctionne ! Supposons toutefois que vous ayez besoin de deux applications de compteur. Que faire alors ?

Vous devez revenir à ce HTML et récupérer un nouveau div, le récupérer séparément avec les nouveaux identifiants. Ensuite, l'interface utilisateur devrait être mise à jour plus tard.

Maintenant, je ne parle que de deux contre-applications, mais lorsqu'il y a trop d'interactions et d'interfaces utilisateur complexes, les développeurs seront débordés. C'est le problème principal ! Vous créez des fonctionnalités d'une part et d'autre part mettez à jour l'interface utilisateur, ce qui devient très pénible.

Lorsqu'une entreprise comme Facebook a été confrontée à cet énorme problème, Jordan Walke, un ingénieur logiciel de Facebook, a créé React.js en 2011, inspiré du framework basé sur les composants XHP-js de PHP. Il a été implémenté pour la première fois dans le fil d'actualité de Facebook en 2011, et en 2012, il a été utilisé sur Instagram. React.js open source en 2013.

Nous savons maintenant pourquoi nous utilisons React. Faisons donc la contre-application que nous avons réalisée avec Vanilla JS en utilisant maintenant React. Votre confiance augmentera alors à quel point la vie des développeurs est devenue plus facile après React. Passons au code…

Tout d'abord, je vais vous montrer comment installer React pour votre commodité, mais personne n'utilise React de cette manière dans notre projet. Je ne le montre ainsi que pour faciliter la compréhension afin que vous puissiez le comprendre à partir du niveau de base.

Ici, je viens de connecter React avec ce lien comme on dit sur le site React.org. Maintenant, si je vais dans le fichier react.js et que j'écris console.log(React) et console.log(ReactDOM), alors nous pouvons voir 2 objets dans la console, cela signifie que notre React est connecté. Remarquez qu'il n'y a rien d'autre qu'un div vide à l'intérieur de la balise body, juste un identifiant appelé root.

En JavaScript, nous pouvons créer des éléments dans le DOM de la même manière que nous avons d'abord travaillé avec des sélecteurs. De même, nous pouvons également créer des éléments dans React. Ici, un div est créé, à l'intérieur il est imprimé Hello World avec la balise p. Même si cela ne semble pas poser de problème pour le moment, lorsque vous créez trop d'éléments, la vie est finie ! Faire toujours la même chose est un problème. C'est pourquoi React a créé son propre balisage, appelé JSX (JavaScript XML). Bien que cela ressemble à du HTML, c'est en fait du JSX.

C'est ainsi que c'est écrit dans l'image ci-dessus. Mais le problème est que le navigateur ne comprendra pas ce JSX. Donc pour résoudre ce problème vient notre transpiler Babel, qui transpilera notre JSX en vanilla JS, que le navigateur comprendra.

Pour connecter Babel, visitez notre site Web > Configuration > Copiez ce lien sous la balise body de mon fichier HTML et js que j'ai créé. =”text/babel” là.

Maintenant, comme il s'agit de JSX, nous pouvons écrire ici le JavaScript que nous voulons. Simplifions donc cette syntaxe. Commençons par le mettre dans une fonction JS.

Notez ici, myElement tare. Je viens de mettre une fonction appelée Increment et créer la fonction Increment comme celle-ci facilite l'écriture dans React. Maintenant, nous pouvons écrire le JS ici, si nous avions travaillé avec le code JS précédent ici, cela aurait fonctionné. Mais React dit que si vous souhaitez gérer l'état comme je le fais, vous n'avez pas à penser aux mises à jour de l'interface utilisateur. Donc, dans React, ils fournissent une fonction appelée useState, je montre comment l'utiliser.

Cet useState servira d'état de notre bouton d'incrémentation. UseState a par défaut une valeur, qui affichera la valeur par défaut dans notre état, dans ce cas, nous devons donner 0. La fonction useState nous renvoie essentiellement un tableau qui contient 2 éléments : l'un est la valeur que nous donnons et l'autre est une fonction qui met à jour la valeur de l'état. Alors maintenant, nous avons séparé le tableau en le déstructurant.

Maintenant, si nous voulons counter comme valeur initiale, maintenant après le retour, nous pouvons donner {counter} comme ceci au lieu de 0. C'est ce qu'on appelle l'interpolation. Désormais, la valeur du compteur changera dynamiquement. Et dans le bouton onClick (puisqu'il s'agit de JSX, il doit donc être écrit après camelcase comme onClick) devrait être appelé une fonctionnalité.

Si je le donne comme ça, alors c'est fait, mais il y a un problème ici. Si j'appelle la fonction setCounter comme ceci, elle sera déjà appelée, ce que nous ne voulons pas. Nous voulons que la valeur du bouton augmente lorsque quelqu'un clique dessus. Nous devons donc faire fonctionner une flèche anonyme, alors le problème sera résolu.

Maintenant, si vous remarquez qu'ici nous n'avons pas mis à jour manuellement l'interface utilisateur en récupérant un élément du DOM, ici nous avons simplement dit à React ce que nous voulions, le reste, React a mis à jour l'interface utilisateur elle-même.

Maintenant, lorsque nous avons donné l'exemple JS, le problème majeur que nous avons rencontré avec JS était de devoir mettre à jour manuellement l'interface utilisateur. Si nous voulions réutiliser l'application, nous devrions refaire la même chose encore et encore.

Mais React résout ces deux problèmes. Nous avons vu comment React fonctionne sans mettre à jour manuellement l'interface utilisateur, nous verrons maintenant comment React nous aide si nous devons utiliser cette application à 2-3 endroits.

Regardez ici, je viens de <> En cela, j'appelle la fonction d'incrémentation 2 fois, le travail est terminé. Maintenant, la chose la plus intéressante est que vous pouvez exécuter 2 applications séparément, ce qui signifie qu'elles géreront l'état séparément. Je veux dire, vous comprenez, vous pouvez l'utiliser n'importe où sur l'ensemble du site Web si vous le souhaitez, mais encore une fois, différents endroits seront différents, ce qui signifie que l'un n'est pas lié à l'autre. C'est le pouvoir de Reactjs.

En gros, vous indiquez à React quelle sera votre fonctionnalité, et React mettra automatiquement à jour l'interface utilisateur en conséquence. C'est la beauté de ReactJS

.

Alors de quoi parle-t-on, React ? Pourquoi utilisons-nous React ? Maintenant, je comprends parfaitement quel problème React est venu résoudre. Plus aucune question de ce type ne peut vous retenir lors du jury d'entretien. Ce n’est pas une tâche facile de lire complètement avec autant de patience, mon frère. Vous l'avez fait, bonne chance à vous.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!