From 0697c96da4c99a742abcc1e8d5bb69e97fc267dd Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 20 Jul 2023 16:39:40 +0200 Subject: [PATCH 1/2] copy(jsx-curlies): first full translation --- .../javascript-in-jsx-with-curly-braces.md | 194 +++++++++--------- 1 file changed, 99 insertions(+), 95 deletions(-) diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 502916113..b96f9df45 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -1,25 +1,25 @@ --- -title: JavaScript in JSX with Curly Braces +title: JavaScript dans JSX grâce aux accolades --- -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript. +JSX vous permet d'écrire du balisage similaire à HTML au sein de votre fichier JavaScript, ce qui regroupe la logique et le contenu associés dans un même endroit. Vous voudrez régulièrement ajouter un peu de logique JavaScript dans votre balisage, ou y référencer une propriété dynamique. Dans de tels cas, vous utiliserez des accolades dans votre JSX pour y « ouvrir une fenêtre » vers le monde JavaScript. -* How to pass strings with quotes -* How to reference a JavaScript variable inside JSX with curly braces -* How to call a JavaScript function inside JSX with curly braces -* How to use a JavaScript object inside JSX with curly braces +* Comment passer des chaînes de caractères grâce aux apostrophes ou guillemets +* Comment référencer une variable JavaScript dans du JSX grâce aux accolades +* Comment appeler une fonction JavaScript dans du JSX grâce aux accolades +* Comment utiliser un objet JavaScript dans du JSX grâce aux accolades -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## Passer des chaînes de caractères grâce aux apostrophes ou guillemets {/*passing-strings-with-quotes*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +Lorsque vous voulez passer une valeur textuelle fixe à un attribut en JSX, vous l'entourez d'apostrophes (`'`) ou de guillemets (`"`) : @@ -41,9 +41,9 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +Dans cet exemple, `"https://i.imgur.com/7vQD0fPs.jpg"` et `"Gregorio Y. Zara"` sont passées en tant que chaînes de caractères. -But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**: +Mais comment feriez-vous pour spécifier dynamiquement les textes pour `src` ou `alt` ? Vous pouvez **utiliser une valeur JavaScript en remplaçant les guillemets (`"`) par des accolades (`{` et `}`)** : @@ -67,11 +67,11 @@ export default function Avatar() { -Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup! +Remarquez la différence entre `className="avatar"`, qui spécifie une classe CSS `"avatar"` pour arrondir l'image, et `src={avatar}` qui lit la valeur de la variable JavaScript `avatar`. En effet, les accolades vous permettent de mettre du JavaScript directement dans votre balisage ! -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## Les accolades : une fenêtre vers le monde JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

`: +JSX n'est qu'une façon particulière d'écrire du JavaScript. Vous pouvez donc y utiliser du JavaScript directement — dans des accolades `{ }`. L'exemple ci-dessous commence par déclarer le nom du scientifique dans `name`, puis l'incorpore dans le `

` grâce aux accolades : @@ -79,16 +79,16 @@ JSX is a special way of writing JavaScript. That means it’s possible to use Ja export default function TodoList() { const name = 'Gregorio Y. Zara'; return ( -

{name}'s To Do List

+

Liste des tâches de {name}

); } ``` -Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes? +Essayez de modifier la valeur de `name` de `'Gregorio Y. Zara'` vers `'Hedy Lamarr'`. Vous voyez comme le titre de la liste change ? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +N'importe quelle expression JavaScript fonctionnera au sein des accolades, y compris des appels de fonction comme `formatDate()` : @@ -97,32 +97,32 @@ const today = new Date(); function formatDate(date) { return new Intl.DateTimeFormat( - 'en-US', + 'fr-FR', { weekday: 'long' } ).format(date); } export default function TodoList() { return ( -

To Do List for {formatDate(today)}

+

Liste de tâches pour {formatDate(today)}

); } ``` -### Where to use curly braces {/*where-to-use-curly-braces*/} +### Où utiliser les accolades {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX: +Vous ne pouvez utiliser des accolades qu'à deux endroits dans JSX : -1. **As text** directly inside a JSX tag: `

{name}'s To Do List

` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. -2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`. +1. **Comme texte** directement au sein d'une balise JSX : `

Liste de tâches de {name}

` fonctionne, mais pas `<{tag}>Liste de tâches de Gregorio Y. Zara`. +2. **Comme attributs** juste après le symbole `=` : `src={avatar}` lira la variable `avatar`, mais `src="{avatar}"` passera juste le texte `"{avatar}"`. -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +## « Double accolades » : les CSS et autres objets dans JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} -In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. +En plus des chaînes de caractères, nombres et autres expressions JavaScript, vous pouvez même passer des objets dans JSX. Les littéraux objets sont délimités par des accolades, comme par exemple `{ name: "Hedy Lamarr", inventions: 5 }`. Du coup, pour passer un littéral objet en JSX, vous devez l'enrober par une autre paire d'accolades : `person={{ name: "Hedy Lamarr", inventions: 5 }}`. -You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute: +Vous rencontrerez peut-être ça pour des styles en ligne en JSX. React n'exige pas que vous utilisez des styles en ligne (les classes CSS marchent très bien la plupart du temps). Mais lorsque vous en avez effectivement besoin, vous passez un objet à l'attribut `style` : @@ -133,9 +133,9 @@ export default function TodoList() { backgroundColor: 'black', color: 'pink' }}> -
  • Improve the videophone
    • -
  • Prepare aeronautics lectures
    • -
  • Work on the alcohol-fuelled engine
    • +
  • Améliorer le visiophone
    • +
  • Préparer les cours d’aéronautique
    • +
  • Travailler sur un moteur à alcool
    • ); } @@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }     -Try changing the values of `backgroundColor` and `color`. +Essayez de modifier les valeurs de `backgroundColor` et `color`. -You can really see the JavaScript object inside the curly braces when you write it like this: +On peut mieux voir l'objet JavaScript au sein des accolades lorsqu'on l'écrit comme ceci : ```js {2-5}