Il y a déjà beaucoup d'articles sur ReactJS. Mais pour commencer à étudier un programmeur novice, vous devez trouver le tout début où se trouvent les fondements de sa création. Je voulais montrer qu'il n'y a rien de compliqué à comprendre les principes de développement d'un frontend sur ce cadre.
Une méthode d'étude m'a permis de comprendre la structure de nombreux systèmes logiciels complexes et cela revient au fait que vous devez réécrire le projet que vous étudiez afin d'obtenir une sorte de bête inconnue qui au moins bouge un peu et est quelque peu similaire à son prototype.
Je dois admettre que je suis un back-end et je ne sais même pas ce qui m'a motivé à écrire un microframework en JavaScript. Mais franchement, c'est un désir d'apprendre JS.
En fait, il existe une bonne motivation pour créer des projets sous forme de modules / composants. De l'avis des programmeurs principaux, les données ressemblent au mieux à des objets JSON, elles doivent être formées dans la structure souhaitée et envoyées si nécessaire, puis faire ce que vous voulez avec elles. À l'avant, dans la version la plus primitive, vous devez sélectionner les éléments HTML nécessaires par ID et mettre à jour leurs attributs, ainsi que modifier les nœuds de texte. Simplifiez-vous la vie aux frameworks JavaScript.
Une fois que j'ai écrit mon framework PHP-Slim, qui est loin de l'original, mais cela m'aide vraiment dans les projets PHP. Aujourd'hui, je veux parler de la façon dont j'ai présenté les origines du développement de ReactJS. J'ai écrit un fichier dans 135 lignes de code appelé bots.js et si vous le connectez et écrivez un composant comme dans React, vous pouvez même voir quelque chose dans le navigateur. Je l'ai appelé ReactKids.
L'idée est de décomposer le projet en composants, d'ajouter des composants à l'aide de javascript et de s'assurer qu'il n'y a pas de dépendances entre les composants.
Structure standard HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>HelloReactKids</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="root"></div> <script src="js/bots.js"></script> <script src="js/pict.js"></script> <script src="js/navbar.js"></script> <script src="js/label.js"></script> <script src="js/button.js"></script> <script src="js/app.js"></script> </body> </html>
Pour l'application, spécifiez id = root et connectez bots.js, puis connectez les composants (ou écrivez-les vous-même) et exécutez-le dans app.js.
Le composant dans ReactKids ressemble à ceci:
function Button(attr) {
Le composant dans notre cas ne peut être qu'une fonction dans laquelle params est appelé attr.
Ici, vous devez prêter attention à la raison pour laquelle cette attr peut être utile. Eh bien, tout d'abord, ceux qui connaissent la réaction savent qu'il est possible de "réduire" les données à leurs composants filles. Autrement dit, un composant renvoie un composant qui renvoie un composant, et ainsi de suite jusqu'à ce qu'un composant qui n'a pas d'enfants. Cependant, ils sont également utilisés comme packages pour les données provenant du serveur. Les demandes pour le backend sont pour la plupart envoyées à partir de fonctions qui gèrent les événements liés à l'interaction avec l'interface utilisateur.
Lorsque le serveur renvoie JSON (généralement sous forme de texte), il doit être transformé en objet JS et effectué quelque part. C'est à cela que servent les paramètres de React et attr dans notre implémentation enfant.
Dans attr, vous pouvez entasser l'intégralité de l'objet JSON reçu du serveur, ou vous ne pouvez obtenir que les
meilleures données dont vous avez besoin et, éventuellement, complétées par d'autres données nécessaires.
Ensuite, nous suivons la logique de l'adulte React - au début de la fonction, nous traitons l'objet attr et effectuons d'autres affaires. Ensuite, vous devez renvoyer le résultat de l'appel de la fonction elem (), dont l'implémentation se trouve dans bots.js. Les paramètres d'appel sont passés:
- Le nom de la balise.
- Objet avec styles (au format JS)
- Attributs de la balise.
- Du texte, une autre balise ou un autre composant (enfant) ou rien n'est transmis.
Jetez un œil à app.js:
var attr = { labelContent: "Hello React Kids", labelButton: "This button", } rend(document.getElementById("root"), App(attr)) function App(attr) { return elem( "div", { fontFamily: "segoe ui", color: "gray", textAlign: "center", }, { id: "app", }, [ Navbar(attr), Pict(attr), Label(attr), Button(attr), ] ) }
Rien d'inhabituel ici non plus. Voici la même chose plus compliquée:
function App(attr) { var cpic1 = CirclePict({id: "img1", src: "./img/img1.jpg", height: "200px"}) var cpic2 = CirclePict({id: "img1", src: "./img/img2.jpg", height: "200px"}) var cpic3 = CirclePict({id: "img1", src: "./img/img3.jpg", height: "200px"}) var txt1 = " . ."; var txt2 = " , ."; return elem( "div", { fontFamily: "segoe ui", color: "gray", }, { id: "app", }, [ Pict({id: "logo", src: "./img/logo.png", height: "90%"}), Text({id: "info", text: "you number", direction: "right"}), Label(attr), Outer({id: "outer1", content: [cpic1, cpic2, cpic3]}), Text({id: "txt1", text: txt1, width: "450px"}), Button(attr), Label({id: "lbl2", labelContent: " "}), Text({id: "txt2", text: txt2, width: "650px", direction: "center"}), RoundPict({id: "well", src: "./img/well.jpg", height: "280px", width: "550"}) ] ) }
Comme vous pouvez le voir, nous avons intégré le composant CirclePict dans le composant Outer 3.
Les enfants ont bien sûr remarqué le manque de JSX. En fait, il a été inventé par des programmeurs paresseux et facilite simplement ce que nous écrivons. En conséquence, les balises JSX se transforment toujours en JavaScript.
Vous devez maintenant voir comment cela est désormais implémenté dans bots.js. Le framework se compose de 3 fonctions entières, en fait elem () et setAttr (), la première à créer, la seconde à mettre à jour l'état du composant et rend () à afficher dans app.js.
function elem(elt, style, attr, item) { if(elt) {
La fonction traite les paramètres qui lui sont passés dans la même séquence:
- Créez un composant dans l'arborescence du document.
- Ajout de styles à elle.
- Attributs.
- Ajout d'un élément enfant en tant que texte ou autre élément.
Lors du traitement des attributs, nous vérifions également leur type, si une fonction est reçue en tant que valeur, il est supposé qu'il s'agit d'un événement et nous y accrochons une écoute électronique. Il ne reste donc qu'à déclarer et implémenter la fonction indiquée comme événement.
C'est dans cette fonction de gestion d'événements que nous appelons setAttr (), en lui passant l'objet lui-même avec l'attr mis à jour. Il y a une chose mais - pour chaque élément à créer dans attr, vous devez spécifier id; sinon, il ne sera pas mis à jour via setAttr. Elle par id le trouve dans le DOM.
Quant à setAttr (), tout est pire que dans React, bien que pour comprendre les principes c'est suffisant (enfin, ou presque).
function setAttr(update, slow) { if(slow) { var replace = document.getElementById(update.id) var opamax = 0.99 var opaint = 0.01 var outslow = setInterval(function() { opamax = opamax - opaint if(opamax <= 0) { clearInterval(outslow) update.style.opacity = opamax replace.parentNode.replaceChild(update, replace) var inslow = setInterval(function() { opamax = opamax + opaint update.style.opacity = opamax if(opamax >= 1) { clearInterval(inslow) } }, slow) } replace.style.opacity = opamax }, slow) } else { var replace = document.getElementById(update.id) replace.parentNode.replaceChild(update, replace) } }
Comme vous pouvez le voir ici, seules les manipulations avec l'arborescence du document et un autre effet de fondu, de sorte qu'au moins il ressemble et le code ressemble à une fonction, pas helloworld.
La chose la plus cool dans le cadre de nos enfants est la fonction de rendu:
function rend(root, elem) { root.appendChild(elem) }
J'ai remarqué qu'il est difficile pour les programmeurs débutants de commencer à apprendre des choses comme React purement psychologiquement. Après avoir vu des centaines de mégaoctets de bibliothèques et des millions de lignes de code, vous devez être déprimé et chercher autre chose. En particulier, ils passent à Vue. Bien sûr, c'est aussi un bon cadre, mais il est encore mieux de comprendre les deux approches du développement frontal.
Il s'avère que les environnements logiciels complexes résultent de solutions petites mais efficaces. Par conséquent, je souhaite bonne chance à tous ceux qui cherchent à connaître React. Que la force vienne avec nous!