Bibliothèque JavaScript : guide complet pour apprendre React Par The Zen of Pro
Bibliothèque JavaScript : guide complet pour apprendre React Par The Zen of Programmint (Ali Spittel) - kevin254kl (traducteur) Date de publication : 28 août 2018 Dernière mise à jour : 4 février 2019 React est une bibliothèque JavaScript construite en 2013 par l'équipe de développement de Facebook pour rendre les interfaces utilisateurs plus modulaires (ou réutilisables) et plus facilement maintenables. Selon le site web de React, il est utilisé pour « Construire des composants encapsulés qui gèrent leurs propres états, puis les assembler pour réaliser des interfaces utilisateurs complexes ». Pour réagir au contenu de ce tutoriel, un espace de dialogue vous est proposé sur le forum. Commentez ♪ Bibliothèque JavaScript : guide complet pour apprendre React par The Zen of Programmint (Ali Spittel) I - Introduction..............................................................................................................................................................3 II - Qu'est-ce que React ?........................................................................................................................................... 3 III - React vs. Vanilla................................................................................................................................................... 3 IV - Installation.............................................................................................................................................................3 V - Les composants.....................................................................................................................................................4 VI - Commençons........................................................................................................................................................6 VII - Code de démarrage............................................................................................................................................ 8 VIII - Architecture des composants............................................................................................................................. 9 IX - État et Propriétés................................................................................................................................................12 IX-A - Les Propriétés............................................................................................................................................12 IX-B - État.............................................................................................................................................................13 IX-C - Le gestionnaire d'événements...................................................................................................................13 X - Bonus : composants fonctionnels........................................................................................................................15 XI - aide-mémoire...................................................................................................................................................... 16 XII - Prochaines étapes............................................................................................................................................. 16 XIII - Notes de la rédaction de Developpez.com...................................................................................................... 17 - 2 - Le contenu de cet article est rédigé par The Zen of Programmint (Ali Spittel) et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2018 Developpez.com. https://javascript.developpez.com/tutoriels/tutoriel-apprendre-react/ Bibliothèque JavaScript : guide complet pour apprendre React par The Zen of Programmint (Ali Spittel) I - Introduction Je veux vous faire un retour sur les applications lourdes, et React est l'une de mes technologies préférées, alors j'ai pensé à créer une introduction sur React. Cet article nécessite comme prérequis des connaissances en HTML et JavaScript. Je pense que vous devriez les connaître avant de pouvoir appréhender une bibliothèque comme React. II - Qu'est-ce que React ? React est une bibliothèque JavaScript construite en 2013 par l'équipe de développement de Facebook pour rendre les interfaces utilisateurs plus modulaires (ou réutilisables) et plus facilement maintenables. Selon le site web de React, il est utilisé pour « Construire des composants encapsulés qui gèrent leurs propres états, puis les assembler pour réaliser des interfaces utilisateurs complexes ». Je vais utiliser beaucoup d'exemples de Facebook tout au long de cet article, puisqu’étant à l'origine du projet React ! Rappelez-vous quand Facebook est passé d'un simple système de « like » à des systèmes plus complexes avec réactions ? Au lieu de simplement pouvoir « liker » les messages, vous pouvez maintenant réagir de différentes façons avec un cœur, un smiley ou encore un « like » sur n'importe quel article. Si ces réactions étaient principalement faites en HTML, ce serait compliqué de transformer et d'adapter les « likes » en réactions. C'est à ce moment que React intervient. Plutôt qu'utiliser le principe de « separation of concerns » qui impressionne depuis le premier jour les développeurs, nous avons une architecture différente qui améliore la modularité basée sur une structure par composant plutôt que de séparer les différents langages. Aujourd'hui, nous allons garder les fichiers CSS séparés, mais vous pouvez rendre celui-ci spécifique si vous le voulez. III - React vs. Vanilla Lorsque nous parlons de Vanilla Javascript, nous parlons généralement d'écrire du JavaScript sans bibliothèques supplémentaires telles que JQuery, React, Angular ou View. Si vous souhaitez en savoir plus sur ces bibliothèques et sur ce qu'est un framework, j'ai un article sur les frameworks Web. Quelques notes rapides avant de commencer : • pour rendre ce tutoriel un peu plus concis, certains exemples de code ont « … » qui les précède ou qui les suit, qui indiquent que du code a été omis. • j'utilise Git diffs à plusieurs endroits pour afficher les lignes de code qui changerons, donc si vous faites un copier-coller, vous devrez supprimer le signe + au début de la ligne ; • j'ai des CodePens avec les versions complètes des scripts de chaque section, vous pouvez donc les utiliser pour gagner du temps ; • les concepts plus avancés qui ne sont pas essentiels pour le tutoriel sont décrits dans des blocs de citation. Ce sont pour la plupart des notions que je pense intéressantes. IV - Installation Si vous créez une application React en production, vous voudrez utiliser un outil de construction comme Webpack, pour empaqueter votre code, car React utilise certains patrons qui ne fonctionneront pas encore par défaut dans le navigateur. Create Ract App est très utile à ces fins, car il effectue la majeure partie de la configuration pour vous. Pour l'instant, puisque nous voulons déployer et écrire rapidement une application React, nous utiliserons le CDN, qui doit servir uniquement à des fins de développements. Nous utiliserons également le CDN de Babel pour pouvoir utiliser certaines fonctionnalités JavaScript non standards (nous en reparlerons plus tard). - 3 - Le contenu de cet article est rédigé par The Zen of Programmint (Ali Spittel) et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2018 Developpez.com. https://javascript.developpez.com/tutoriels/tutoriel-apprendre-react/ Bibliothèque JavaScript : guide complet pour apprendre React par The Zen of Programmint (Ali Spittel) 1. < script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js" > < /script> 2. <script crossorigin src = "https://unpkg.com/react-dom@16/umd/react- dom.development.js" > < /script> 3. <script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/ browser.js" > < /script> J'ai aussi un template Code Pen que vous pouvez utiliser. Dans un projet React complet, je découpe mes composants dans différents fichiers, mais encore une fois, pour les besoins de l'apprentissage, nous allons combiner notre code JavaScript dans un fichier unique pour le moment. V - Les composants Pour ce tutoriel, nous allons construire un widget de statut Facebook, qui est une fonctionnalité de base dans Facebook depuis longtemps. Pensez au nombre d'endroits où le widget « likes » apparaît sur Facebook. Vous pouvez aimer un statut, un lien sur un article, une vidéo, une photo ou même une page. Chaque fois que Facebook modifie quelque chose dans le widget « like », ils ne veulent pas être obligés de le faire partout dans le code. C'est là que les composants entrent en jeu. Toutes les parties réutilisables d'une page Web sont mises en abstraction dans un composant qui peut être utilisé encore et encore, et nous n'aurons à changer le code qu'à un seul endroit pour le mettre à jour. Regardons l'image d'un statut Facebook et séparons-en les différents décomposants en différents composants. - 4 - Le contenu de cet article est rédigé par The Zen of Programmint (Ali Spittel) et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2018 Developpez.com. https://javascript.developpez.com/tutoriels/tutoriel-apprendre-react/ Bibliothèque JavaScript : guide complet pour apprendre React par The Zen of Programmint (Ali Spittel) Le statut lui-même sera un composant. Il y a de nombreux statuts dans une chronologie Facebook, nous voulons donc pouvoir réutiliser le composant statut. Dans ce composant, nous aurons des sous-composants ou des composants dans un composant parent. Ils seront également réutilisables. Le composant de bouton « like » pourrait donc être un enfant des composants PhotoStatus et LinkStatus. Peut-être que nos sous-composants ressembleraient à ça : - 5 - Le contenu de cet article est rédigé par The Zen of Programmint (Ali Spittel) et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2018 Developpez.com. https://javascript.developpez.com/tutoriels/tutoriel-apprendre-react/ Bibliothèque JavaScript : guide complet pour apprendre React par The Zen of Programmint (Ali Spittel) Nous pouvons même avoir des sous-composants avec des sous-composants ! Ainsi, le groupe composé des composts « like », commentaire et partager pourrait être son propre composant ActionBar avec des composants pour « liker », commenter et partager. Il existe de nombreuses façons de compartimenter ces composants et sous-composants en blocs de codes que vous réutiliserez dans les fonctionnalités dans votre application si vous le souhaitez. VI - Commençons Je voulais commencer ce tutoriel avec un React « Hello World » - c'est la tradition après tout. Nous passerons ensuite à l'exemple de statut un peu plus complexe. Dans notre fichier HTML, allons ajouter juste un élément, une balise « div » avec un identifiant (id). Par convention, vous devriez normalement avoir un id « root », ce sera la racine de notre application. - 6 - Le contenu de cet article est rédigé par uploads/S4/ tutoriel-apprendre-reactjs 1 .pdf
Documents similaires










-
30
-
0
-
0
Licence et utilisation
Gratuit pour un usage personnel Attribution requise- Détails
- Publié le Mar 31, 2021
- Catégorie Law / Droit
- Langue French
- Taille du fichier 0.9443MB