Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

26/11/2021 18:31 Guide complet React pour débutant https://javascript.developpe

26/11/2021 18:31 Guide complet React pour débutant https://javascript.developpez.com/tutoriels/tutoriel-apprendre-react/ 1/14 Bibliothèque JavaScript : guide complet pour apprendre React Table des matières I. Introduction II. Qu'est-ce que React ? III. React vs. Vanilla IV. Installation V. Les composants VI. Commençons VII. Code de démarrage VIII. Architecture des composants IX. État et Propriétés IX-A. Les Propriétés IX-B. État IX-C. Le gestionnaire d'événements X. Bonus : composants fonctionnels XI. aide-mémoire XII. Prochaines étapes XIII. Notes de la rédaction de Developpez.com 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 ♪ Article lu 37433 fois. Les deux auteur et traducteur The Zen of Programmint (Ali Spittel) Traducteur : kevin254kl L'article Publié le 28 août 2018 - Mis à jour le 4 février 2019 Version PDF Version hors-ligne ePub, Azw et Mobi Liens sociaux 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 ?▲ FORUMS TUTORIELS FAQ BLOGS CHAT NEWSLETTER EMPLOI ÉTUDES DROIT CLUB Dév. Web AJAX Apache ASP CSS Dart Flash / Flex JavaScript NodeJS PHP Ruby TypeScript Web sémantique Webmarketing (X)HTML ACCUEIL JS FORUM JS F.A.Q JS TUTORIELS JS SOURCES JS EXERCICES JS LIVRES JS QUIZZ JS Partager DI/DSI Solutions d'entreprise Cloud IA ALM Microsoft Java Dév. Web EDI Programmation SGBD Office Mobiles Systèmes 26/11/2021 18:31 Guide complet React pour débutant https://javascript.developpez.com/tutoriels/tutoriel-apprendre-react/ 2/14 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). Sélectionnez 1. 2. 3. < script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js" > < /script> <script crossorigin src = "https://unpkg.com/react-dom@16/umd/react- dom.development.js" > < /script> <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. 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. 26/11/2021 18:31 Guide complet React pour débutant https://javascript.developpez.com/tutoriels/tutoriel-apprendre-react/ 3/14 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 : 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. <div id="root"></div> Si vous écrivez votre code en utilisant le template Code Pen, vous pouvez écrire le javascript directement dans la section js. Si vous utilisez plutôt votre ordinateur, vous devrez ajouter une balise de script avec le type text/jsx, ainsi : <script type="text/jsx"></script> Regardons maintenant notre code React : Sélectionnez 1. 2. 3. 4. 5. 6. 7. 8. 9. class HelloWorld extends React.Component { render() { // Tells React what HTML code to render return <h1>Hello World</h1> } } // Dis à React d'attacher le composant <HelloWorld> à la balise HTML DIV nommée 'root' ReactDOM.render(<HelloWorld />, document.getElementById("root")) Tout ce que fait « Hello World » est d'afficher comme une balise H1 sur la page. Passons en revue les étapes. Premièrement, nous utilisons une classe ES6 qui hérite de la React.Component . C'est un patron que nous utiliserons pour la plupart de nos composants React. Ensuite, nous avons une méthode dans notre classe, et une méthode spéciale appelée render. React cherche la méthode render pour savoir quoi afficher sur la page. Le nom a du sens. Tout ce qui est retourné par cette méthode render sera rendu par ce composant. Dans ce cas, nous retournons un H1 avec le texte « Hello World » - c'est exactement ce que nous aurions avec un fichier html. Enfin, nous avons : ReactDOM.render(<HelloWorld />, document.getElementById("root")) Nous utilisons la fonctionnalité ReactDOM pour lier notre composant React au DOM. 26/11/2021 18:31 Guide complet React pour débutant https://javascript.developpez.com/tutoriels/tutoriel-apprendre-react/ 4/14 React utilise quelque chose appelé le DOM virtuel, qui est une représentation virtuelle du DOM avec lequel vous devriez normalement interagir dans uploads/S4/ guide-complet-react-pour-debutant 1 .pdf