Premiers pas avec JSX

JSX est une technologie introduite par React. Plongeons-y

Introduction à JSX

JSX est une technologie introduite par React.

Bien que React puisse fonctionner parfaitement sans utiliser JSX, c'est une technologie idéale pour travailler avec des composants, React bénéficie donc beaucoup de JSX.

Au début, vous pourriez penser qu'utiliser JSX équivaut à mélanger HTML etJavaScript(et comme vous le verrez CSS).

Mais ce n'est pas vrai, car ce que vous faites vraiment lorsque vous utilisez la syntaxe JSX est d'écrire une syntaxe déclarative de ce que devrait être une interface utilisateur de composant.

Et vous décrivez cette interface utilisateur n'utilisant pas de chaînes, mais utilisant plutôt JavaScript, ce qui vous permet de faire de nombreuses choses intéressantes.

Un apprêt JSX

Voici comment définir une balise h1 contenant une chaîne:

const element = <h1>Hello, world!</h1>

Cela ressemble à un étrange mélange de JavaScript et de HTML, mais en réalité, tout est JavaScript.

Ce qui ressemble à du HTML est en fait du sucre syntaxique pour définir les composants et leur positionnement à l'intérieur du balisage.

À l'intérieur d'une expression JSX, les attributs peuvent être insérés très facilement:

const myId = 'test'
const element = <h1 id={myId}>Hello, world!</h1>

Vous devez juste faire attention lorsqu'un attribut a un tiret (-) qui est convertie en syntaxe camelCase à la place, et ces 2 cas particuliers:

  • classdevientclassName
  • fordevienthtmlFor

car ce sont des mots réservés en JavaScript.

Voici un extrait de code JSX qui englobe deux composants dans undivétiqueter:

<div>
  <BlogPostsList />
  <Sidebar />
</div>

Une balise doit toujours être fermée, car il s'agit plus de XML que de HTML (si vous vous souvenez de l'époque XHTML, ce sera familier, mais depuis lors, la syntaxe lâche HTML5 a gagné). Dans ce cas, une balise à fermeture automatique est utilisée.

Remarquez comment j'ai enveloppé les 2 composants dans undiv. Pourquoi? Parce quela fonction render () ne peut renvoyer qu'un seul nœud, donc au cas où vous voudriez renvoyer 2 frères et sœurs, ajoutez simplement un parent. Il peut s'agir de n'importe quelle balise, pas seulementdiv.

Transpiler JSX

Un navigateur ne peut pas exécuter de fichiers JavaScript contenant du code JSX. Ils doivent d'abord être transformés en JS standard.

Comment? En effectuant un processus appelétranspilant.

Nous avons déjà dit que JSX est facultatif, car pour chaque ligne JSX, une alternative JavaScript simple correspondante est disponible, et c'est ce vers quoi JSX est transpilé.

Par exemple, les deux constructions suivantes sont équivalentes:

Plain JS

ReactDOM.render(
  React.createElement('div', { id: 'test' },
    React.createElement('h1', null, 'A title'),
    React.createElement('p', null, 'A paragraph')
  ),
  document.getElementById('myapp')
)

JSX

ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>A paragraph</p>
  </div>,
  document.getElementById('myapp')
)

Cet exemple très basique n'est que le point de départ, mais vous pouvez déjà voir à quel point la syntaxe JS simple est plus compliquée par rapport à l'utilisation de JSX.

Au moment de la rédaction de cet article, la manière la plus populaire de réaliser letranspilationest d'utiliserBabel, qui est l'option par défaut lors de l'exécutioncreate-react-app, donc si vous l'utilisez, vous n'avez pas à vous inquiéter, tout se passe sous le capot pour vous.

Si vous n'utilisez pascreate-react-appvous devez configurer Babel vous-même.

JS dans JSX

JSX accepte tout type de JavaScript qui y est mélangé.

Chaque fois que vous avez besoin d'ajouter du JS, placez-le simplement dans des accolades{}. Par exemple, voici comment utiliser une valeur constante définie ailleurs:

const paragraph = 'A paragraph'
ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>{paragraph}</p>
  </div>,
  document.getElementById('myapp')
)

Ceci est un exemple basique. Les accolades bouclées acceptenttoutCode JS:

const paragraph = 'A paragraph'
ReactDOM.render(
  <table>
    {rows.map((row, i) => {
      return <tr>{row.text}</tr>
    })}
  </table>,
  document.getElementById('myapp')
)

Comme tu peux le voirnous avons imbriqué JavaScript dans JSX défini dans JavaScript imbriqué dans JSX. Vous pouvez aller aussi loin que vous en avez besoin.

HTML dans JSX

JSX ressemble beaucoup au HTML, mais c'est en fait une syntaxe XML.

En fin de compte, vous effectuez le rendu du HTML, vous devez donc connaître quelques différences entre la façon dont vous définiriez certaines choses en HTML et la façon dont vous les définissez dans JSX.

Vous devez fermer toutes les balises

Tout comme en XHTML, si vous l'avez déjà utilisé, vous devez fermer toutes les balises: pas plus<br>mais utilisez plutôt la balise à fermeture automatique:<br />(il en va de même pour les autres balises)

camelCase est le nouveau standard

En HTML, vous trouverez des attributs sans aucun cas (par exempleonchange). Dans JSX, ils sont renommés en leur équivalent camelCase:

  • onchange=>onChange
  • onclick=>onClick
  • onsubmit=>onSubmit

classdevientclassName

En raison du fait que JSX est JavaScript, etclassest un mot réservé, vous ne pouvez pas écrire

<p class="description">

mais vous devez utiliser

<p className="description">

de même pourforqui est traduit enhtmlFor.

L'attribut style change sa sémantique

Lestylel'attribut en HTML permet de spécifier le style en ligne. Dans JSX, il n'accepte plus de chaîne, et dansCSS dans Reactvous verrez pourquoi c'est un changement très pratique.

Formes

La définition des champs de formulaire et les événements sont modifiés dans JSX pour offrir plus de cohérence et d'utilité.

Formulaires dans JSXentre dans plus de détails sur les formulaires.

CSS dans React

JSX fournit un moyen sympa de définir CSS.

Si vous avez un peu d'expérience avec les styles HTML en ligne, à première vue, vous vous retrouverez repoussé 10 ou 15 ans en arrière, dans un monde où le CSS en ligne était tout à fait normal (de nos jours, il est diabolisé et n'est généralement qu'une solution rapide. Solution).

Le style JSX n'est pas la même chose: tout d'abord, au lieu d'accepter une chaîne contenant des propriétés CSS, le JSXstyleL'attribut n'accepte qu'un objet. Cela signifie que vous définissez des propriétés dans un objet:

var divStyle = {
  color: 'white'
}

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode)

ou

ReactDOM.render(<div style={{ color: 'white' }}>Hello World!</div>, mountNode)

Les valeurs CSS que vous écrivez dans JSX sont légèrement différentes du CSS ordinaire:

  • les noms de propriété des clés sont camelCased
  • les valeurs ne sont que des chaînes
  • vous séparez chaque tuple par une virgule

Pourquoi est-ce préférable à CSS / SASS / LESS?

CSS est unproblème non résolu. Depuis sa création, des dizaines d'outils autour de lui ont augmenté puis sont tombés. Le principal problème avec CSS est qu'il n'y a pas de portée et qu'il est facile d'écrire du CSS qui n'est appliqué d'aucune façon, donc une «solution rapide» peut avoir un impact sur des éléments qui ne devraient pas être touchés.

JSX permet aux composants (définis dans React par exemple) d'encapsuler complètement leur style.

Est-ce la solution idéale?

Les styles en ligne dans JSX sont bons jusqu'à ce que vous en ayez besoin

  1. écrire des requêtes multimédias
  2. animations de style
  3. référencer des pseudo-classes (par exemple:hover)
  4. des pseudo éléments de référence (par ex.::first-letter)

En bref, ils couvrent les bases, mais ce n'est pas la solution finale.

Formulaires dans JSX

JSX ajoute quelques modifications au fonctionnement des formulaires HTML, dans le but de faciliter les choses pour le développeur.

valueetdefaultValue

LevalueL'attribut contient toujours la valeur actuelle du champ.

LedefaultValueL'attribut contient la valeur par défaut qui a été définie lors de la création du champ.

Cela aide à résoudre certains comportements étranges deDOMinteraction lors de l'inspectioninput.valueetinput.getAttribute('value')renvoyant une la valeur actuelle et une la valeur par défaut d'origine.

Cela vaut également pour letextareachamp, par exemple

<textarea>Some text</textarea>

mais plutôt

<textarea defaultValue={'Some text'} />

Pourselectchamps, au lieu d'utiliser

<select>
  <option value="x" selected>
    ...
  </option>
</select>

utilisation

<select defaultValue="x">
  <option value="x">...</option>
</select>

Un onChange plus cohérent

Passer une fonction auonChangeattribut vous pouvez vous abonner à des événements sur les champs de formulaire.

Cela fonctionne de manière cohérente dans tous les domaines, mêmeradio,selectetcheckboxles champs d'entrée déclenchent unonChangeun événement.

onChangese déclenche également lors de la saisie d'un caractère dans uninputoutextareadomaine.

Échappements automatiques JSX

Pour atténuer le risque toujours présent d'exploits XSS, JSX force l'échappement automatique dans les expressions.

Cela signifie que vous pouvez rencontrer des problèmes lors de l'utilisation d'une entité HTML dans une expression de chaîne.

Vous vous attendez à ce que ce qui suit s'imprime© 2020:

<p>{'&copy; 2020'}</p>

Mais ce n'est pas, c'est l'impression&copy; 2020car la chaîne est échappée.

Pour résoudre ce problème, vous pouvez soit déplacer les entités en dehors de l'expression:

<p>&copy; 2020</p>

ou en utilisant une constante qui imprime la représentation Unicode correspondant à l'entité HTML que vous devez imprimer:

<p>{'\u00A9 2020'}</p>

Espace blanc dans JSX

Pour ajouter un espace blanc dans JSX, il existe 2 règles:

Horizontal white space is trimmed to 1

Si vous avez un espace blanc entre les éléments de la même ligne, tout est réduit à 1 espace blanc.

<p>Something       becomes               this</p>

devient

<p>Something becomes this</p>

L'espace blanc vertical est éliminé

<p>
  Something
  becomes
  this
</p>

devient

<p>Somethingbecomesthis</p>

Pour résoudre ce problème, vous devez ajouter explicitement un espace blanc, en ajoutant une expression d'espace comme celle-ci:

<p>
  Something
  {' '}becomes
  {' '}this
</p>

ou en incorporant la chaîne dans une expression d'espace:

<p>
  Something
  {' becomes '}
  this
</p>

Ajout de commentaires dans JSX

Vous pouvez ajouter des commentaires à JSX en utilisant les commentaires JavaScript normaux dans une expression:

<p>
  {/* a comment */}
  {
    //another comment
  }
</p>

Attributs de diffusion

Dans JSX, une opération courante consiste à attribuer des valeurs aux attributs.

Au lieu de le faire manuellement, par exemple

<div>
  <BlogPost title={data.title} date={data.date} />
</div>

tu peux passer

<div>
  <BlogPost {...data} />
</div>

et les propriétés dudatal'objet sera utilisé comme attributs automatiquement, grâce à l'ES6opérateur de propagation.

Comment faire une boucle dans JSX

Si vous avez un ensemble d'éléments sur lesquels vous devez boucler pour générer un partiel JSX, vous pouvez créer une boucle, puis ajouter JSX à un tableau:

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) { items.push(<Element key={index} />) }

Désormais, lors du rendu du JSX, vous pouvez intégrer leitemstableau en l'enveloppant entre accolades:

const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) { items.push(<li key={index}>{value}</li>) }

return ( <div> {items} </div> )

Vous pouvez faire la même chose directement dans le JSX, en utilisantmapau lieu d'une boucle for-of:

const elements = ['one', 'two', 'three'];
return (
  <ul>
    {elements.map((value, index) => {
      return <li key={index}>{value}</li>
    })}
  </ul>
)

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: