Dans ce tutoriel, nous parlerons de React – la biblioth\u00e8que JavaScript bas\u00e9e sur des composants la plus populaire<\/a> utilis\u00e9e pour cr\u00e9er des interfaces utilisateur. Bien que ce tutoriel soit enti\u00e8rement destin\u00e9 aux d\u00e9butants, il peut \u00e9galement servir de guide de r\u00e9f\u00e9rence pour les d\u00e9veloppeurs React exp\u00e9riment\u00e9s.<\/p>\n\n Nous parlerons des caract\u00e9ristiques de React, des avantages et des inconv\u00e9nients, des raisons pour lesquelles vous devriez l’utiliser, et de la fa\u00e7on d’installer et d’utiliser React. Nous verrons \u00e9galement certaines des fonctionnalit\u00e9s de base de React \u00e0 l’aide d’exemples de code pratiques.<\/p>\n \u00c0 la fin de ce tutoriel, vous devriez comprendre ce qu’est React et comment il fonctionne, et \u00eatre capable de l’utiliser pour construire des projets impressionnants. React.js, commun\u00e9ment appel\u00e9 simplement React, est une biblioth\u00e8que JavaScript<\/a> utilis\u00e9e pour construire des interfaces utilisateur. Chaque application web React est compos\u00e9e de composants r\u00e9utilisables qui constituent des parties de l’interface utilisateur – nous pouvons avoir un composant distinct pour notre barre de navigation, un pour le pied de page, un autre pour le contenu principal, et ainsi de suite. Vous comprendrez mieux cela lorsque nous arriverons \u00e0 la section o\u00f9 nous devons travailler avec des composants.<\/p>\n Le fait de disposer de ces composants r\u00e9utilisables facilite le d\u00e9veloppement car nous n’avons pas \u00e0 r\u00e9p\u00e9ter le code r\u00e9current. Il nous suffit de cr\u00e9er sa logique et d’importer le composant dans n’importe quelle partie du code o\u00f9 il est n\u00e9cessaire.<\/p>\n React est \u00e9galement une application \u00e0 page unique. Ainsi, au lieu d’envoyer une requ\u00eate au serveur \u00e0 chaque fois qu’une nouvelle page doit \u00eatre rendue, le contenu de la page est charg\u00e9 directement \u00e0 partir des composants React. Cela conduit \u00e0 un rendu plus rapide sans rechargement de la page.<\/p>\n Dans la plupart des cas, la syntaxe utilis\u00e9e pour construire des applications React est appel\u00e9e JSX (JavaScript XML), qui est une extension syntaxique de JavaScript<\/a>. Cela nous permet de combiner la logique JavaScript et la logique de l’interface utilisateur d’une mani\u00e8re unique. Avec JSX, nous \u00e9liminons le besoin d’interagir avec le DOM en utilisant des m\u00e9thodes comme Bien que l’utilisation de JSX ne soit pas obligatoire, elle facilite le d\u00e9veloppement des applications React.<\/p>\n Voici un exemple de la fa\u00e7on dont nous pouvons utiliser JSX dans React :<\/p>\n Dans le code ci-dessus, nous avons utilis\u00e9 un composant fonctionnel React pour rendre un morceau de texte au navigateur. Le nom du composant est Nous avons ensuite transmis cette variable au balisage en utilisant des accolades. Il ne s’agit pas de HTML mais de la syntaxe d’\u00e9criture du code \u00e0 l’aide de JSX.<\/p>\n Dans la prochaine section, nous examinerons certaines des raisons pour lesquelles vous devriez utiliser React.<\/p>\n De nombreux d\u00e9veloppeurs<\/a> et organisations ont choisi React plut\u00f4t que d’autres biblioth\u00e8ques ou frameworks ; voici pourquoi :<\/p>\n React a \u00e9t\u00e9 utilis\u00e9 par de nombreux ing\u00e9nieurs frontend dans des start-ups et des entreprises \u00e9tablies comme Facebook, Netflix, Instagram, Yahoo, Uber, The New York Times, et plus encore.<\/p>\n Bien que toutes les entreprises cit\u00e9es ci-dessus n’aient pas construit l’ensemble de leur produit \u00e0 l’aide de React, certaines de leurs pages ont \u00e9t\u00e9 construites avec React. Cela s’explique par les hautes performances, la facilit\u00e9 d’utilisation et l’\u00e9volutivit\u00e9 de React.<\/p>\n React est g\u00e9n\u00e9ralement utilis\u00e9 pour construire l’interface utilisateur (frontend) des applications web. Il s’accompagne d’un rendu rapide des pages et de performances accrues. React peut \u00eatre utilis\u00e9 pour construire n’importe quel produit qui fonctionne sur le web.<\/p>\n Voici quelques-unes des choses que React est g\u00e9n\u00e9ralement utilis\u00e9 pour construire :<\/p>\n React poss\u00e8de une pl\u00e9thore de fonctionnalit\u00e9s \u00e9tonnantes qui continuent \u00e0 en faire une option populaire pour les d\u00e9veloppeurs.<\/p>\n Voici quelques-unes des principales fonctionnalit\u00e9s de React :<\/p>\n React est peut-\u00eatre un outil populaire pour construire nos interfaces utilisateur, mais il y a encore des raisons pour lesquelles certains d\u00e9veloppeurs ou d\u00e9butants choisissent de ne pas l’utiliser.<\/p>\n Dans cette section, nous allons parler des avantages et des inconv\u00e9nients de React.<\/p>\n Voici les avantages de l’utilisation de React :<\/p>\n Voici les inconv\u00e9nients de l’utilisation de React :<\/p>\n Dans cette section, nous parlerons d’abord des conditions pr\u00e9alables \u00e0 l’utilisation de React, puis nous nous plongerons dans la configuration d’une application React, la cr\u00e9ation de composants, la gestion des \u00e9v\u00e9nements et le travail avec les \u00e9tats, les hooks<\/a> et les props dans React.<\/p>\n Avant d’utiliser React, vous devez avoir une bonne compr\u00e9hension et une bonne exp\u00e9rience de JavaScript<\/a>. Voici quelques-uns des sujets JavaScript que nous vous recommandons de r\u00e9viser avant d’utiliser React :<\/p>\n La plupart des sujets ci-dessus rel\u00e8vent de l’ES6. Vous devez \u00e9galement avoir de l’exp\u00e9rience dans l’utilisation du HTML<\/a>, car le balisage fait partie de la syntaxe JSX.<\/p>\n Avant d’installer React, assurez-vous que Node.js est install\u00e9 sur votre ordinateur<\/a>.<\/p>\n Une fois que vous l’avez install\u00e9, ex\u00e9cutez la commande ci-dessous dans votre terminal :<\/p>\n Si tout s’est bien pass\u00e9, la commande ci-dessus devrait vous indiquer quelle version de Node.js est actuellement install\u00e9e sur votre ordinateur.<\/p>\n Ensuite, nous allons ex\u00e9cuter une autre commande pour commencer \u00e0 installer React.<\/p>\n Tout d’abord, cr\u00e9ez un dossier ou naviguez jusqu’\u00e0 l’emplacement o\u00f9 vous voulez que l’application React soit install\u00e9e, puis ex\u00e9cutez la commande ci-dessous dans votre terminal :<\/p>\n La commande ci-dessus va installer React dans un dossier appel\u00e9 react-kit<\/strong>.<\/p>\n Une fois l’installation termin\u00e9e, ouvrez votre dossier React nouvellement install\u00e9 dans l’\u00e9diteur de code<\/a> de votre choix. Nous utiliserons Visual Studio Code dans ce tutoriel. Visual Studio Code est livr\u00e9 avec un terminal int\u00e9gr\u00e9. Si vous comptez utiliser un autre terminal comme Git Bash ou CMD, il vous suffit de naviguer dans le r\u00e9pertoire de votre application React et d’ex\u00e9cuter la commande ci-dessous :<\/p>\n Cette commande met en route votre serveur de d\u00e9veloppement. Apr\u00e8s un petit moment, vous devriez avoir cette page ci-dessous rendue sur localhost:3000<\/strong> dans votre navigateur :<\/p>\n Si vous avez suivi jusqu’\u00e0 ce point, alors vous avez install\u00e9 avec succ\u00e8s votre premi\u00e8re application React. F\u00e9licitations !<\/p>\n Lorsque vous jetez un coup d\u2019\u0153il \u00e0 votre structure de dossiers, vous verrez un dossier appel\u00e9 public<\/strong>. Ce dossier contient un fichier index.html<\/strong> o\u00f9 notre code sera inject\u00e9 et servi au navigateur.<\/p>\n Le dossier src<\/strong> est l’endroit o\u00f9 se trouveront toute notre logique, notre style et notre balisage ; c’est notre dossier de d\u00e9veloppement avec le fichier App.js<\/strong> faisant office de composant racine. Le code de ce fichier est ce que nous avons dans l’image ci-dessus.<\/p>\n Ouvrez le fichier App.js<\/strong> et apportez quelques modifications au fichier, puis enregistrez pour voir qu’il se refl\u00e8te automatiquement dans le navigateur.<\/p>\n Tout est pr\u00eat ? Maintenant, \u00e9crivons un peu de code !<\/p>\n Il existe deux principaux types de composants dans React : les composants de classe et les composants fonctionnels. La documentation de React est actuellement en cours de r\u00e9\u00e9criture \u00e0 l’aide de Hooks, qui est une fonctionnalit\u00e9 que l’on trouve dans les composants fonctionnels. Nous utiliserons \u00e9galement les composants fonctionnels dans ce tutoriel car ils sont devenus les composants les plus utilis\u00e9s pour les applications React.<\/p>\n Dans la plupart des cas, les composants renvoient du code HTML<\/a> avec un m\u00e9lange de valeurs dynamiques cr\u00e9\u00e9es \u00e0 l’aide de JavaScript. Les composants sont cr\u00e9\u00e9s comme des fonctions en JavaScript.<\/p>\n Regardons un exemple de composant de classe dans React.<\/p>\n Chaque composant de classe doit inclure l’instruction Dans le composant ci-dessus, nous avons cr\u00e9\u00e9 une variable d’\u00e9tat appel\u00e9e Lors du rendu dans le navigateur, nous verrons le message \u00ab I am learning JavaScript \u00bb affich\u00e9 sur la page.<\/p>\n Dans cette section, nous allons recr\u00e9er l’exemple de la derni\u00e8re section en utilisant un composant fonctionnel.<\/p>\n Ajoutez cette fonction \u00e0 votre fichier :<\/p>\n Le nom de notre composant est le m\u00eame : Ce composant poss\u00e8de \u00e9galement une variable Les \u00e9v\u00e9nements utilis\u00e9s dans React sont enti\u00e8rement similaires \u00e0 ceux que nous utilisons en HTML<\/a>. La seule diff\u00e9rence ici est que les \u00e9v\u00e9nements React sont \u00e9crits en syntaxe camelCase. Ainsi, \u00ab onclick \u00bb sera \u00ab onClick \u00bb dans React, \u00ab onchange \u00bb sera \u00ab onChange \u00bb, et ainsi de suite.<\/p>\n Lorsque nous transmettons un \u00e9v\u00e9nement en tant qu’attribut dans une balise HTML, nous utilisons des accolades : Voici un exemple (dans le fichier App.js<\/strong>) :<\/p>\n Dans le code ci-dessus, nous avons cr\u00e9\u00e9 une fonction qui alerte un message dans le navigateur. Nous avons \u00e9galement cr\u00e9\u00e9 un bouton qui appelle cette fonction lorsqu’il est cliqu\u00e9. Le gestionnaire d’\u00e9v\u00e9nements utilis\u00e9 ici est le gestionnaire d’\u00e9v\u00e9nements Vous avez remarqu\u00e9 que le nom de la fonction \u00e9tait entour\u00e9 de crochets et non de guillemets. C’est ainsi que l’on peut transmettre des valeurs dynamiques comme les noms de variables et de fonctions dans le balisage lorsqu’on utilise JSX.<\/p>\n De plus, au lieu d’utiliser \u00ab class \u00bb comme nous le ferions en utilisant HTML, nous utilisons \u00ab className \u00bb. Ceci est d\u00fb au fait que \u00ab class \u00bb est un mot r\u00e9serv\u00e9 en JavaScript.<\/p>\n Nous avons export\u00e9 notre composant \u00e0 la derni\u00e8re ligne. Cela nous permet de les importer dans d’autres composants.<\/p>\n Pour g\u00e9rer l’\u00e9tat de notre application dans React, nous utilisons un Hook appel\u00e9 Avec les Hooks, nous pouvons g\u00e9rer l’\u00e9tat de notre composant, et m\u00eame ex\u00e9cuter certains effets lorsque nos variables d’\u00e9tat sont rendues pour la premi\u00e8re fois ou modifi\u00e9es.<\/p>\n Sans le hook Voyons un exemple.<\/p>\n Maintenant, regardons ce que nous venons de faire.<\/p>\n Nous avons d’abord import\u00e9 le hook Ensuite, nous avons cr\u00e9\u00e9 une fonction appel\u00e9e changeName<\/strong>, qui utilise la fonction setName<\/strong> pour mettre \u00e0 jour la valeur de la variable nom<\/strong>.<\/p>\n Dans notre balisage, une fois que le bouton est cliqu\u00e9, \u00ab John \u00bb est chang\u00e9 en \u00ab James \u00bb.<\/p>\n Dans la section suivante, nous verrons comment utiliser un autre Hook dans React.<\/p>\n Dans la derni\u00e8re section, nous avons vu comment g\u00e9rer l’\u00e9tat de notre application \u00e0 l’aide du hook Le Hook Voyons quelques exemples :<\/p>\n La premi\u00e8re chose que nous avons faite ici a \u00e9t\u00e9 d’importer le hook Chaque fois que nous cliquons sur le bouton, la variable name<\/strong> est augment\u00e9e d’une unit\u00e9. Cette modification de la valeur de name<\/strong> fait ensuite en sorte que le hook Dans la prochaine section, nous parlerons des Props et du flux de donn\u00e9es entre les composants.<\/p>\n Les Props nous permettent de faire passer des donn\u00e9es d’un composant \u00e0 un autre. Cela rend le flux de donn\u00e9es dans notre application dynamique et maintenable. Props est l’abr\u00e9viation de properties (propri\u00e9t\u00e9s).<\/p>\n Voyons un exemple de la fa\u00e7on dont nous pouvons utiliser les Props.<\/p>\n Voici \u00e0 quoi ressemble notre fichier App.js<\/strong>:<\/p>\n Nous cr\u00e9ons un autre composant appel\u00e9 Bio.js<\/strong> qui ressemble \u00e0 ceci :<\/p>\n Ensuite, nous allons importer le composant Bio<\/strong> dans notre composant App<\/strong> comme ceci :<\/p>\n La premi\u00e8re ligne est celle o\u00f9 nous avons import\u00e9 le composant Bio<\/strong>. Nous avons ensuite plac\u00e9 le composant entre les balises Vous comprenez maintenant comment le code peut \u00eatre r\u00e9utilisable dans React. Mais ce code est statique ; il sera le m\u00eame dans tous les composants dans lesquels il est utilis\u00e9. Cela ne sera pas efficace dans les cas o\u00f9 nous voudrions utiliser le m\u00eame composant mais avec des informations diff\u00e9rentes.<\/p>\n Corrigeons cela en utilisant Props.<\/p>\n Dans le composant Bio.js<\/strong>, faites ceci :<\/p>\n Nous avons d’abord d\u00e9structur\u00e9 et transmis Nous avons export\u00e9 le composant dans la derni\u00e8re ligne de code : Pour l’instant, nous ne voyons pas de valeur \u00e0 afficher. Nous ferons cela dans le composant App<\/strong>; voici comment :<\/p>\n Nous avons ajout\u00e9 des attributs \u00e0 notre balise Bio<\/strong> correspondant aux props que nous avons cr\u00e9\u00e9s pr\u00e9c\u00e9demment. Toute valeur que nous passons dans ces attributs sera rendue sur le navigateur. Ceci est important pour les composants qui seront utilis\u00e9s dans plusieurs composants mais qui n\u00e9cessitent des donn\u00e9es diff\u00e9rentes.<\/p>\n Ce tutoriel vous a donn\u00e9 les connaissances fondamentales n\u00e9cessaires pour commencer \u00e0 cr\u00e9er des applications web avec React, mais ce n’est pas tout ce qu’il y a \u00e0 savoir sur React. Il y a encore d’autres fonctionnalit\u00e9s n\u00e9cessaires pour construire une application efficace avec React comme le routage dans les applications qui ont plus d’une page et la gestion d’un \u00e9tat unique en utilisant des outils comme Redux.<\/p>\n Le meilleur endroit pour commencer \u00e0 en savoir plus sur React est la documentation React<\/a>. Vous pouvez \u00e9galement consulter la documentation b\u00eata<\/a> en cours de r\u00e9\u00e9criture \u00e0 l’aide de hooks. React en tant que biblioth\u00e8que frontend n’a cess\u00e9 de cro\u00eetre massivement par rapport aux autres biblioth\u00e8ques ou frameworks<\/a> dans la communaut\u00e9 des d\u00e9veloppeurs et ne montre aucun signe d’arr\u00eat. Vous pouvez trouver React sur la feuille de route de tout d\u00e9veloppeur web moderne.<\/p>\n Avec l’adoption actuelle de la technologie web3 par de plus en plus de d\u00e9veloppeurs, React est rest\u00e9 l’outil pr\u00e9f\u00e9r\u00e9 pour construire le frontend des applications d\u00e9centralis\u00e9es (DApps).<\/p>\n Vous pouvez construire une vari\u00e9t\u00e9 d’applications avec React, des simples applications web de liste de t\u00e2ches aux places de march\u00e9, tableaux de bord, et ainsi de suite.<\/p>\n React peut \u00eatre utilis\u00e9 avec de nombreuses technologies comme Bootstrap, Tailwind CSS<\/a>, Axios, Redux, Firebase, et bien plus encore. Nous pouvons \u00e9galement utiliser React avec Node.js et d’autres langages<\/a> backend pour construire des applications full-stack<\/a> et des applications web qui fonctionnent \u00e0 la vitesse de l’\u00e9clair.<\/p>\n","protected":false},"excerpt":{"rendered":" Le secteur du d\u00e9veloppement web a connu une croissance constante ces derni\u00e8res ann\u00e9es. Et comme cette croissance se poursuit, de nouvelles technologies apparaissent constamment pour aider …<\/p>\n","protected":false},"author":240,"featured_media":59357,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[751,535,469,714,581],"topic":[979,1004],"class_list":["post-59293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-frontend-development","tag-javascript","tag-javascript-libraries","tag-react","tag-react-js","topic-frameworks-javascript","topic-react"],"yoast_head":"\n
\nQu’est-ce que React ?<\/h2>\n
document.getElementById<\/code>, querySelector<\/code>, et d’autres m\u00e9thodes de manipulation du DOM.<\/p>\nfunction App() {\n const greetings = \"Hello World\";\n return (\n <div className=\"App\">\n <h1> {greetings} <\/h1>\n <\/div>\n );\n }\n}<\/code><\/pre>\nApp<\/code>. Nous avons cr\u00e9\u00e9 une variable avant la fonction render()<\/code>.<\/p>\nPourquoi React ?<\/h2>\n
\n
\n
\n
\n
Qui utilise React ?<\/h2>\n
Cas d’utilisation de React<\/h2>\n
\n
Caract\u00e9ristiques de React<\/h2>\n
\n
\n
\n
Avantages et inconv\u00e9nients de React<\/h2>\n
\n
\n
D\u00e9marrer avec React<\/h2>\n
Conditions pr\u00e9alables \u00e0 l’utilisation de React<\/h3>\n
\n
let<\/code> et const<\/code><\/li>\n<\/ul>\nComment installer React<\/h3>\n
node -v<\/code><\/pre>\nnpx create-react-app react-kit<\/code><\/pre>\nnpm run start<\/code><\/pre>\n![\"Serveur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/react-npm-start.png\")
Les composants dans React<\/h3>\n
Cr\u00e9ation d’un composant de classe React<\/h3>\n
React.Component<\/code> et l’instruction render() subclass.<\/code><\/p>\nclass Student extends React.Component {\n constructor() {\n super();\n this.state = {language: \"JavaScript\"};\n }\n render() {\n return <p>I am learning {this.state.language} <\/p>;\n }\n}<\/code><\/pre>\nlanguage<\/code> avec une valeur de cha\u00eene de caract\u00e8res de \u00ab JavaScript \u00bb. Nous avons ensuite utilis\u00e9 cette variable dans notre balisage. Cet exemple montre comment nous pouvons m\u00e9langer JavaScript et HTML sans faire r\u00e9f\u00e9rence \u00e0 aucune m\u00e9thode DOM.<\/p>\nCr\u00e9ation d’un composant fonctionnel React<\/h3>\n
function Student() {\n const language = \"JavaScript\";\n return (\n <div>\n <p>I am learning { language } <\/p>\n <\/div>\n );\n}<\/code><\/pre>\nStudent<\/code>. Commencez toujours le nom de vos composants par une majuscule. Cette variable a \u00e9galement \u00e9t\u00e9 pass\u00e9e dans le balisage comme nous l’avons fait dans la derni\u00e8re section sans manipuler le DOM \u00e0 l’aide de m\u00e9thodes JavaScript DOM vanille.<\/p>\nStudent<\/code> qui a \u00e9t\u00e9 rendue, mais au fur et \u00e0 mesure que nous progressons dans le tutoriel, nous utiliserons un Hook appel\u00e9 useState<\/code> Hook pour cr\u00e9er nos variables d’\u00e9tat.<\/p>\nGestion des \u00e9v\u00e9nements dans React<\/h3>\n
onClick={changeName}<\/code> au lieu des guillemets onClick=\u201dchangeName\u201d<\/code><\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nonClick<\/code>.<\/p>\nTravailler avec les \u00e9tats dans React<\/h3>\n
useState<\/code> Hook. Les Hooks nous permettent d’acc\u00e9der \u00e0 des fonctionnalit\u00e9s suppl\u00e9mentaires de React sans \u00e9crire une classe.<\/p>\nuseState<\/code> dans un composant fonctionnel, toute modification apport\u00e9e \u00e0 nos variables d’\u00e9tat ne sera pas r\u00e9percut\u00e9e dans le DOM et l’\u00e9tat restera donc inchang\u00e9.<\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseState<\/code> de React. Nous avons ensuite cr\u00e9\u00e9 une variable d’\u00e9tat appel\u00e9e name<\/strong> et une fonction – setName<\/strong> – qui sera utilis\u00e9e pour mettre \u00e0 jour la valeur de la variable name<\/strong>. La valeur initiale de la variable name est stock\u00e9e dans le useState<\/code> Hook sous le nom de \u00ab John \u00bb.<\/p>\nTravailler avec des hooks dans React<\/h3>\n
useStatet<\/code>. Dans cette section, nous allons voir comment utiliser le hook useEffect<\/code>.<\/p>\nuseEffect<\/code> ex\u00e9cute un effet \u00e0 chaque fois qu’un changement se produit dans un \u00e9tat. Par d\u00e9faut, ce hook s’ex\u00e9cute au premier rendu et \u00e0 chaque fois que l’\u00e9tat est mis \u00e0 jour mais nous pouvons configurer et attacher un effet \u00e0 une variable d’\u00e9tat respective.<\/p>\nimport { useState, useEffect } from \"react\";\nfunction App() {\n const [day, setDay] = useState(1);\n useEffect(() => {\n console.log(`You are in day ${day} of the year`);\n });\n return (\n <div>\n <button onClick={() => setDay(day + 1)}>Click to increase day<\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseEffect<\/code>.<\/p>\nuseEffect<\/code> enregistre un message dans la console – cela se produit chaque fois que la variable name<\/strong> change.<\/p>\nTravailler avec des Props dans React<\/h3>\n
function App() {\n return (\n <div>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nfunction Bio() {\n return (\n <div>\n <p>My name is John<\/p>\n <p>I am a JavaScript developer<\/p>\n <\/div>\n );\n}\nexport default Bio;<\/code><\/pre>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\ndiv<\/code> dans notre composant App<\/strong>. Lorsque vous visualisez ceci dans le navigateur, vous verrez le code que nous avons cr\u00e9\u00e9 dans le composant Bio<\/strong> \u00eatre rendu.<\/p>\nfunction Bio({name, language}) {\n return (\n <div>\n <p>My name is { name }<\/p>\n <p>I am a { language } developer<\/p>\n <\/div>\n );\n\n}\nexport default Bio;<\/code><\/pre>\nname<\/code> et language<\/code> comme param\u00e8tres. Ces param\u00e8tres ont ensuite \u00e9t\u00e9 utilis\u00e9s dynamiquement dans notre balisage.<\/p>\n export default Bio;<\/code> pour nous permettre de l’importer dans tout autre composant n\u00e9cessitant sa logique.<\/p>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio name=\"James\" language=\"Python\"\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nO\u00f9 en apprendre plus<\/h2>\n
\n<\/p>\nR\u00e9sum\u00e9<\/h2>\n