{"id":69630,"date":"2023-06-01T10:02:21","date_gmt":"2023-06-01T09:02:21","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=69630&#038;preview=true&#038;preview_id=69630"},"modified":"2023-09-15T13:59:10","modified_gmt":"2023-09-15T12:59:10","slug":"javascript-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/","title":{"rendered":"Fonctionnalit\u00e9s JavaScript \u00e0 conna\u00eetre pour ma\u00eetriser React"},"content":{"rendered":"<p>De nos jours, <a href=\"https:\/\/kinsta.com\/fr\/sujets\/react\/\">React<\/a> est l&rsquo;une des <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">biblioth\u00e8ques JavaScript<\/a> les plus populaires. Elle peut \u00eatre utilis\u00e9e pour cr\u00e9er des applications dynamiques et responsives, permet de meilleures performances et peut \u00eatre facilement \u00e9tendue. La logique sous-jacente est bas\u00e9e sur des composants qui peuvent \u00eatre r\u00e9utilis\u00e9s dans diff\u00e9rents contextes, ce qui r\u00e9duit la n\u00e9cessit\u00e9 d&rsquo;\u00e9crire plusieurs fois le m\u00eame code. En bref, avec React, vous pouvez cr\u00e9er des <a href=\"https:\/\/kinsta.com\/fr\/sujets\/react\/\">applications efficaces et puissantes<\/a>.<\/p>\n<p>Il n&rsquo;y a donc jamais eu de meilleur moment pour apprendre \u00e0 cr\u00e9er des applications React.<\/p>\n<p>Cependant, sans une solide compr\u00e9hension de certaines fonctionnalit\u00e9s cl\u00e9s de <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, la cr\u00e9ation d&rsquo;applications React pourrait s&rsquo;av\u00e9rer difficile, voire impossible.<\/p>\n<p>C&rsquo;est pourquoi nous avons compil\u00e9 une liste de fonctionnalit\u00e9s et de concepts JavaScript que vous devez conna\u00eetre avant de commencer \u00e0 utiliser React. Mieux vous comprendrez ces concepts, plus il vous sera facile de cr\u00e9er des applications React professionnelles.<\/p>\n<p>Ceci \u00e9tant dit, voici ce que nous allons aborder dans cet article :<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>JavaScript et ECMAScript<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a> est un langage de script populaire utilis\u00e9 avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a> et CSS pour cr\u00e9er des pages web dynamiques. Alors que le HTML est utilis\u00e9 pour cr\u00e9er la structure d&rsquo;une page web et le CSS pour cr\u00e9er le style et la mise en page de ses \u00e9l\u00e9ments, JavaScript est le langage utilis\u00e9 pour ajouter du comportement \u00e0 la page, c&rsquo;est-\u00e0-dire pour cr\u00e9er de la fonctionnalit\u00e9 et de l&rsquo;interactivit\u00e9.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JavaScript a \u00e9t\u00e9 d\u00e9velopp\u00e9 par Brendan Eich de Netscape Communications en 1995 dans le but d&rsquo;ajouter de l&rsquo;interactivit\u00e9 aux pages web dans le navigateur Netscape Navigator.<\/strong><\/p>\n<\/aside>\n\n<p>Le langage a depuis \u00e9t\u00e9 adopt\u00e9 par les principaux navigateurs et un document a \u00e9t\u00e9 r\u00e9dig\u00e9 pour d\u00e9crire la mani\u00e8re dont JavaScript \u00e9tait cens\u00e9 fonctionner : <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\" target=\"_blank\" rel=\"noopener noreferrer\">la norme ECMAScript<\/a>.<\/p>\n<p>Depuis 2015, une mise \u00e0 jour de la norme ECMAScript est publi\u00e9e chaque ann\u00e9e, ce qui signifie que de nouvelles fonctionnalit\u00e9s sont ajout\u00e9es \u00e0 JavaScript chaque ann\u00e9e.<\/p>\n<p><a href=\"https:\/\/262.ecma-international.org\/6.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 2015<\/a> \u00e9tait la sixi\u00e8me version de la norme et est donc \u00e9galement connue sous le nom de <strong>ES6<\/strong>. Les versions suivantes sont marqu\u00e9es par une progression, de sorte que nous appelons ECMAScript 2016 ES7, ECMAScript 2017 ES8, et ainsi de suite.<\/p>\n<p>En raison de la fr\u00e9quence \u00e0 laquelle de nouvelles fonctionnalit\u00e9s sont ajout\u00e9es \u00e0 la norme, certaines d&rsquo;entre elles peuvent ne pas \u00eatre prises en charge par tous les navigateurs. Comment pouvez-vous donc vous assurer que les derni\u00e8res fonctionnalit\u00e9s JavaScript que vous avez ajout\u00e9es \u00e0 votre application JS fonctionneront comme pr\u00e9vu dans tous les navigateurs web ?<\/p>\n<p>Trois possibilit\u00e9s s&rsquo;offrent \u00e0 vous :<\/p>\n<ol>\n<li>Attendre que tous les principaux navigateurs prennent en charge les nouvelles fonctionnalit\u00e9s. Mais si vous avez absolument besoin de cette nouvelle fonctionnalit\u00e9 JS pour votre application, cette option n&rsquo;est pas envisageable.<\/li>\n<li>Utilisez un Polyfill, qui est \u00ab un morceau de code (g\u00e9n\u00e9ralement JavaScript sur le web) utilis\u00e9 pour fournir des fonctionnalit\u00e9s modernes sur des navigateurs plus anciens qui ne les prennent pas en charge de mani\u00e8re native \u00bb (voir \u00e9galement <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Polyfill\" target=\"_blank\" rel=\"noopener noreferrer\">les documents web de mdn<\/a>).<\/li>\n<li>Utilisez un transpileur JavaScript tel que <a href=\"https:\/\/babeljs.io\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a> ou <a href=\"https:\/\/github.com\/google\/traceur-compiler\" target=\"_blank\" rel=\"noopener noreferrer\">Traceur<\/a>, qui convertit le code ECMAScript 2015+ en une version JavaScript support\u00e9e par tous les navigateurs.<\/li>\n<\/ol>\n\n<h2>D\u00e9clarations et expressions<\/h2>\n<p>Comprendre la diff\u00e9rence entre les d\u00e9clarations et les expressions est essentiel lors de la construction d&rsquo;applications React. Revenons donc un instant sur les concepts de base de la programmation.<\/p>\n<p>Un programme informatique est une liste d&rsquo;instructions \u00e0 ex\u00e9cuter par un ordinateur. Ces instructions sont appel\u00e9es <strong>instructions<\/strong>.<\/p>\n<p>Contrairement aux instructions, les <strong>expressions<\/strong> sont des fragments de code qui produisent une valeur. Dans une instruction, une expression est une partie qui renvoie une valeur et nous la voyons g\u00e9n\u00e9ralement \u00e0 droite d&rsquo;un signe \u00e9gal.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Une d\u00e9claration est un bloc de code qui fait quelque chose.<\/strong><\/p>\n<\/aside>\n\n<p>Alors que :<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Une expression est un fragment de code qui produit une valeur.<\/strong><\/p>\n<\/aside>\n\n<p>Les d\u00e9clarations JavaScript peuvent \u00eatre des blocs ou des lignes de code qui se terminent g\u00e9n\u00e9ralement par des points-virgules ou sont plac\u00e9es entre crochets.<\/p>\n<p>Voici un exemple simple de d\u00e9claration en JavaScript :<\/p>\n<pre><code class=\"language-js\">document.getElementById(\"hello\").innerHTML = \"Hello World!\";<\/code><\/pre>\n<p>La d\u00e9claration ci-dessus \u00e9crit <code>\"Hello World!\"<\/code> dans un \u00e9l\u00e9ment DOM avec <code>id=\"hello\"<\/code>.<\/p>\n<p>Comme nous l&rsquo;avons d\u00e9j\u00e0 mentionn\u00e9, les expressions produisent une valeur ou sont elles-m\u00eames une valeur. Consid\u00e9rez l&rsquo;exemple suivant :<\/p>\n<pre><code class=\"language-js\">msg = document.getElementById(\"hello\").value;<\/code><\/pre>\n<p><code>document.getElementById(\"hello\").value<\/code> est une expression car elle renvoie une valeur.<\/p>\n<p>Un autre exemple devrait aider \u00e0 clarifier la diff\u00e9rence entre les expressions et les d\u00e9clarations :<\/p>\n<pre><code class=\"language-js\">const msg = \"Hello World!\";\nfunction sayHello( msg ) {\n\tconsole.log( msg );\n}<\/code><\/pre>\n<p>Dans l&rsquo;exemple ci-dessus,<\/p>\n<ul>\n<li>la premi\u00e8re ligne est une instruction, o\u00f9 <code>\"Hello World!\"<\/code> est une expression,<\/li>\n<li>la d\u00e9claration de la fonction est une instruction, o\u00f9 le param\u00e8tre <code>msg<\/code> pass\u00e9 \u00e0 la fonction est une expression,<\/li>\n<li>la ligne qui imprime le affiche dans la console est une instruction, o\u00f9 le param\u00e8tre <code>msg<\/code> est \u00e0 nouveau une expression.<\/li>\n<\/ul>\n<h3>Pourquoi les expressions sont importantes dans React<\/h3>\n<p>Lorsque vous <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-react\/\">construisez une application React<\/a>, vous pouvez <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" target=\"_blank\" rel=\"noopener noreferrer\">injecter des expressions JavaScript dans votre code JSX<\/a>. Par exemple, vous pouvez passer une variable, \u00e9crire un gestionnaire d&rsquo;\u00e9v\u00e9nement ou une condition. Pour cela, vous devez inclure votre code JS entre crochets.<\/p>\n<p>Par exemple, vous pouvez passer une variable :<\/p>\n<pre><code class=\"language-javascript\">const Message = () =&gt; {\n\tconst name = \"Carlo\";\n\treturn &lt;p&gt;Welcome {name}!&lt;\/p&gt;;\n}<\/code><\/pre>\n<p>En bref, les crochets curly indiquent \u00e0 votre transpondeur de traiter le code entre crochets comme du code JS. Tout ce qui se trouve avant la balise ouvrante <code>&lt;p&gt;<\/code> et apr\u00e8s la balise fermante <code>&lt;\/p&gt;<\/code> est du code JavaScript normal. Tout ce qui se trouve \u00e0 l&rsquo;int\u00e9rieur des balises d&rsquo;ouverture <code>&lt;p&gt;<\/code> et de fermeture <code>&lt;\/p&gt;<\/code> est trait\u00e9 comme du code JSX.<\/p>\n<p>Voici un autre exemple :<\/p>\n<pre><code class=\"language-jsx\">const Message = () =&gt; {\t\n\tconst name = \"Ann\";\n\tconst heading = &lt;h3&gt;Welcome {name}&lt;\/h3&gt;;\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t{heading}\n\t\t\t&lt;p&gt;This is your dashboard.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Vous pouvez \u00e9galement transmettre un objet :<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22',\n\t\tdescription: 'Content Writer'\n\t}\n\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h2&gt;Welcome {person.name}&lt;\/h2&gt;\n\t\t\t&lt;img\n\t\t\t\tclassName=\"card\"\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\/&gt;\n\t\t\t&lt;p&gt;Description: {person.description}.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Vous trouverez ci-dessous un exemple plus complet :<\/p>\n<pre><code class=\"language-jsx\">render(){\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: {\n\t\t\tboxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', width: '200px'\n\t\t}\n\t}\n\n\treturn (\n\t\t&lt;div style={person.theme}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Remarquez les doubles crochets dans les attributs <code>style<\/code> des \u00e9l\u00e9ments <code>img<\/code> et <code>div<\/code>. Nous avons utilis\u00e9 des doubles crochets pour transmettre deux objets contenant des styles de carte et d&rsquo;image.<\/p>\n<figure id=\"attachment_152320\" aria-describedby=\"caption-attachment-152320\" style=\"width: 1360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152320 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/card-example.jpg\" alt=\"Un exemple de carte construit avec React\" width=\"1360\" height=\"694\"><figcaption id=\"caption-attachment-152320\" class=\"wp-caption-text\">Un exemple de carte construit avec React<\/figcaption><\/figure>\n<p>Vous avez d\u00fb remarquer que dans tous les exemples ci-dessus, nous avons inclus des expressions JavaScript dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\">JSX<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JSX n&rsquo;accepte que les expressions JavaScript entre crochets. Vous n&rsquo;\u00eates pas autoris\u00e9 \u00e0 \u00e9crire des instructions dans votre code JSX.<\/strong><\/p>\n<p><strong>Cela inclut :<\/strong><\/p>\n<ul>\n<li><strong>Les variables<\/strong><\/li>\n<li><strong>Les cha\u00eenes de caract\u00e8res entre guillemets<\/strong><\/li>\n<li><strong>Les appels de fonction<\/strong><\/li>\n<li><strong>Les objets<\/strong><\/li>\n<li><strong>Les expressions conditionnelles<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<h2>L&rsquo;immutabilit\u00e9 dans React<\/h2>\n<p>La mutabilit\u00e9 et l&rsquo;immutabilit\u00e9 sont <a href=\"https:\/\/en.wikipedia.org\/wiki\/Immutable_object\" target=\"_blank\" rel=\"noopener noreferrer\">deux concepts cl\u00e9s<\/a> de la programmation orient\u00e9e objet et fonctionnelle.<\/p>\n<p>L&rsquo;immutabilit\u00e9 signifie qu&rsquo;une valeur ne peut pas \u00eatre modifi\u00e9e apr\u00e8s sa cr\u00e9ation. La mutabilit\u00e9 signifie, bien s\u00fbr, le contraire.<\/p>\n<p>En Javascript, les <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\" target=\"_blank\" rel=\"noopener noreferrer\">valeurs primitives<\/a> sont <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Immutable\" target=\"_blank\" rel=\"noopener noreferrer\">immuables<\/a>, ce qui signifie qu&rsquo;une fois qu&rsquo;une valeur primitive est cr\u00e9\u00e9e, elle ne peut plus \u00eatre modifi\u00e9e. A l&rsquo;inverse, les tableaux et les objets sont mutables car leurs propri\u00e9t\u00e9s et leurs \u00e9l\u00e9ments peuvent \u00eatre modifi\u00e9s sans r\u00e9affectation d&rsquo;une nouvelle valeur.<\/p>\n<p>Plusieurs raisons justifient l&rsquo;utilisation d&rsquo;objets immuables en JavaScript :<\/p>\n<ul>\n<li>Am\u00e9lioration des performances<\/li>\n<li>R\u00e9duction de la consommation de m\u00e9moire<\/li>\n<li>S\u00e9curit\u00e9 des threads<\/li>\n<li>Codage et d\u00e9bogage plus faciles<\/li>\n<\/ul>\n<p>Suivant le mod\u00e8le de l&rsquo;immutabilit\u00e9, une fois qu&rsquo;une variable ou un objet est assign\u00e9, il ne peut pas \u00eatre r\u00e9assign\u00e9 ou modifi\u00e9. Lorsque vous devez modifier des donn\u00e9es, vous devez en cr\u00e9er une copie et en modifier le contenu, en laissant le contenu original inchang\u00e9.<\/p>\n<p><strong>L&rsquo;immuabilit\u00e9<\/strong> est \u00e9galement un concept cl\u00e9 de React.<\/p>\n<p>La <a href=\"https:\/\/react.dev\/reference\/react\/Component#state\" target=\"_blank\" rel=\"noopener noreferrer\">documentation de React<\/a> indique que<\/p>\n<blockquote><p>L&rsquo;\u00e9tat d&rsquo;un composant de classe est disponible \u00e0 l&rsquo;adresse <code>this.state<\/code>. Le champ state doit \u00eatre un objet. Ne modifiez pas l&rsquo;\u00e9tat directement. Si vous souhaitez modifier l&rsquo;\u00e9tat, appelez <code>setState<\/code> avec le nouvel \u00e9tat<\/p><\/blockquote>\n<p>.<br \/>\nChaque fois que l&rsquo;\u00e9tat d&rsquo;un composant change, React calcule s&rsquo;il faut rendre \u00e0 nouveau le composant et mettre \u00e0 jour le DOM virtuel. Si React n&rsquo;avait pas de trace de l&rsquo;\u00e9tat pr\u00e9c\u00e9dent, il ne pourrait pas d\u00e9terminer s&rsquo;il faut rendre le composant ou non. La documentation de React en donne un <a href=\"https:\/\/react.dev\/learn\/updating-objects-in-state#treat-state-as-read-only\" target=\"_blank\" rel=\"noopener noreferrer\">excellent exemple<\/a>.<\/p>\n<p>Quelles fonctionnalit\u00e9s JavaScript pouvons-nous utiliser pour garantir l&rsquo;immuabilit\u00e9 de l&rsquo;objet state dans React ? D\u00e9couvrons-le !<\/p>\n<h3>D\u00e9clarer des variables<\/h3>\n<p>Vous avez trois fa\u00e7ons de d\u00e9clarer une variable en JavaScript : <code>var<\/code>, <code>let<\/code>, et <code>const<\/code>.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var#var_hoisting\">L&rsquo;instruction<code>var<\/code><\/a> existe depuis le d\u00e9but de JavaScript. Elle est utilis\u00e9e pour d\u00e9clarer une variable \u00e0 port\u00e9e de fonction ou \u00e0 port\u00e9e globale, en l&rsquo;initialisant \u00e9ventuellement \u00e0 une valeur.<\/p>\n<p>Lorsque vous d\u00e9clarez une variable \u00e0 l&rsquo;aide de <code>var<\/code>, vous pouvez la red\u00e9clarer et la mettre \u00e0 jour \u00e0 la fois dans la port\u00e9e globale et locale. Le code suivant est autoris\u00e9 :<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a variable\nvar msg = \"Hello!\";\n\n\/\/ Redeclare the same variable\nvar msg = \"Goodbye!\"\n\n\/\/ Update the variable\nmsg = \"Hello again!\"<\/code><\/pre>\n<p>les d\u00e9clarations\u00a0<code>var<\/code>\u00a0 sont trait\u00e9es avant l&rsquo;ex\u00e9cution de tout code. Par cons\u00e9quent, d\u00e9clarer une variable n&rsquo;importe o\u00f9 dans le code \u00e9quivaut \u00e0 la d\u00e9clarer au d\u00e9but. Ce comportement est appel\u00e9 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">hoisting<\/a>.<\/p>\n<p>Il convient de noter que seule la d\u00e9claration de la variable est hiss\u00e9e, et non l&rsquo;initialisation, qui n&rsquo;a lieu que lorsque <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Control_flow\" target=\"_blank\" rel=\"noopener noreferrer\">le flux de contr\u00f4le<\/a> atteint l&rsquo;instruction d&rsquo;affectation. Jusqu&rsquo;\u00e0 ce moment, la variable est <code>undefined<\/code>:<\/p>\n<pre><code class=\"language-js\">console.log(msg); \/\/ undefined\nvar msg = \"Hello!\";\nconsole.log(msg); \/\/ Hello!<\/code><\/pre>\n<p>La port\u00e9e d&rsquo;une variable <code>var<\/code> d\u00e9clar\u00e9e dans une fonction JS est <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">l&rsquo;ensemble du corps de cette fonction<\/a>.<\/p>\n<p>Cela signifie que la variable n&rsquo;est pas d\u00e9finie au niveau du bloc, mais au niveau de la fonction enti\u00e8re. Cela entra\u00eene un certain nombre de probl\u00e8mes qui peuvent rendre votre code JavaScript bogu\u00e9 et difficile \u00e0 maintenir.<\/p>\n<p>Pour r\u00e9soudre ces probl\u00e8mes, ES6 a introduit le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\" target=\"_blank\" rel=\"noopener noreferrer\">mot-cl\u00e9<code>let<\/code><\/a>.<\/p>\n<blockquote><p>La d\u00e9claration <code>let<\/code> d\u00e9clare une variable locale <strong>\u00e0 l&rsquo;\u00e9chelle d&rsquo;un bloc<\/strong>, en l&rsquo;initialisant \u00e9ventuellement \u00e0 une valeur.<\/p><\/blockquote>\n<p>Quels sont les avantages de <code>let<\/code> par rapport \u00e0 <code>var<\/code>? En voici quelques-uns :<\/p>\n<ul>\n<li><strong>Le mot-cl\u00e9 <code>let<\/code><\/strong> <strong>d\u00e9clare une variable dans la port\u00e9e<\/strong> d&rsquo;une instruction de bloc, alors que <code>var<\/code>d\u00e9clare une variable globalement ou localement dans une fonction enti\u00e8re, sans tenir compte de la port\u00e9e du bloc.<\/li>\n<li><strong>Les<\/strong> <strong>variables globales <code>let<\/code> ne sont pas des propri\u00e9t\u00e9s de l&rsquo;objet <code>window<\/code> <\/strong>. Vous ne pouvez pas y acc\u00e9der avec <code>window.variableName<\/code>.<\/li>\n<li><strong><code>let<\/code> <\/strong><strong>n&rsquo;est accessible qu&rsquo;apr\u00e8s leur d\u00e9claration<\/strong>. La variable n&rsquo;est pas initialis\u00e9e avant que le flux de contr\u00f4le n&rsquo;atteigne la ligne de code o\u00f9 elle est d\u00e9clar\u00e9e (les d\u00e9clarations let <strong>ne sont pas group\u00e9es<\/strong>).<\/li>\n<li><strong>Red\u00e9clarer une variable avec <code>let<\/code> provoque une erreur <code>SyntaxError<\/code><\/strong>.<\/li>\n<\/ul>\n<p>\u00c9tant donn\u00e9 que les variables d\u00e9clar\u00e9es \u00e0 l&rsquo;aide de <code>var<\/code> ne peuvent pas faire l&rsquo;objet d&rsquo;un contr\u00f4le par bloc, si vous d\u00e9finissez une variable \u00e0 l&rsquo;aide de <code>var<\/code> dans une boucle ou \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une instruction <code>if<\/code>, il est possible d&rsquo;y acc\u00e9der depuis l&rsquo;ext\u00e9rieur du bloc, ce qui peut entra\u00eener des bogues dans le code.<\/p>\n<p>Le code du premier exemple est ex\u00e9cut\u00e9 sans erreur. Remplacez maintenant <code>var<\/code> par <code>let<\/code> dans le bloc de code ci-dessus :<\/p>\n<pre><code class=\"language-js\">console.log(msg);\nlet msg = \"Hello!\";\nconsole.log(msg);<\/code><\/pre>\n<p>Dans le deuxi\u00e8me exemple, l&rsquo;utilisation de <code>let<\/code> au lieu de <code>var<\/code> produit un <code>Uncaught ReferenceError<\/code>:<\/p>\n<figure id=\"attachment_151741\" aria-describedby=\"caption-attachment-151741\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-referenceerror.jpg\" alt=\"Uncaught ReferenceError dans Chrome\" width=\"1176\" height=\"222\"><figcaption id=\"caption-attachment-151741\" class=\"wp-caption-text\">Uncaught ReferenceError dans Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Ainsi, en r\u00e8gle g\u00e9n\u00e9rale, vous devriez toujours utiliser <code>let<\/code> au lieu de <code>var<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>ES6 introduit \u00e9galement un troisi\u00e8me mot-cl\u00e9 : <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\"><code>const<\/code><\/a>.<\/p>\n<p><code>const<\/code> est assez similaire \u00e0 <code>let<\/code>, mais avec une diff\u00e9rence essentielle :<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Les variables d\u00e9clar\u00e9es avec <code>const<\/code> ne peuvent se voir attribuer une valeur qu&rsquo;au moment o\u00f9 elles sont d\u00e9clar\u00e9es<\/strong>.<\/p>\n<\/aside>\n\n<p>Consid\u00e9rez l&rsquo;exemple suivant :<\/p>\n<pre><code class=\"language-js\">const MAX_VALUE = 1000;\nMAX_VALUE = 2000;<\/code><\/pre>\n<p>Le code ci-dessus g\u00e9n\u00e9rerait <a href=\"https:\/\/kinsta.com\/fr\/blog\/erreurs-dans-javascript\/#typeerror\">l&rsquo;erreur de type<\/a> suivante :<\/p>\n<figure id=\"attachment_151743\" aria-describedby=\"caption-attachment-151743\" style=\"width: 1012px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-assignment-to-constant-variable.jpg\" alt=\"&lt;em&gt;Uncaught TypeError : Affectation \u00e0 une variable constante&lt;\/em&gt; dans Google Chrome\" width=\"1012\" height=\"268\"><figcaption id=\"caption-attachment-151743\" class=\"wp-caption-text\"><em>Uncaught TypeError : Affectation \u00e0 une variable constante<\/em> dans Google Chrome<\/figcaption><\/figure>\n<p>En outre :<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Vous ne pouvez pas d\u00e9clarer un <code>const<\/code> sans lui donner de valeur<\/strong>.<\/p>\n<\/aside>\n\n<p>D\u00e9clarer un <code>const<\/code> sans lui donner de valeur provoquerait le probl\u00e8me suivant : <code>SyntaxError<\/code> (voir aussi <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">ES6 In Depth : let et const<\/a>) :<\/p>\n<figure id=\"attachment_151746\" aria-describedby=\"caption-attachment-151746\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-syntax-error-missing-initializer-in-const-declaration.jpg\" alt=\"Uncaught SyntaxError : Initialisateur manquant dans la d\u00e9claration const dans Chrome\" width=\"1200\" height=\"214\"><figcaption id=\"caption-attachment-151746\" class=\"wp-caption-text\"><em>Uncaught SyntaxError : Initialisateur manquant dans la d\u00e9claration const<\/em> dans Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Une constante ne peut pas \u00eatre red\u00e9clar\u00e9e et sa valeur ne peut pas \u00eatre modifi\u00e9e par r\u00e9affectation.<\/strong><\/p>\n<\/aside>\n\n<p>Mais si une constante est un tableau ou un objet, vous pouvez modifier les propri\u00e9t\u00e9s ou les \u00e9l\u00e9ments de ce tableau ou de cet objet.<\/p>\n<p>Par exemple, vous pouvez modifier, ajouter et supprimer des \u00e9l\u00e9ments d&rsquo;un tableau :<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant array\nconst cities = [\"London\", \"New York\", \"Sydney\"];\n\n\/\/ Change an item\ncities[0] = \"Madrid\";\n\n\/\/ Add an item\ncities.push(\"Paris\");\n\n\/\/ Remove an item\ncities.pop();\n\nconsole.log(cities);\n\n\/\/ Array(3)\n\/\/ 0: \"Madrid\"\n\/\/ 1: \"New York\"\n\/\/ 2: \"Sydney\"<\/code><\/pre>\n<p>Mais vous n&rsquo;\u00eates pas autoris\u00e9 \u00e0 r\u00e9affecter le tableau :<\/p>\n<pre><code class=\"language-js\">const cities = [\"London\", \"New York\", \"Sydney\"];\n\ncities = [\"Athens\", \"Barcelona\", \"Naples\"];<\/code><\/pre>\n<p>Le code ci-dessus entra\u00eenerait une <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/TypeError\" target=\"_blank\" rel=\"noopener noreferrer\">erreur de type (TypeError)<\/a>.<\/p>\n<figure id=\"attachment_151747\" aria-describedby=\"caption-attachment-151747\" style=\"width: 1166px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-uncaught-type-error-assignment-to-constant-variable-2.jpg\" alt=\"Uncaught TypeError : Affectation \u00e0 une variable constante dans Chrome\" width=\"1166\" height=\"227\"><figcaption id=\"caption-attachment-151747\" class=\"wp-caption-text\"><em>Uncaught TypeError : Affectation \u00e0 une variable constante<\/em> dans Chrome<\/figcaption><\/figure>\n<p>Vous pouvez ajouter, r\u00e9affecter et supprimer des propri\u00e9t\u00e9s et des m\u00e9thodes d&rsquo;objets :<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language',\n\tcontent: 'JavaScript is a scripting language that enables you to create dynamically updating content.'\n};\n\n\/\/ add a new property\npost.slug = \"javascript-is-awesome\";\n\n\/\/ Reassign property\npost.id = 5;\n\n\/\/ Delete a property\ndelete post.excerpt;\n\nconsole.log(post);\n\n\/\/ {id: 5, name: 'JavaScript is awesome', content: 'JavaScript is a scripting language that enables you to create dynamically updating content.', slug: 'javascript-is-awesome'}<\/code><\/pre>\n<p>Mais vous n&rsquo;\u00eates pas autoris\u00e9 \u00e0 r\u00e9affecter l&rsquo;objet lui-m\u00eame. Le code suivant passerait par un <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\npost = {\n\tid: 1,\n\tname: 'React is powerful',\n\texcerpt: 'React lets you build user interfaces'\n};<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Dans React, la d\u00e9claration des variables avec <code>const<\/code> est la valeur par d\u00e9faut. <code>let<\/code> doit \u00eatre utilis\u00e9 lorsque <code>const<\/code> n&rsquo;est pas appropri\u00e9. L&rsquo;utilisation de <code>var<\/code> est fortement d\u00e9conseill\u00e9e.<\/strong><\/p>\n<\/aside>\n\n<h3>Object.freeze()<\/h3>\n<p>Nous sommes maintenant d&rsquo;accord sur le fait que l&rsquo;utilisation de <code>const<\/code> ne garantit pas toujours une forte immutabilit\u00e9 (en particulier lorsque vous travaillez avec des objets et des tableaux). Alors, comment pouvez-vous mettre en \u0153uvre le mod\u00e8le d&rsquo;immutabilit\u00e9 dans vos applications React ?<\/p>\n<p>Tout d&rsquo;abord, lorsque vous souhaitez emp\u00eacher la modification des \u00e9l\u00e9ments d&rsquo;un tableau ou des propri\u00e9t\u00e9s d&rsquo;un objet, vous pouvez utiliser la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/freeze\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9thode statique <code>Object.freeze()<\/code><\/a>.<\/p>\n<blockquote><p>Le gel d&rsquo;un objet emp\u00eache les extensions et rend les propri\u00e9t\u00e9s existantes non inscriptibles et non configurables. Un objet gel\u00e9 ne peut plus \u00eatre modifi\u00e9 : de nouvelles propri\u00e9t\u00e9s ne peuvent pas \u00eatre ajout\u00e9es, les propri\u00e9t\u00e9s existantes ne peuvent pas \u00eatre supprim\u00e9es, leur \u00e9num\u00e9rabilit\u00e9, leur configurabilit\u00e9, leur inscriptibilit\u00e9 ou leur valeur ne peuvent pas \u00eatre modifi\u00e9es, et le prototype de l&rsquo;objet ne peut pas \u00eatre r\u00e9attribu\u00e9. <code>freeze()<\/code> renvoie le m\u00eame objet que celui qui lui a \u00e9t\u00e9 transmis.<\/p><\/blockquote>\n<p>Toute tentative d&rsquo;ajout, de modification ou de suppression d&rsquo;une propri\u00e9t\u00e9 \u00e9chouera, soit silencieusement, soit en lan\u00e7ant un message <code>TypeError<\/code>, le plus souvent en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">mode strict<\/a>.<\/p>\n<p>Vous pouvez utiliser <code>Object.freeze()<\/code> de cette mani\u00e8re :<\/p>\n<pre><code class=\"language-js\">'use strict'\n\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\/\/ Freeze the object\nObject.freeze(post);<\/code><\/pre>\n<p>Si vous essayez maintenant d&rsquo;ajouter une propri\u00e9t\u00e9, vous recevrez un <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Add a new property\npost.slug = \"javascript-is-awesome\"; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151753\" aria-describedby=\"caption-attachment-151753\" style=\"width: 1256px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151753 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-object-is-not-extensible.jpg\" alt=\"Uncaught TypeError : can't define property \"slug\" : L'objet n'est pas extensible dans Firefox\" width=\"1256\" height=\"300\"><figcaption id=\"caption-attachment-151753\" class=\"wp-caption-text\"><em>Uncaught TypeError : can&rsquo;t define property \u00ab\u00a0slug\u00a0\u00bb :<\/em> L <em>&lsquo;objet n&rsquo;est pas extensible<\/em> dans Firefox<\/figcaption><\/figure>\n<p>Lorsque vous essayez de r\u00e9affecter une propri\u00e9t\u00e9, vous obtenez un autre type de <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Reassign property\npost.id = 5; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151865\" aria-describedby=\"caption-attachment-151865\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151865 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-read-only-property.jpg\" alt=\"La r\u00e9affectation d'une propri\u00e9t\u00e9 en lecture seule provoque une erreur de type (Uncaught TypeError)\" width=\"1198\" height=\"288\"><figcaption id=\"caption-attachment-151865\" class=\"wp-caption-text\">La r\u00e9affectation d&rsquo;une propri\u00e9t\u00e9 en lecture seule provoque une erreur de type (Uncaught TypeError)<\/figcaption><\/figure>\n<figure id=\"attachment_151868\" aria-describedby=\"caption-attachment-151868\" style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151868 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-cannot-assign-to-read-only-property.jpg\" alt=\"Uncaught TypeError : Cannot assign to read only property 'id' of object '#&lt;Object&gt;' dans Google Chrome\" width=\"1190\" height=\"254\"><figcaption id=\"caption-attachment-151868\" class=\"wp-caption-text\"><em>Uncaught TypeError : Cannot assign to read only property &lsquo;id&rsquo; of object &lsquo;#&lt;Object&gt;&rsquo;<\/em> dans Google Chrome<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement essayer de supprimer une propri\u00e9t\u00e9. Le r\u00e9sultat sera un autre <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Delete a property\ndelete post.excerpt; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151869\" aria-describedby=\"caption-attachment-151869\" style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151869 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-property-excerpt-is-non-configurable-and-cant-be-deleted-firefox.jpg\" alt=\"Uncaught TypeError : la propri\u00e9t\u00e9 \"excerpt\" n'est pas configurable et ne peut pas \u00eatre supprim\u00e9e dans Firefox\" width=\"1370\" height=\"298\"><figcaption id=\"caption-attachment-151869\" class=\"wp-caption-text\"><em>Uncaught TypeError : la propri\u00e9t\u00e9 \u00ab\u00a0excerpt\u00a0\u00bb n&rsquo;est pas configurable et ne peut pas \u00eatre supprim\u00e9e<\/em> dans Firefox<\/figcaption><\/figure>\n<h2>Libell\u00e9s de mod\u00e8les<\/h2>\n<p>Lorsque vous devez combiner des cha\u00eenes de caract\u00e8res avec la sortie d&rsquo;expressions en JavaScript, vous utilisez g\u00e9n\u00e9ralement l&rsquo;op\u00e9rateur d&rsquo;addition <code>+<\/code>. Cependant, vous pouvez \u00e9galement utiliser une fonctionnalit\u00e9 JavaScript qui vous permet d&rsquo;inclure des expressions dans des cha\u00eenes sans utiliser l&rsquo;op\u00e9rateur d&rsquo;addition : <strong>Template Literals (litt\u00e9ral de mod\u00e8le)<\/strong>.<\/p>\n<p>Les <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\" target=\"_blank\" rel=\"noopener noreferrer\">Template Literals<\/a> sont un type particulier de cha\u00eenes de caract\u00e8res d\u00e9limit\u00e9es par des caract\u00e8res backtick (<code>`<\/code>).<\/p>\n<p>Dans les Template Literals, vous pouvez inclure des espaces r\u00e9serv\u00e9s, qui sont des expressions int\u00e9gr\u00e9es d\u00e9limit\u00e9es par un dollar et plac\u00e9es entre crochets.<\/p>\n<p>Voici un exemple :<\/p>\n<pre><code class=\"language-js\">const align = 'left';\nconsole.log(`This string is ${ align }-aligned`);<\/code><\/pre>\n<p>Les cha\u00eenes et les caract\u00e8res g\u00e9n\u00e9riques sont transmis \u00e0 une fonction par d\u00e9faut qui effectue une interpolation de cha\u00eene pour remplacer les caract\u00e8res g\u00e9n\u00e9riques et concat\u00e9ner les parties en une seule cha\u00eene. Vous pouvez \u00e9galement remplacer la fonction par d\u00e9faut par une fonction personnalis\u00e9e.<\/p>\n<p>Vous pouvez utiliser les mod\u00e8les litt\u00e9raux pour :<\/p>\n<p><strong>Cha\u00eenes \u00e0 plusieurs lignes<\/strong>: les caract\u00e8res de retour \u00e0 la ligne font partie du litt\u00e9ral de mod\u00e8le.<\/p>\n<pre><code class=\"language-js\">console.log(`Twinkle, twinkle, little bat!\nHow I wonder what you\u2019re at!`);<\/code><\/pre>\n<p><strong>Interpolation de cha\u00eenes<\/strong>: Sans les litt\u00e9raux de mod\u00e8le, vous ne pouvez utiliser que l&rsquo;op\u00e9rateur d&rsquo;addition pour combiner la sortie d&rsquo;expressions avec des cha\u00eenes de caract\u00e8res. Voir l&rsquo;exemple suivant :<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(\"The result of \" + a + \" + \" + b + \" is \" + (a + b));<\/code><\/pre>\n<p>C&rsquo;est un peu d\u00e9routant, n&rsquo;est-ce pas ? Mais vous pouvez \u00e9crire ce code d&rsquo;une mani\u00e8re plus lisible et plus facile \u00e0 maintenir en utilisant les mod\u00e8les litt\u00e9raux :<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(`The result of ${ a } + ${ b } is ${ a + b }`);<\/code><\/pre>\n<p>Mais gardez \u00e0 l&rsquo;esprit qu&rsquo;il y a une <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#string_interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">diff\u00e9rence entre les deux syntaxes<\/a>:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Les litt\u00e9raux de mod\u00e8le contraignent leurs expressions directement \u00e0 des cha\u00eenes de caract\u00e8res, alors que l&rsquo;addition contraint d&rsquo;abord ses op\u00e9randes \u00e0 des primitives.<\/strong><\/p>\n<\/aside>\n\n<p>Les litt\u00e9raux de mod\u00e8le se pr\u00eatent \u00e0 plusieurs utilisations. Dans l&rsquo;exemple suivant, nous utilisons un <a href=\"#ternary-operator\" target=\"_blank\" rel=\"noopener noreferrer\">op\u00e9rateur ternaire<\/a> pour attribuer une valeur \u00e0 un attribut <code>class<\/code>.<\/p>\n<pre><code class=\"language-js\">const page = 'archive';\nconsole.log(`class=${ page === 'archive' <code>?<\/code> 'archive' : 'single' }`);<\/code><\/pre>\n<p>Ci-dessous, nous effectuons un simple calcul :<\/p>\n<pre><code class=\"language-js\">const price = 100;\nconst VAT = 0.22;\n\nconsole.log(`Total price: ${ (price * (1 + VAT)).toFixed(2) }`);<\/code><\/pre>\n<p>Il est \u00e9galement possible d&rsquo;imbriquer les Template Literals en les incluant \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un espace r\u00e9serv\u00e9 <code>${expression}<\/code> (mais <a href=\"https:\/\/dev.to\/remrkabledev\/nesting-template-literals-a-recommended-approach-2jgj\" target=\"_blank\" rel=\"noopener noreferrer\">utilisez les mod\u00e8les imbriqu\u00e9s avec prudence<\/a> car les structures de cha\u00eenes complexes peuvent \u00eatre difficiles \u00e0 lire et \u00e0 maintenir).<\/p>\n<p><strong>Mod\u00e8les balis\u00e9s <\/strong>: Comme nous l&rsquo;avons mentionn\u00e9 ci-dessus, il est \u00e9galement possible de d\u00e9finir une fonction personnalis\u00e9e pour effectuer une concat\u00e9nation de cha\u00eenes. Ce type de mod\u00e8le litt\u00e9ral est appel\u00e9 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">mod\u00e8le balis\u00e9<\/a>.<\/p>\n<blockquote><p>Les balises vous permettent d&rsquo;analyser les mod\u00e8les litt\u00e9raux \u00e0 l&rsquo;aide d&rsquo;une fonction. Le premier argument d&rsquo;une fonction de balise contient un tableau de valeurs de cha\u00eene. Les autres arguments sont li\u00e9s aux expressions.<\/p><\/blockquote>\n<p>Les balises vous permettent d&rsquo;analyser les litt\u00e9raux du mod\u00e8le \u00e0 l&rsquo;aide d&rsquo;une fonction personnalis\u00e9e. Le premier argument de cette fonction est un tableau de cha\u00eenes de caract\u00e8res incluses dans le mod\u00e8le litt\u00e9ral, les autres arguments \u00e9tant les expressions.<\/p>\n<p>Vous pouvez cr\u00e9er une fonction personnalis\u00e9e pour effectuer n&rsquo;importe quelle op\u00e9ration sur les arguments du mod\u00e8le et renvoyer la cha\u00eene manipul\u00e9e. Voici un exemple tr\u00e8s basique de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">mod\u00e8le balis\u00e9<\/a>:<\/p>\n<pre><code class=\"language-js\">const name = \"Carlo\";\nconst role = \"student\";\nconst organization = \"North Pole University\";\nconst age = 25;\n\nfunction customFunc(strings, ...tags) {\n\tconsole.log(strings); \/\/ ['My name is ', \", I'm \", ', and I am ', ' at ', '', raw: Array(5)]\n\tconsole.log(tags); \/\/ ['Carlo', 25, 'student', 'North Pole University']\n\tlet string = '';\n\tfor ( let i = 0; i &lt; strings.length - 1; i++ ){\n\t\tconsole.log(i + \"\" + strings[i] + \"\" + tags[i]);\n\t\tstring += strings[i] + tags[i];\n\t}\n\treturn string.toUpperCase();\n}\n\nconst output = customFunc`My name is ${name}, I'm ${age}, and I am ${role} at ${organization}`;\nconsole.log(output);<\/code><\/pre>\n<p>Le code ci-dessus imprime les \u00e9l\u00e9ments des tableaux <code>strings<\/code> et <code>tags<\/code>, puis met en majuscules les caract\u00e8res de la cha\u00eene avant d&rsquo;imprimer la sortie dans la console du navigateur.<\/p>\n<h2>Fonctions fl\u00e9ch\u00e9es<\/h2>\n<p>Les fonctions fl\u00e9ch\u00e9es sont une alternative aux fonctions anonymes (fonctions sans nom) en JavaScript, mais avec quelques diff\u00e9rences et limitations.<\/p>\n<p>Les d\u00e9clarations suivantes sont toutes des exemples valables de fonctions fl\u00e9ch\u00e9es :<\/p>\n<pre><code class=\"language-javascript\">\/\/ Arrow function without parameters\nconst myFunction = () =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = (param) =&gt; expression;\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; expression;\n\n\/\/ Arrow function without parameters\nconst myFunction = () =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; {\n\tstatements\n}<\/code><\/pre>\n<p>Vous pouvez omettre les crochets ronds si vous ne passez qu&rsquo;un seul param\u00e8tre \u00e0 la fonction. Si vous passez deux param\u00e8tres ou plus, vous devez les mettre entre parenth\u00e8ses. Voici un exemple :<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; `${id}: ${title} - ${category}`;\nconsole.log( render ( 5, 'Hello World!', \"JavaScript\" ) );<\/code><\/pre>\n<p>Fl\u00e8che \u00e0 une ligne Les fonctions renvoient une valeur par d\u00e9faut. Si vous utilisez la syntaxe \u00e0 plusieurs lignes, vous devrez renvoyer manuellement une valeur :<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; {\n\tconsole.log( `Post title: ${ title }` );\n\treturn `${ id }: ${ title } - ${ category }`;\n}\nconsole.log( `Post details: ${ render ( 5, 'Hello World!', \"JavaScript\" ) }` );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Vous utiliserez g\u00e9n\u00e9ralement les fonctions Arrow dans les applications React, \u00e0 moins qu&rsquo;il n&rsquo;y ait une raison sp\u00e9cifique de ne pas les utiliser.<\/strong><\/p>\n<\/aside>\n\n<p>L&rsquo;une des principales diff\u00e9rences entre les fonctions normales et les fonctions Arrow est que les fonctions Arrow n&rsquo;ont pas leurs propres liens avec le mot-cl\u00e9 <code>this<\/code>. Si vous essayez d&rsquo;utiliser <code>this<\/code> dans une fonction Arrow, il sortira de la port\u00e9e de la fonction.<\/p>\n<p>Pour une description plus approfondie des fonctions Arrow et des exemples d&rsquo;utilisation, lisez \u00e9galement la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">documentation web mdn<\/a>.<\/p>\n<h2>Classes<\/h2>\n<p>Les <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Classes_in_JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">classes en JavaScript<\/a> sont un type sp\u00e9cial de fonction pour cr\u00e9er des objets qui utilisent le m\u00e9canisme d&rsquo;h\u00e9ritage prototypique.<\/p>\n<p>D&rsquo;apr\u00e8s la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Inheritance_and_the_prototype_chain\" target=\"_blank\" rel=\"noopener noreferrer\">documentation web mdn<\/a>,<\/p>\n<blockquote><p>En mati\u00e8re d&rsquo;h\u00e9ritage, JavaScript n&rsquo;a qu&rsquo;une seule construction : les objets. Chaque objet poss\u00e8de une propri\u00e9t\u00e9 priv\u00e9e qui contient un lien vers un autre objet appel\u00e9 son prototype. Cet objet prototype a son propre prototype, et ainsi de suite jusqu&rsquo;\u00e0 ce qu&rsquo;un objet soit atteint avec <code>null<\/code> comme prototype.<\/p><\/blockquote>\n<p>Comme pour les fonctions, vous avez deux fa\u00e7ons de d\u00e9finir une classe :<\/p>\n<ul>\n<li>Une expression de classe<\/li>\n<li>Une d\u00e9claration de classe<\/li>\n<\/ul>\n<p>Vous pouvez utiliser le mot-cl\u00e9 <code>class<\/code> pour d\u00e9finir une classe \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une expression, comme le montre l&rsquo;exemple suivant :<\/p>\n<pre><code class=\"language-javascript\">const Circle = class {\n\tconstructor(radius) {\n\t\tthis.radius = Number(radius);\n\t}\n\tarea() {\n\t\treturn Math.PI * Math.pow(this.radius, 2);\n\t}\n\tcircumference() {\n\t\treturn Math.PI * this.radius * 2;\n\t}\n}\nconsole.log('Circumference: ' + new Circle(10).circumference()); \/\/ 62.83185307179586\nconsole.log('Area: ' + new Circle(10).area()); \/\/ 314.1592653589793<\/code><\/pre>\n<p>Une classe a un corps, c&rsquo;est-\u00e0-dire le code inclus dans les accolades. Vous y d\u00e9finirez le constructeur et les m\u00e9thodes, \u00e9galement appel\u00e9s membres de la classe. Le corps de la classe est ex\u00e9cut\u00e9 en mode strict m\u00eame sans utiliser la directive <code>'strict mode'<\/code>.<\/p>\n<p>La m\u00e9thode <code>constructor<\/code> est utilis\u00e9e pour cr\u00e9er et initialiser un objet cr\u00e9\u00e9 avec une classe et est automatiquement ex\u00e9cut\u00e9e lorsque la classe est instanci\u00e9e. Si vous ne d\u00e9finissez pas de m\u00e9thode de construction dans votre classe, JavaScript utilisera automatiquement un constructeur par d\u00e9faut.<\/p>\n<p>Une classe peut \u00eatre \u00e9tendue \u00e0 l&rsquo;aide du mot-cl\u00e9 <code>extends<\/code>.<\/p>\n<pre><code class=\"language-javascript\">class Book {\n\tconstructor(title, author) {\n\t\tthis.booktitle = title;\n\t\tthis.authorname = author;\n\t}\n\tpresent() {\n\t\treturn this.booktitle + ' is a great book from ' + this.authorname;\n\t}\n}\n\nclass BookDetails extends Book {\n\tconstructor(title, author, cat) {\n\t\tsuper(title, author);\n\t\tthis.category = cat;\n\t}\n\tshow() {\n\t\treturn this.present() + ', it is a ' + this.category + ' book';\n\t}\n}\n\nconst bookInfo = new BookDetails(\"The Fellowship of the Ring\", \"J. R. R. Tolkien\", \"Fantasy\");\nconsole.log(bookInfo.show());<\/code><\/pre>\n<p>Un constructeur peut utiliser le mot-cl\u00e9 <code>super<\/code> pour appeler le constructeur parent. Si vous passez un argument \u00e0 la m\u00e9thode <code>super()<\/code>, cet argument sera \u00e9galement disponible dans la classe du constructeur parent.<\/p>\n<p>Pour une \u00e9tude plus approfondie des classes JavaScript et plusieurs exemples d&rsquo;utilisation, consultez \u00e9galement la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener noreferrer\">documentation web de mdn<\/a>.<\/p>\n<p>Les classes sont souvent utilis\u00e9es pour cr\u00e9er des composants React. En g\u00e9n\u00e9ral, vous ne cr\u00e9erez pas vos propres classes, mais vous \u00e9tendrez les classes React int\u00e9gr\u00e9es.<\/p>\n<p>Toutes les <a href=\"https:\/\/react.dev\/reference\/react\/Component#defining-a-class-component\" target=\"_blank\" rel=\"noopener noreferrer\">classes de React<\/a> ont une m\u00e9thode <code>render()<\/code> qui renvoie un \u00e9l\u00e9ment React :<\/p>\n<pre><code class=\"language-javascript\">class Animal extends React.Component {\n\trender() {\n\t\treturn &lt;h2&gt;Hey, I am a {this.props.name}!&lt;\/h2&gt;;\n\t}\n}<\/code><\/pre>\n<p>Dans l&rsquo;exemple ci-dessus, <code>Animal<\/code> est un composant de classe. Gardez \u00e0 l&rsquo;esprit que<\/p>\n<ul>\n<li>Le nom du composant doit commencer par une majuscule<\/li>\n<li>Le composant doit inclure l&rsquo;expression <code>extends React.Component<\/code>. Celle-ci donne acc\u00e8s aux m\u00e9thodes du composant <code>React.Component<\/code>.<\/li>\n<li>La m\u00e9thode <code>render()<\/code> renvoie le HTML et est obligatoire.<\/li>\n<\/ul>\n<p>Une fois que vous avez cr\u00e9\u00e9 votre composant de classe, vous pouvez rendre le HTML sur la page :<\/p>\n<pre><code class=\"language-javascript\">const root = ReactDOM.createRoot(document.getElementById('root'));\nconst element = &lt;Animal name=\"Rabbit\" \/&gt;;\nroot.render(element);<\/code><\/pre>\n<p>L&rsquo;image ci-dessous montre le r\u00e9sultat sur la page (vous pouvez le voir <a href=\"https:\/\/codepen.io\/carlodaniele\/pen\/LYgPvEP\">en action sur CodePen<\/a>).<\/p>\n<figure id=\"attachment_151880\" aria-describedby=\"caption-attachment-151880\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151880 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-class-component.jpg\" alt=\"Un simple composant de classe React\" width=\"2162\" height=\"996\"><figcaption id=\"caption-attachment-151880\" class=\"wp-caption-text\">Un simple composant de classe React<\/figcaption><\/figure>\n<p>Notez cependant que <a href=\"https:\/\/react.dev\/reference\/react\/Component#migrating-a-simple-component-from-a-class-to-a-function\" target=\"_blank\" rel=\"noopener noreferrer\">l&rsquo;utilisation de composants de classe dans React n&rsquo;est pas recommand\u00e9e<\/a> et qu&rsquo;il est <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-react\/#12-make-use-of-functional-components\">pr\u00e9f\u00e9rable de d\u00e9finir les composants comme des fonctions<\/a>.<\/p>\n<h2>Le mot-cl\u00e9 \u00ab this \u00bb<\/h2>\n<p>En JavaScript, le mot-cl\u00e9 <code>this<\/code> est un espace g\u00e9n\u00e9rique g\u00e9n\u00e9ralement utilis\u00e9 \u00e0 l&rsquo;int\u00e9rieur d&rsquo;objets, de classes et de fonctions, et il fait r\u00e9f\u00e9rence \u00e0 diff\u00e9rents \u00e9l\u00e9ments en fonction du contexte ou de la port\u00e9e.<\/p>\n<p><strong>Le mot-cl\u00e9 <code>this<\/code> peut \u00eatre utilis\u00e9 dans la port\u00e9e globale.<\/strong> Si vous tapez <code>this<\/code> dans la console de votre navigateur, vous obtenez :<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Vous pouvez acc\u00e9der \u00e0 toutes les m\u00e9thodes et propri\u00e9t\u00e9s de l&rsquo;objet <code>Window<\/code>. Ainsi, si vous ex\u00e9cutez <code>this.location<\/code> dans la console de votre navigateur, vous obtiendrez le r\u00e9sultat suivant :<\/p>\n<pre><code>Location {ancestorOrigins: DOMStringList, href: 'https:\/\/kinsta.com\/', origin: 'https:\/\/kinsta.com', protocol: 'https:', host: 'kinsta.com', ...}<\/code><\/pre>\n<p><strong>Lorsque vous utilisez <code>this<\/code> dans un objet, il fait r\u00e9f\u00e9rence \u00e0 l&rsquo;objet lui-m\u00eame.<\/strong> Ainsi, vous pouvez faire r\u00e9f\u00e9rence aux valeurs d&rsquo;un objet dans les m\u00e9thodes de l&rsquo;objet lui-m\u00eame :<\/p>\n<pre><code class=\"language-javascript\">const post = { \n\tid: 5,\n\tgetSlug: function(){\n\t\treturn `post-${this.id}`;\n\t},\n\ttitle: 'Awesome post', \n\tcategory: 'JavaScript' \n};\nconsole.log( post.getSlug );<\/code><\/pre>\n<p>Essayons maintenant d&rsquo;utiliser <code>this<\/code> dans une fonction :<\/p>\n<pre><code class=\"language-javascript\">const useThis = function () {\n\treturn this;\n}\nconsole.log( useThis() );<\/code><\/pre>\n<p>Si vous n&rsquo;\u00eates pas en mode strict, vous obtiendrez :<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Mais si vous invoquez le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">mode strict<\/a>, vous obtiendrez un r\u00e9sultat diff\u00e9rent :<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function () {\n\t'use strict';\n\treturn this;\n}\nconsole.log( doSomething() );<\/code><\/pre>\n<p>Dans ce cas, la fonction renvoie <code>undefined<\/code>. C&rsquo;est parce que <code>this<\/code> dans une fonction fait r\u00e9f\u00e9rence \u00e0 sa valeur explicite.<\/p>\n<p>Comment d\u00e9finir explicitement <code>this<\/code> dans une fonction ?<\/p>\n<p>Tout d&rsquo;abord, vous pouvez attribuer manuellement des propri\u00e9t\u00e9s et des m\u00e9thodes \u00e0 la fonction :<\/p>\n<pre><code class=\"language-javascript\">function doSomething( post ) {\n\tthis.id = post.id;\n\tthis.title = post.title;\n\tconsole.log( `${this.id} - ${this.title}` );\n}\nnew doSomething( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>Mais vous pouvez \u00e9galement utiliser les m\u00e9thodes <code>call<\/code>, <code>apply<\/code>, et <code>bind<\/code>, ainsi que les fonctions fl\u00e9ch\u00e9es.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La m\u00e9thode <code>call()<\/code> d&rsquo;une fonction accepte un objet auquel <code>this<\/code> fait r\u00e9f\u00e9rence.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function() {\n\tconsole.log( `${this.id} - ${this.title}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>La m\u00e9thode <code>call()<\/code> peut \u00eatre utilis\u00e9e sur n&rsquo;importe quelle fonction et fait exactement ce qu&rsquo;elle dit : elle appelle la fonction.<\/p>\n<p>En outre, <code>call()<\/code> accepte tout autre param\u00e8tre d\u00e9fini dans la fonction :<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function( cat ) {\n\tconsole.log( `${this.id} - ${this.title} - Category: ${cat}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' }, 'JavaScript' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La m\u00e9thode <code>apply()<\/code> accepte un objet auquel <code>this<\/code> fera r\u00e9f\u00e9rence et un tableau de param\u00e8tres de la fonction<\/strong>.<\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function( cat1, cat2 ) {\n\tconsole.log( `${this.id} - ${this.title} - Categories: ${cat1}, ${cat2}` );\n}\ndoSomething.apply( { id: 5, title: 'Awesome post' }, ['JavaScript', 'React'] );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La m\u00e9thode <code>bind()<\/code> associe un objet \u00e0 une fonction de sorte qu&rsquo;\u00e0 chaque fois que vous invoquez la fonction, <code>this<\/code> fait r\u00e9f\u00e9rence \u00e0 l&rsquo;objet<\/strong>.<\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const post = { id: 5, title: 'Awesome post', category: 'JavaScript' };\nconst doSomething = function() {\n\treturn `${this.id} - ${this.title} - ${this.category}`;\n}\nconst bindRender = doSomething.bind( post );\nconsole.log( bindRender() );<\/code><\/pre>\n<p>Une alternative aux options discut\u00e9es ci-dessus est l&rsquo;utilisation de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\">fonctions fl\u00e9ch\u00e9es<\/a>.<\/p>\n<blockquote><p>Les expressions de fonctions fl\u00e9ch\u00e9es ne doivent \u00eatre utilis\u00e9es que pour les fonctions qui ne sont pas des m\u00e9thodes, car elles n&rsquo;ont pas leur propre <code>this<\/code>.<\/p><\/blockquote>\n<p>Les fonctions fl\u00e9ch\u00e9es sont donc particuli\u00e8rement utiles pour les gestionnaires d&rsquo;\u00e9v\u00e9nements.<\/p>\n<p>En effet, \u00ab lorsque le code est appel\u00e9 \u00e0 partir d&rsquo;un attribut de gestionnaire d&rsquo;\u00e9v\u00e9nement en ligne, son adresse <code>this<\/code> est d\u00e9finie sur l&rsquo;\u00e9l\u00e9ment DOM sur lequel l&rsquo;\u00e9couteur est plac\u00e9 \u00bb (voir la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this#this_in_inline_event_handlers\" target=\"_blank\" rel=\"noopener noreferrer\">documentation web de mdn<\/a>).<\/p>\n<p>Mais les choses changent avec les fonctions fl\u00e9ch\u00e9es car&#8230;<\/p>\n<blockquote><p>&#8230; les fonctions fl\u00e9ch\u00e9es \u00e9tablissent <code>this<\/code> en fonction de la port\u00e9e dans laquelle la fonction fl\u00e9ch\u00e9e est d\u00e9finie, et la valeur <code>this<\/code> ne change pas en fonction de la mani\u00e8re dont la fonction est invoqu\u00e9e.<\/p><\/blockquote>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f L&rsquo;utilisation de fonctions fl\u00e9ch\u00e9es vous permet de lier directement le contexte \u00e0 un gestionnaire d&rsquo;\u00e9v\u00e9nements.<\/strong><\/p>\n<\/aside>\n\n<h3>Lier \u00ab this \u00bb \u00e0 des gestionnaires d&rsquo;\u00e9v\u00e9nements dans React<\/h3>\n<p>Avec React, vous disposez de plusieurs moyens pour vous assurer que le gestionnaire d&rsquo;\u00e9v\u00e9nements ne perd pas son contexte :<\/p>\n<p><strong>1. En utilisant <code>bind()<\/code> \u00e0 l&rsquo;int\u00e9rieur de la m\u00e9thode de rendu :<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage.bind( this ) }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>2. Lier le contexte au gestionnaire d&rsquo;\u00e9v\u00e9nements dans le constructeur :<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.showMessage = this.showMessage.bind( this );\n\t}\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>3. D\u00e9finissez le gestionnaire d&rsquo;\u00e9v\u00e9nements \u00e0 l&rsquo;aide de fonctions fl\u00e9ch\u00e9es :<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage = () =&gt; {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={this.showMessage}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>4. Utiliser les fonctions fl\u00e9ch\u00e9es dans la m\u00e9thode de rendu :<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage() {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={()=&gt;{this.showMessage()}}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Quelle que soit la m\u00e9thode choisie, lorsque vous cliquez sur le bouton, la console du navigateur affiche le r\u00e9sultat suivant :<\/p>\n<pre><code>This refers to:  MyComponent {props: {\u2026}, context: {\u2026}, refs: {\u2026}, updater: {\u2026}, state: {\u2026}, \u2026}\nThe message is:  Hello World!<\/code><\/pre>\n<h2>Op\u00e9rateur ternaire<\/h2>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator\">L&rsquo;op\u00e9rateur conditionnel<\/a> (ou op\u00e9rateur ternaire) vous permet d&rsquo;\u00e9crire des expressions conditionnelles simples en JavaScript. Il prend trois op\u00e9randes :<\/p>\n<ul>\n<li>une condition suivie d&rsquo;un point d&rsquo;interrogation (<code>?<\/code>),<\/li>\n<li>une expression \u00e0 ex\u00e9cuter si la condition est <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\">vraie<\/a>, suivie de deux points (<code>:<\/code>),<\/li>\n<li>une seconde expression \u00e0 ex\u00e9cuter si la condition est <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Falsy\" target=\"_blank\" rel=\"noopener noreferrer\">fausse<\/a>.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : \"Juice\";<\/code><\/pre>\n<p>Il est \u00e9galement possible d&rsquo;encha\u00eener plusieurs expressions :<\/p>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : personAge &gt;= 6 ? \"Juice\" : \"Milk\";<\/code><\/pre>\n<p>Soyez prudent, cependant, car l&rsquo;encha\u00eenement de plusieurs expressions peut conduire \u00e0 un code d\u00e9sordonn\u00e9 et difficile \u00e0 maintenir.<\/p>\n<p>L&rsquo;op\u00e9rateur ternaire est particuli\u00e8rement utile dans React, notamment dans votre code JSX, qui n&rsquo;accepte que les expressions entre crochets.<\/p>\n<p>Par exemple, vous pouvez utiliser l&rsquo;op\u00e9rateur ternaire pour d\u00e9finir la valeur d&rsquo;un attribut en fonction d&rsquo;une condition sp\u00e9cifique :<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/...',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'light'\n\t}\n\n\treturn (\n\t\t&lt;div\n\t\t\tclassName='card' \n\t\t\tstyle={\n\t\t\t\tperson.theme === 'dark' ? \n\t\t\t\t{ background: 'black', color: 'white' } : \n\t\t\t\t{ background: 'white', color: 'black'} \n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Dans le code ci-dessus, nous v\u00e9rifions la condition <code>person.theme === 'dark'<\/code> pour d\u00e9finir la valeur de l&rsquo;attribut <code>style<\/code> du conteneur <code>div<\/code>.<\/p>\n<h2>\u00c9valuation des courts-circuits<\/h2>\n<p>L&rsquo;op\u00e9rateur logique ET (<code>&&<\/code>) \u00e9value les op\u00e9randes de gauche \u00e0 droite et renvoie <code>true<\/code> si et seulement si tous les op\u00e9randes sont <code>true<\/code>.<\/p>\n<p>L&rsquo;op\u00e9rateur logique ET est un <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND#short-circuit_evaluation\" target=\"_blank\" rel=\"noopener noreferrer\">op\u00e9rateur de court-circuit<\/a>. Chaque op\u00e9rande est converti en bool\u00e9en et, si le r\u00e9sultat de la conversion est <code>false<\/code>, l&rsquo;op\u00e9rateur ET s&rsquo;arr\u00eate et renvoie la valeur originale de l&rsquo;op\u00e9rande faible. Si toutes les valeurs sont <code>true<\/code>, il renvoie la valeur originale du dernier op\u00e9rande.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f En JavaScript, <code>true &amp;&amp; expression<\/code> renvoie toujours <code>expression<\/code>, et <code>false &amp;&amp; expression<\/code> renvoie toujours <code>false<\/code>.<\/p>\n<\/aside>\n<br \/>\n<\/strong><br \/>\nL&rsquo;\u00e9valuation des courts-circuits est une fonctionnalit\u00e9 JavaScript couramment utilis\u00e9e dans React, car elle vous permet de sortir des blocs de code en fonction de conditions sp\u00e9cifiques. En <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#add-the-excerpt\">voici<\/a> un exemple :<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Dans le code ci-dessus, si <code>displayExcerpt<\/code> <strong>ET<\/strong> <code>post.excerpt.rendered<\/code> \u00e9valuent \u00e0 <code>true<\/code>, React renvoie le bloc final de JSX.<\/p>\n<p><a href=\"https:\/\/legacy.reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\" target=\"_blank\" rel=\"noopener noreferrer\">Pour r\u00e9sumer<\/a>, \u00ab si la condition est <code>true<\/code>, l&rsquo;\u00e9l\u00e9ment situ\u00e9 juste apr\u00e8s <code>&&<\/code> appara\u00eetra dans la sortie. S&rsquo;il s&rsquo;agit de <code>false<\/code>, React l&rsquo;ignorera et le sautera \u00bb.<\/p>\n<h2>Syntaxe spread<\/h2>\n<p>En JavaScript, la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener noreferrer\">syntaxe spread<\/a> vous permet d&rsquo;\u00e9tendre un \u00e9l\u00e9ment it\u00e9rable, tel qu&rsquo;un tableau ou un objet, en arguments de fonction, en litt\u00e9raux de tableau ou en litt\u00e9raux d&rsquo;objet.<\/p>\n<p>Dans l&rsquo;exemple suivant, nous d\u00e9compressons un tableau dans un appel de fonction :<\/p>\n<pre><code class=\"language-jsx\">function doSomething( x, y, z ){\n\treturn `First: ${x} - Second: ${y} - Third: ${z} - Sum: ${x+y+z}`;\n}\nconst numbers = [3, 4, 7];\nconsole.log( doSomething( ...numbers ) );<\/code><\/pre>\n<p>Vous pouvez utiliser la syntaxe spread pour dupliquer un tableau (m\u00eame multidimensionnel) ou pour concat\u00e9ner des tableaux. Dans les exemples suivants, nous concat\u00e9nons deux tableaux de deux mani\u00e8res diff\u00e9rentes :<\/p>\n<pre><code class=\"language-jsx\">const firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray.push( ...secondArray );\nconsole.log( firstArray );<\/code><\/pre>\n<p>Alternativement :<\/p>\n<pre><code class=\"language-jsx\">let firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray = [ ...firstArray, ...secondArray];\nconsole.log( firstArray );<\/code><\/pre>\n<p>Vous pouvez \u00e9galement utiliser la syntaxe de propagation pour cloner ou fusionner deux objets :<\/p>\n<pre><code class=\"language-jsx\">const firstObj = { id: '1', title: 'JS is awesome' };\nconst secondObj = { cat: 'React', description: 'React is easy' };\n\n\/\/ clone object\nconst thirdObj = { ...firstObj };\n\n\/\/ merge objects\nconst fourthObj = { ...firstObj, ...secondObj }\n\nconsole.log( { ...thirdObj } );\nconsole.log( { ...fourthObj } );<\/code><\/pre>\n<h2>Affectation de d\u00e9structuration<\/h2>\n<p>Une autre structure syntaxique que vous trouverez souvent utilis\u00e9e dans React est la syntaxe <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">d&rsquo;affectation de d\u00e9structuration<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La syntaxe d&rsquo;affectation de d\u00e9structuration vous permet de d\u00e9compresser les valeurs d&rsquo;un tableau ou les propri\u00e9t\u00e9s d&rsquo;un objet dans des variables distinctes.<\/strong><\/p>\n<\/aside>\n\n<p>Dans l&rsquo;exemple suivant, nous d\u00e9compressons les valeurs d&rsquo;un tableau :<\/p>\n<pre><code class=\"language-javascript\">const user = ['Carlo', 'Content writer', 'Kinsta'];\nconst [name, description, company] = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>Voici un exemple simple d&rsquo;affectation de d\u00e9structuration avec un objet :<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta'\n}\nconst { name, description, company } = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>Mais nous pouvons faire encore plus. Dans l&rsquo;exemple suivant, nous d\u00e9compressons certaines propri\u00e9t\u00e9s d&rsquo;un objet et nous attribuons les propri\u00e9t\u00e9s restantes \u00e0 un autre objet \u00e0 l&rsquo;aide de la syntaxe d&rsquo;\u00e9talement :<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tfamily: 'Daniele',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta',\n\tpower: 'swimming'\n}\nconst { name, description, company, ...rest } = user;\nconsole.log( rest ); \/\/ {family: 'Daniele', power: 'swimming'}<\/code><\/pre>\n<p>Vous pouvez \u00e9galement attribuer des valeurs \u00e0 un tableau :<\/p>\n<pre><code class=\"language-javascript\">const user = [];\nconst object = { name: 'Carlo', company: 'Kinsta' };\n( { name: user[0], company: user[1] } = object );\nconsole.log( user ); \/\/ (2) ['Carlo', 'Kinsta']<\/code><\/pre>\n<p>Notez que les parenth\u00e8ses entourant l&rsquo;instruction d&rsquo;affectation sont n\u00e9cessaires lorsque vous utilisez l&rsquo;affectation de d\u00e9structuration litt\u00e9rale d&rsquo;objet sans d\u00e9claration.<\/p>\n<p>Pour une analyse plus approfondie de l&rsquo;affectation de d\u00e9structuration, avec plusieurs exemples d&rsquo;utilisation, veuillez vous r\u00e9f\u00e9rer \u00e0 la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">documentation web de mdn<\/a>.<\/p>\n<h2>filter(), map() et reduce()<\/h2>\n<p>JavaScript fournit plusieurs m\u00e9thodes utiles que vous trouverez souvent utilis\u00e9es dans React.<\/p>\n<h3>filter()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9thode<code>filter()<\/code><\/a> cr\u00e9e une <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\" target=\"_blank\" rel=\"noopener noreferrer\">copie superficielle<\/a> d&rsquo;une partie d&rsquo;un tableau donn\u00e9, filtr\u00e9e jusqu&rsquo;aux \u00e9l\u00e9ments qui remplissent les conditions de la fonction fournie.<\/strong><\/p>\n<\/aside>\n\n<p>Dans l&rsquo;exemple suivant, nous appliquons le filtre au tableau <code>numbers<\/code> pour obtenir un tableau dont les \u00e9l\u00e9ments sont des nombres sup\u00e9rieurs \u00e0 5 :<\/p>\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.filter( number =&gt; number &gt; 5);\nconsole.log(result); \/\/ (4) [6, 8, 9, 23]<\/code><\/pre>\n<p>Dans l&rsquo;exemple suivant, nous obtenons un tableau d&rsquo;articles dont le titre contient le mot \u00ab JavaScript \u00bb :<\/p>\n<pre><code class=\"language-javascript\">const posts = [\n\t{id: 0, title: 'JavaScript is awesome', content: 'your content'},\n\t{id: 1, title: 'WordPress is easy', content: 'your content'},\n\t{id: 2, title: 'React is cool', content: 'your content'},\n\t{id: 3, title: 'With JavaScript to the moon', content: 'your content'},\n];\n\nconst jsPosts = posts.filter( post =&gt; post.title.includes( 'JavaScript' ) );\n\nconsole.log( jsPosts );<\/code><\/pre>\n<figure id=\"attachment_152106\" aria-describedby=\"caption-attachment-152106\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152106 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/filter.jpg\" alt=\"Un tableau d'articles dont le titre contient le mot \"JavaScript\"\" width=\"1198\" height=\"346\"><figcaption id=\"caption-attachment-152106\" class=\"wp-caption-text\">Un tableau d&rsquo;articles dont le titre contient le mot \u00ab\u00a0JavaScript\u00a0\u00bb<\/figcaption><\/figure>\n<h3>map()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9thode<code>map()<\/code><\/a> ex\u00e9cute une fonction fournie sur chaque \u00e9l\u00e9ment d&rsquo;un tableau et renvoie un nouveau tableau contenant chaque \u00e9l\u00e9ment r\u00e9sultant de la fonction de rappel<\/strong>.<\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.map( number =&gt; number * 5 );\nconsole.log(result); \/\/ (7) [10, 30, 40, 10, 25, 45, 115]<\/code><\/pre>\n<p>Dans un composant React, vous trouverez souvent la m\u00e9thode <code>map()<\/code> utilis\u00e9e pour construire des listes. Dans l&rsquo;exemple suivant, nous mappons l&rsquo;objet WordPress <code>posts<\/code> pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\">construire une liste d&rsquo;articles<\/a>:<\/p>\n<pre><code class=\"language-javascript\">&lt;ul&gt;\n\t{ posts && posts.map( ( post ) =&gt; {\n\t\treturn (\n\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t{ \n\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t}\n\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t&lt;\/h5&gt;\n\t\t\t&lt;\/li&gt;\n\t\t)\n\t})}\n&lt;\/ul&gt;<\/code><\/pre>\n<h3>reduce()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9thode<code>reduce()<\/code><\/a> ex\u00e9cute une fonction de rappel (<em>reducer<\/em>) sur chaque \u00e9l\u00e9ment d&rsquo;un tableau et transmet la valeur retourn\u00e9e \u00e0 l&rsquo;it\u00e9ration suivante. En bref, le r\u00e9ducteur \u00ab\u00a0r\u00e9duit\u00a0\u00bb tous les \u00e9l\u00e9ments d&rsquo;un tableau en une seule valeur.<\/strong><\/p>\n<\/aside>\n\n<p><code>reduce()<\/code> accepte deux param\u00e8tres :<\/p>\n<ul>\n<li>Une fonction de rappel \u00e0 ex\u00e9cuter pour chaque \u00e9l\u00e9ment du tableau. Elle renvoie une valeur qui devient la valeur du param\u00e8tre accumulateur lors de l&rsquo;appel suivant. Lors du dernier appel, la fonction renvoie la valeur qui sera la valeur de retour de <code>reduce()<\/code>.<\/li>\n<li>Une valeur initiale qui est la premi\u00e8re valeur de l&rsquo;accumulateur pass\u00e9e \u00e0 la fonction de rappel.<\/li>\n<\/ul>\n<p>La fonction de rappel prend quelques param\u00e8tres :<\/p>\n<ul>\n<li>Un <strong>accumulateur<\/strong>: La valeur renvoy\u00e9e lors de l&rsquo;appel pr\u00e9c\u00e9dent \u00e0 la fonction callback. Lors du premier appel, il est mis \u00e0 une valeur initiale si elle est sp\u00e9cifi\u00e9e. Sinon, elle prend la valeur du premier \u00e9l\u00e9ment du tableau.<\/li>\n<li>La valeur de <strong>l&rsquo;\u00e9l\u00e9ment courant<\/strong>: La valeur est fix\u00e9e au premier \u00e9l\u00e9ment du tableau (<code>array[0]<\/code>) si une valeur initiale a \u00e9t\u00e9 fix\u00e9e, sinon elle prend la valeur du deuxi\u00e8me \u00e9l\u00e9ment (<code>array[1]<\/code>).<\/li>\n<li><strong>L&rsquo;indice courant<\/strong> est la position de l&rsquo;indice de l&rsquo;\u00e9l\u00e9ment courant.<\/li>\n<\/ul>\n<p>Un exemple vous permettra d&rsquo;y voir plus clair.<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 0;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue ) =&gt; accumulator + currentValue,\n\tinitialValue\n);\nconsole.log( numbers ); \/\/ (5) [1, 2, 3, 4, 5]\nconsole.log( sumElements ); \/\/ 15<\/code><\/pre>\n<p>Voyons en d\u00e9tail ce qui se passe \u00e0 chaque it\u00e9ration. Reprenez l&rsquo;exemple pr\u00e9c\u00e9dent et changez le <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 5;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log('Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index);\n\t\treturn accumulator + currentValue;\n\t},\n\tinitialValue\n);\nconsole.log( sumElements );<\/code><\/pre>\n<p>L&rsquo;image suivante montre la sortie dans la console du navigateur :<\/p>\n<figure id=\"attachment_152231\" aria-describedby=\"caption-attachment-152231\" style=\"width: 1172px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152231 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-with-initial-value.jpg\" alt=\"En utilisant reduce() avec une valeur initiale fix\u00e9e \u00e0 5\" width=\"1172\" height=\"388\"><figcaption id=\"caption-attachment-152231\" class=\"wp-caption-text\">En utilisant reduce() avec une valeur initiale fix\u00e9e \u00e0 5<\/figcaption><\/figure>\n<p>Voyons maintenant ce qui se passe sans le param\u00e8tre <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log( 'Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index );\n\t\treturn accumulator + currentValue;\n\t}\n);\nconsole.log( sumElements );<\/code><\/pre>\n<figure id=\"attachment_152232\" aria-describedby=\"caption-attachment-152232\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152232\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-without-initial-value.jpg\" alt=\"Utilisation de reduce() sans valeur initiale\" width=\"1176\" height=\"360\"><figcaption id=\"caption-attachment-152232\" class=\"wp-caption-text\">Utilisation de reduce() sans valeur initiale<\/figcaption><\/figure>\n<p>D&rsquo;autres exemples et cas d&rsquo;utilisation sont pr\u00e9sent\u00e9s sur le site web <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<h2>Exportations et importations<\/h2>\n<p>Depuis ECMAScript 2015 (ES6), il est possible d&rsquo;exporter des valeurs d&rsquo;un module JavaScript et de les importer dans un autre script. Vous utiliserez largement les imports et les exports dans vos applications React et il est donc important de bien comprendre leur fonctionnement.<\/p>\n<p>Le code suivant cr\u00e9e un composant fonctionnel. La premi\u00e8re ligne importe la biblioth\u00e8que React :<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\n\nfunction MyComponent() {\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'dark'\n\t}\n \n\treturn (\n\t\t&lt;div\n\t\t\tclassName = 'card'\n\t\t\tstyle = {\n\t\t\t\tperson.theme === 'dark' ?\n\t\t\t\t{ background: 'black', color: 'white' } :\n\t\t\t\t{ background: 'white', color: 'black'}\n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc = { person.avatar }\n\t\t\t\talt = { person.name }\n\t\t\t\tstyle = { { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div\n\t\t\t\tstyle = { { padding: '2px 16px' } }\n\t\t\t&gt;\n\t\t\t\t&lt;h3&gt;{ person.name }&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{ person.description }.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Nous avons utilis\u00e9 le mot-cl\u00e9 <code>import<\/code> suivi du nom que nous voulons attribuer \u00e0 ce que nous importons, suivi du nom du package que nous voulons installer tel qu&rsquo;il est r\u00e9f\u00e9renc\u00e9 dans le fichier <strong>package.json<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f <code>import<\/code> Les d\u00e9clarations sont utilis\u00e9es pour <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">importer des live bindings en lecture seule<\/a> qui sont export\u00e9s par d&rsquo;autres modules.<\/strong><\/p>\n<\/aside>\n\n<p>Notez que dans la fonction <code>MyComponent()<\/code> ci-dessus, nous avons utilis\u00e9 certaines des fonctionnalit\u00e9s JavaScript abord\u00e9es dans les sections pr\u00e9c\u00e9dentes. Nous avons inclus les valeurs des propri\u00e9t\u00e9s entre crochets et attribu\u00e9 la valeur de la propri\u00e9t\u00e9 <code>style<\/code> \u00e0 l&rsquo;aide de la syntaxe de l&rsquo;op\u00e9rateur conditionnel.<\/p>\n<p>Le script se termine par l&rsquo;exportation de notre composant personnalis\u00e9.<\/p>\n<p>Maintenant que nous en savons un peu plus sur les importations et les exportations, examinons de plus pr\u00e8s leur fonctionnement.<\/p>\n<h3>Export<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La d\u00e9claration <code>export<\/code> est utilis\u00e9e pour exporter des valeurs d&rsquo;un module JavaScript.<\/strong><\/p>\n<\/aside>\n\n<p>Chaque module React peut avoir <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export#description\" target=\"_blank\" rel=\"noopener noreferrer\">deux types d&rsquo;exportation diff\u00e9rents<\/a>: <strong>l&rsquo;exportation nomm\u00e9e<\/strong> et <strong>l&rsquo;exportation par d\u00e9faut<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Vous pouvez avoir plusieurs exportations nomm\u00e9es par module, mais seulement une exportation par d\u00e9faut.<\/strong><\/p>\n<\/aside>\n\n<p>Par exemple, vous pouvez exporter plusieurs fonctionnalit\u00e9s \u00e0 la fois avec une seule d\u00e9claration <code>export<\/code>:<\/p>\n<pre><code class=\"language-javascript\">export { MyComponent, MyVariable };<\/code><\/pre>\n<p>Vous pouvez \u00e9galement exporter des fonctionnalit\u00e9s individuelles (<code>function<\/code>, <code>class<\/code>, <code>const<\/code>, <code>let<\/code>) :<\/p>\n<pre><code class=\"language-javascript\">export function MyComponent() { ... };\nexport let myVariable = x + y;<\/code><\/pre>\n<p>Mais vous ne pouvez avoir qu&rsquo;une seule exportation par d\u00e9faut :<\/p>\n<pre><code class=\"language-javascript\">export default MyComponent;<\/code><\/pre>\n<p>Vous pouvez \u00e9galement utiliser l&rsquo;exportation par d\u00e9faut pour des caract\u00e9ristiques individuelles :<\/p>\n<pre><code class=\"language-javascript\">export default function() { ... }\nexport default class { ... }<\/code><\/pre>\n<h3>Import<\/h3>\n<p>Une fois le composant export\u00e9, il peut \u00eatre import\u00e9 dans un autre fichier, par exemple un fichier <strong>index.js<\/strong>, avec d&rsquo;autres modules :<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport MyComponent from '.\/MyComponent';\n\nconst root = ReactDOM.createRoot( document.getElementById( 'root' ) );\nroot.render(\n\t&lt;React.StrictMode&gt;\n\t\t&lt;MyComponent \/&gt;\n\t&lt;\/React.StrictMode&gt;\n);<\/code><\/pre>\n<p>Dans le code ci-dessus, nous avons utilis\u00e9 la d\u00e9claration import de plusieurs fa\u00e7ons.<\/p>\n<p>Dans les deux premi\u00e8res lignes, nous avons attribu\u00e9 un nom aux ressources import\u00e9es, dans la troisi\u00e8me ligne, nous n&rsquo;avons pas attribu\u00e9 de nom mais simplement import\u00e9 le fichier <strong>.\/index.css<\/strong>. La derni\u00e8re d\u00e9claration <code>import<\/code> importe le fichier <strong>.\/MyComponent<\/strong> et lui attribue un nom.<\/p>\n<p>D\u00e9couvrons les diff\u00e9rences entre ces importations.<\/p>\n<p>Au total, il existe quatre types d&rsquo;importations :<\/p>\n<p><strong>Importation nomm\u00e9e<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { MyFunction, MyVariable } from \".\/my-module\";<\/code><\/pre>\n<p><strong>Importation par d\u00e9faut<\/strong><\/p>\n<pre><code class=\"language-javascript\">import MyComponent from \".\/MyComponent\";<\/code><\/pre>\n<p><strong>Importation d&rsquo;un espace de noms<\/strong><\/p>\n<pre><code class=\"language-javascript\">import * as name from \"my-module\";<\/code><\/pre>\n<p><strong>Importation d&rsquo;effets secondaires<\/strong><\/p>\n<pre><code class=\"language-javascript\">import \"module-name\";<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Une d\u00e9claration <code>import<\/code> sans accolades est utilis\u00e9e pour importer la valeur par d\u00e9faut <code>export<\/code>. Une instruction <code>import<\/code> avec des accolades est utilis\u00e9e pour importer un fichier nomm\u00e9 <code>export<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>Une fois que vous avez ajout\u00e9 quelques styles dans votre <strong>index.css<\/strong>, votre carte devrait ressembler \u00e0 l&rsquo;image ci-dessous, o\u00f9 vous pouvez \u00e9galement voir le code HTML correspondant :<\/p>\n<figure id=\"attachment_152317\" aria-describedby=\"caption-attachment-152317\" style=\"width: 1806px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152317 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-card.jpg\" alt=\"Un simple composant React\" width=\"1806\" height=\"678\"><figcaption id=\"caption-attachment-152317\" class=\"wp-caption-text\">Un simple composant React<\/figcaption><\/figure>\n<p>Notez que les d\u00e9clarations <code>import<\/code> ne peuvent \u00eatre utilis\u00e9es que dans les modules au niveau sup\u00e9rieur (pas \u00e0 l&rsquo;int\u00e9rieur des fonctions, des classes, etc.).<\/p>\n<p>Pour un aper\u00e7u plus complet des d\u00e9clarations <code>import<\/code> et <code>export<\/code>, vous pouvez \u00e9galement consulter les ressources suivantes :<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export\" target=\"_blank\" rel=\"noopener noreferrer\">export<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">import<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/react.dev\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Importer et exporter des composants<\/a> (React dev)<\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281\" target=\"_blank\" rel=\"noopener noreferrer\">Quand dois-je utiliser des accolades pour l&rsquo;importation ES6 ?<\/a> (Stack Overflow)<\/li>\n<\/ul>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>React est l&rsquo;une des <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/#reactjs\">biblioth\u00e8ques JavaScript les plus populaires<\/a> aujourd&rsquo;hui et l&rsquo;une des <a href=\"https:\/\/kinsta.com\/fr\/blog\/salaire-developpeur-web\/\">comp\u00e9tences les plus demand\u00e9es<\/a> dans le monde du <a href=\"https:\/\/kinsta.com\/fr\/blog\/developpeur-frontend\/\">d\u00e9veloppement web<\/a>.<\/p>\n<p>Avec React, il est possible de cr\u00e9er des applications web dynamiques et des interfaces avanc\u00e9es. Cr\u00e9er de grandes applications dynamiques et interactives peut \u00eatre facile gr\u00e2ce \u00e0 ses composants r\u00e9utilisables.<\/p>\n<p>Mais React est une biblioth\u00e8que JavaScript, et une bonne compr\u00e9hension des principales fonctionnalit\u00e9s de JavaScript est essentielle pour commencer votre voyage avec React. C&rsquo;est pourquoi nous avons rassembl\u00e9 en un seul endroit certaines des fonctionnalit\u00e9s JavaScript que vous trouverez le plus souvent utilis\u00e9es dans React. Ma\u00eetriser ces fonctionnalit\u00e9s vous donnera une longueur d&rsquo;avance sur votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-tutoriels-react\/\">parcours d&rsquo;apprentissage de React<\/a>.<\/p>\n<p>Et lorsqu&rsquo;il s&rsquo;agit de <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-de-developpeurs\/\">d\u00e9veloppement web<\/a>, passer de JS\/React \u00e0 WordPress ne demande que tr\u00e8s peu d&rsquo;efforts.<\/p>\n<p>Maintenant, c&rsquo;est \u00e0 vous de jouer, quelles sont les fonctionnalit\u00e9s JavaScript qui vous semblent les plus utiles dans le d\u00e9veloppement React ? Avons-nous oubli\u00e9 quelque chose d&rsquo;important que vous auriez aim\u00e9 voir sur notre liste ? Faites-nous part de vos r\u00e9flexions dans les commentaires ci-dessous.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>De nos jours, React est l&rsquo;une des biblioth\u00e8ques JavaScript les plus populaires. Elle peut \u00eatre utilis\u00e9e pour cr\u00e9er des applications dynamiques et responsives, permet de meilleures &#8230;<\/p>\n","protected":false},"author":36,"featured_media":69631,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[535,469,714],"topic":[1019,1020,1004,980],"class_list":["post-69630","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-libraries","tag-react","topic-languages-developpement-web","topic-outils-developpement-web","topic-react","topic-tutoriel-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Les fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour ma\u00eetriser React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Lib\u00e9rez tout le potentiel du d\u00e9veloppement d&#039;applications dynamiques avec React ! D\u00e9couvrez les principales fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour commencer d\u00e8s maintenant.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fonctionnalit\u00e9s JavaScript \u00e0 conna\u00eetre pour ma\u00eetriser React\" \/>\n<meta property=\"og:description\" content=\"Lib\u00e9rez tout le potentiel du d\u00e9veloppement d&#039;applications dynamiques avec React ! D\u00e9couvrez les principales fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour commencer d\u00e8s maintenant.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T09:02:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-15T12:59:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lib\u00e9rez tout le potentiel du d\u00e9veloppement d&#039;applications dynamiques avec React ! D\u00e9couvrez les principales fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour commencer d\u00e8s maintenant.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"36 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Fonctionnalit\u00e9s JavaScript \u00e0 conna\u00eetre pour ma\u00eetriser React\",\"datePublished\":\"2023-06-01T09:02:21+00:00\",\"dateModified\":\"2023-09-15T12:59:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\"},\"wordCount\":6329,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg\",\"keywords\":[\"JavaScript\",\"JavaScript Libraries\",\"React\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\",\"name\":\"Les fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour ma\u00eetriser React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg\",\"datePublished\":\"2023-06-01T09:02:21+00:00\",\"dateModified\":\"2023-09-15T12:59:10+00:00\",\"description\":\"Lib\u00e9rez tout le potentiel du d\u00e9veloppement d'applications dynamiques avec React ! D\u00e9couvrez les principales fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour commencer d\u00e8s maintenant.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg\",\"width\":3042,\"height\":1521,\"caption\":\"Les fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour ma\u00eetriser React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Fonctionnalit\u00e9s JavaScript \u00e0 conna\u00eetre pour ma\u00eetriser React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Les fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour ma\u00eetriser React - Kinsta\u00ae","description":"Lib\u00e9rez tout le potentiel du d\u00e9veloppement d'applications dynamiques avec React ! D\u00e9couvrez les principales fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour commencer d\u00e8s maintenant.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Fonctionnalit\u00e9s JavaScript \u00e0 conna\u00eetre pour ma\u00eetriser React","og_description":"Lib\u00e9rez tout le potentiel du d\u00e9veloppement d'applications dynamiques avec React ! D\u00e9couvrez les principales fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour commencer d\u00e8s maintenant.","og_url":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-06-01T09:02:21+00:00","article_modified_time":"2023-09-15T12:59:10+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Lib\u00e9rez tout le potentiel du d\u00e9veloppement d'applications dynamiques avec React ! D\u00e9couvrez les principales fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour commencer d\u00e8s maintenant.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"36 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Fonctionnalit\u00e9s JavaScript \u00e0 conna\u00eetre pour ma\u00eetriser React","datePublished":"2023-06-01T09:02:21+00:00","dateModified":"2023-09-15T12:59:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/"},"wordCount":6329,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg","keywords":["JavaScript","JavaScript Libraries","React"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/","url":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/","name":"Les fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour ma\u00eetriser React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg","datePublished":"2023-06-01T09:02:21+00:00","dateModified":"2023-09-15T12:59:10+00:00","description":"Lib\u00e9rez tout le potentiel du d\u00e9veloppement d'applications dynamiques avec React ! D\u00e9couvrez les principales fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour commencer d\u00e8s maintenant.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/javascript-react\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/javascript-and-react-01.jpg","width":3042,"height":1521,"caption":"Les fonctionnalit\u00e9s JavaScript que vous devez conna\u00eetre pour ma\u00eetriser React"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/fr\/sujets\/react\/"},{"@type":"ListItem","position":3,"name":"Fonctionnalit\u00e9s JavaScript \u00e0 conna\u00eetre pour ma\u00eetriser React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=69630"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69630\/revisions"}],"predecessor-version":[{"id":72853,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69630\/revisions\/72853"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69630\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/69631"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=69630"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=69630"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=69630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}