Catégories
Astuces et Design

Une introduction à JSX – SitePoint

Lorsque React a été introduit pour la première fois, l’une des fonctionnalités qui a attiré l’attention de la plupart des gens (et a suscité le plus de critiques) était JSX. Si vous apprenez React, ou avez déjà vu des exemples de code, vous avez probablement fait une double prise sur la syntaxe. Quelle est cette étrange fusion de HTML et de JavaScript? Est-ce même du vrai code?

Voyons ce qu'est JSX, comment il fonctionne et pourquoi diable nous voudrions mélanger HTML et JS en premier lieu!

Qu'est-ce que JSX?

Défini par les documents React comme une «extension de JavaScript» ou un «sucre de syntaxe pour l'appel React.createElement(component, props, ...children))«, JSX est ce qui facilite l'écriture de vos composants React.

JSX est considéré comme un langage spécifique à un domaine (DSL), qui peut ressembler beaucoup à un langage de modèle, tel que Moustache, Thymeleaf, Razor, Twig ou autres.

Voici un exemple de sa syntaxe:

const element = <h1>Hello, World!h1>;

Ce qui vient après le signe égal n’est pas une chaîne ou du HTML, mais plutôt JSX. Il n’est pas rendu directement au HTML, mais à la place des classes React qui sont consommées par le DOM virtuel. Finalement, grâce à la magie mystérieuse du DOM virtuel, il se dirigera vers la page et sera rendu au HTML.

Comment ça marche?

JSX n'est encore que JavaScript avec des fonctionnalités supplémentaires. Avec JSX, vous pouvez écrire du code qui ressemble beaucoup à HTML ou XML, mais vous avez le pouvoir de mélanger de manière transparente des méthodes et des variables JavaScript dans votre code. JSX est interprété par un transpilateur, tel que Babel, et rendu en code JavaScript que le Framework UI (React, dans ce cas) peut comprendre.

Remarque: vous pouvez utiliser Babel REPL pour convertir l'un des exemples suivants en JavaScript standard.

Vous n'aimez pas JSX? C'est super. Ce n'est techniquement pas nécessaire, et la documentation React comprend en fait une section sur l'utilisation de React sans JSX. Permettez-moi de vous prévenir tout de suite, cependant, ce n’est pas joli. Tu ne me crois pas? Regarde.

JSX:

class SitePoint extends Component {
  render() {
    return (
      <div>My name is <span>{this.props.myName}span>div>
    )
  }
}

React Sans JSX:

class SitePoint extends Component {
  render() {
    return React.createElement(
      "div",
      null,
      "My name is",
      React.createElement(
        "span",
        null,
        this.props.myName
      )
    )
  }
}

Bien sûr, en regardant ces petits exemples de code sur cette page, vous pourriez penser: "Oh, ce n'est pas si mal, je pourrais le faire." Mais pouvez-vous imaginer écrire une application entière comme ça?

L'exemple est juste deux éléments HTML imbriqués simples, rien d'extraordinaire. Fondamentalement, juste un Hello World équivalent. Essayer d'écrire votre application React sans JSX prendrait énormément de temps et, si vous êtes comme la plupart des autres développeurs ici travaillant en tant que personnages dans DevLand ™, cela se transformera très probablement rapidement en un désordre de code spaghetti alambiqué. Beurk!

L'utilisation de cadres, de bibliothèques et de choses comme celles-là est censée nous rendre la vie plus facile, pas plus difficile. Je suis sûr que nous avons tous vu la surutilisation et l’abus des bibliothèques ou des frameworks dans notre carrière, mais l’utilisation de JSX avec votre React n’est certainement pas un de ces cas.

Pourquoi utiliser JSX?

Il y a plusieurs raisons pour lesquelles JSX est une bonne idée:

Il a une faible barrière à l'entrée. JSX est aussi proche du HTML et du CSS simples qu'il l'est actuellement. Avec JSX, vous pouvez facilement intégrer des éléments de JavaScript dans vos modèles sans avoir à apprendre un langage de modèle supplémentaire et à gérer des niveaux d'abstraction complexes. Toute personne familiarisée avec HTML, CSS et JavaScript ne devrait avoir aucun problème à lire et à comprendre les modèles JSX.

Prise en charge de TypeScript. TypeScript prend en charge la compilation de fichiers TSX avec vérification de type. Cela signifie que, si vous faites une erreur dans le nom d'un élément ou d'un type d'attribut, la compilation échouera et vous verrez un message d'erreur indiquant votre erreur. Les IDE populaires tels que VS Code prennent également en charge les fichiers TSX et fournissent la complétion de code, la refactorisation et d'autres fonctionnalités utiles.

Sécurité. JSX prend en charge les problèmes habituels de nettoyage des sorties pour empêcher les attaques telles que les scripts intersites.

Qu'en est-il de la séparation des préoccupations?

Il existe une croyance répandue selon laquelle le mélange de HTML et de JavaScript rompt le principe sacré de la séparation des préoccupations. Ce jugement suppose qu'il existe une séparation claire entre HTML – qui est responsable de la présentation – et JavaScript – qui est responsable de l'application et de la logique métier. Cependant, cette séparation est basée sur la technologie et non sur leurs préoccupations. Le code JavaScript qui est responsable du rendu d'une liste d'éléments appartient toujours à la couche de présentation et doit être maintenu plus près du modèle que du reste de l'application.

En utilisant JavaScript, nous acceptons le fait que la frontière ne doit pas être tracée entre HTML et JavaScript, mais plutôt entre la logique de présentation et la logique d'application, quels que soient les langages utilisés de chaque côté. Se concentrer sur cela nous empêche de mélanger JavaScript de présentation et de logique métier, imposant ainsi la séparation des préoccupations, réduisant le couplage et améliorant la maintenabilité.

Utilisation de JSX avec React

Commençons par les bases. Comme mentionné précédemment, JSX doit être transpilé en JavaScript normal avant de pouvoir être rendu dans le navigateur. Par conséquent, si vous souhaitez suivre les exemples, vous devez avoir une application React déjà configurée.

Les exemples suivants sont tous fournis avec Démos CodePen exécutables, donc si tout ce que vous voulez est de jouer rapidement avec le code, cela pourrait être une bonne option pour vous.

Sinon, vous pouvez opter pour l'outil Create React App de Facebook. Pour l'utiliser, vous devez avoir installé Node et npm. Si ce n'est pas le cas, accédez à la page de téléchargement de Node.js et récupérez la dernière version de votre système (npm est fourni avec Node). Vous pouvez également consulter notre tutoriel sur l'installation de Node à l'aide d'un gestionnaire de version.

Avec Node installé, vous pouvez créer une nouvelle application React comme ceci:

npx create-react-app myapp

Cela créera un myapp dossier. Allez dans ce dossier et démarrez le serveur de développement comme ceci:

cd myapp
npm start

Votre navigateur par défaut s'ouvrira et vous verrez votre nouvelle application React. Pour les besoins de ce didacticiel, vous pouvez travailler dans le App composant, qui est situé à src/App.js.

Passons maintenant au code.

Expressions de base

JSX est extrêmement similaire au HTML simple et utilise la même syntaxe XML. Voici l'exemple canonique "Hello, World" pour commencer:

const element = <h1>Hello, World!h1>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-hello-world par SitePoint (@SitePoint)
sur CodePen.

Notez comment le

L'élément est utilisé directement dans JavaScript standard. Il n’y a pas de guillemets autour, car ce n’est pas une chaîne, mais une expression de langage.

De même, vous pouvez utiliser JavaScript dans les balises JSX en les entourant de parenthèses:

function getGreeting(name) {
  return `Hello, ${name}`;
}

const element = <h1>{getGreeting('John')}h1>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-hello-world-with-js par SitePoint (@SitePoint)
sur CodePen.

Vous pouvez également utiliser des expressions JavaScript lors de la spécification de valeurs d'attribut, comme la transmission d'un objet contenant des styles en ligne dans cet exemple. Ceci est utile lorsque vous souhaitez transmettre une valeur d'attribut dynamique:

const styles = {
  color: 'red',
  fontStyle: 'italic'
}

const element = <h1 style={styles}>Hello, World!h1>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-hello-world-stylisé par SitePoint (@SitePoint)
sur CodePen.

Remarque: si vous avez besoin de transmettre une liste dynamique d'attributs, vous pouvez utiliser l'opérateur de propagation:

.

Bien sûr, comme avec le HTML normal, les éléments JSX peuvent contenir des enfants. Ceux-ci peuvent être des chaînes littérales, d'autres éléments ou des expressions JavaScript:

function getGreeting() {
  return (
    <h2>Welcome to the websiteh2>
  )
}

const element = <div>
  <h1>Hello!h1>
  {getGreeting()}
div>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-children par SitePoint (@SitePoint)
sur CodePen.

Expressions conditionnelles

Le fait que vous puissiez incorporer des expressions JavaScript et transmettre des éléments JSX ouvre de nombreuses possibilités pour structurer votre code. Un cas d'utilisation fréquent est l'affichage conditionnel d'un élément à un utilisateur connecté – tel qu'un message personnalisé – ou une erreur de validation. JSX ne prend pas en charge la norme if instructions, mais vous pouvez utiliser l'opérateur ternaire:

const loggedIn = true;

const element = <div>
  <h1>Hello!h1>
  <h2>
    {(loggedIn) ? 'Welcome back' : 'Nice to meet you'}
  h2>
div>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-conditional-example par SitePoint (@SitePoint)
sur CodePen.

Une expression peut retourner false, true, null ou undefined pour éviter de rendre un élément. Renvoyer des valeurs fausses, telles que 0 ou une chaîne vide, rendra toujours l'élément:

const error = true;

const element = <div>
  <label>
    Name:
    <input />
    {error ? <div style={{color: 'red'}}>Name invaliddiv> : null}
  label>
div>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-conditionitional-display par SitePoint (@SitePoint)
sur CodePen.

Notez les doubles accolades utilisées dans le style attribut. Voici la syntaxe pour passer un objet en ligne comme valeur: la paire externe désigne l'expression et la paire interne est l'objet lui-même.

Dans l'extrait de code ci-dessus, nous voyons ceci:

{error ? <div style={{color: 'red'}}>Name invaliddiv> : null}

Cela peut être raccourci encore plus, à ceci:

{error && <div style={{color: 'red'}}>Name invaliddiv>}

Cela fonctionne car en JavaScript, true && expression évalue toujours à expression, et false && expression évalue toujours à false.

Mais bien que ce modèle soit assez courant, n'oubliez pas la lisibilité. Respectez les conventions de code convenues et comprises par votre équipe. N'en faites pas trop avec l'imbrication de constructions conditionnelles. Souvent, les gens placent un opérateur ternaire dans un autre pour enregistrer quelques lignes de code au détriment de la lisibilité. Refactorisez ce code en extrayant des blocs en variables ou fonctions distinctes.

Boucles

Un autre cas d'utilisation fréquent est le rendu d'une liste d'éléments répétitifs. Avec JSX, vous ne pouvez pas utiliser for boucles, mais vous pouvez parcourir un tableau en utilisant la méthode array map (). Par exemple, voici une manière simple d'afficher une liste d'éléments:

const items = (
  'Bread',
  'Milk',
  'Eggs'
)

const element = <div>
  Grocery list:
  <ul>
    {items.map(item => <li>{item}li>)}
  ul>
div>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-map par SitePoint (@SitePoint)
sur CodePen.

De toute évidence, vous pouvez également utiliser d'autres méthodes de tableau dans le code, et il peut être tentant de glisser dans une logique de filtrage ou d'autres calculs. Ne cédez pas à ça! Souvenez-vous du principe de séparation des préoccupations et séparez cette logique du code de rendu. Cela rendra votre code plus facile à lire, à comprendre et à tester.

Composants personnalisés

Les deux sections à venir sont plus spécifiques à React, mais cela vaut toujours la peine de les parcourir pour bien comprendre comment tout s'emboîte.

Les exemples de code précédents sont extrêmement simplistes, car ils ne rendent qu'un petit ensemble d'éléments HTML standard. En réalité, votre application sera constituée de composants personnalisés qui contiendront la vue et la logique propres à votre application. React vous permet de définir des composants personnalisés et de les utiliser dans le balisage en tant qu'éléments HTML normaux. Un élément personnalisé peut être défini comme une fonction ou une classe ES6.

Remarque: selon les conventions de dénomination de React, les éléments personnalisés doivent commencer par une majuscule, pour les distinguer des éléments standard.

function FunctionComponent() {
  return <h2>This is a function component.h2>
}

class ClassComponent extends React.Component {
  render() {
    return <h2>This is a class component.h2>
  }
}

const element = <div>
  <FunctionComponent />
  <ClassComponent />
div>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-custom-components par SitePoint (@SitePoint)
sur CodePen.

Gestion des événements

JSX fournit un moyen de lier des événements similaires au HTML standard. Vous pouvez définir une propriété sur un élément (les mêmes noms de propriété que pour le HTML normal mais camelCased) et passer une fonction comme valeur. Dans React, la fonction de rappel recevra un objet SyntheticEvent en tant que premier paramètre, qui est une abstraction au-dessus de l'objet d'événement de navigateur normal:

function handleEvent(e) {
  alert('Button clicked!');
  console.log(e);
}

const element = <button onClick={handleEvent}>Test clickbutton>;

ReactDOM.render(element, document.getElementById('root'));

Voir le stylo
jsx-events par SitePoint (@SitePoint)
sur CodePen.

Remarque: faites attention à la valeur de this lors du passage des gestionnaires d'événements. Lorsque vous définissez votre composant en tant que classe ES6, vous définissez généralement les gestionnaires d'événements en tant que méthodes de la classe. Les méthodes passées par valeur ne sont pas liées à un this value, donc pour conserver le contexte actuel, vous devez les lier explicitement. Consultez la documentation de React pour plus de détails sur la façon de procéder.

Pas seulement pour React

JSX avec React est assez génial. Mais que se passe-t-il si vous utilisez un autre framework ou une autre bibliothèque, mais que vous souhaitez toujours l'utiliser? Eh bien, vous avez de la chance, car JSX n’est pas techniquement lié à React. Il ne s’agit toujours que de DSL ou de «sucre de syntaxe», vous vous souvenez? Voici quelques autres projets utilisant JSX:

  • Vous pouvez utiliser JSX dans Vue’s render à l'aide du préréglage Babel @ vue / babel-preset-jsx.
  • Certains autres frameworks qui se positionnent comme des alternatives minimalistes compatibles React telles que Preact, Inferno ou Hyperapp utilisent JSX pour leur couche de rendu.
  • MDX vous permet d'utiliser JSX dans des fichiers Markdown pour ajouter des éléments JS interactifs.

J'espère que cette introduction à JSX vous a aidé à mieux comprendre ce qu'est JSX, comment il peut vous aider et comment il peut être utilisé pour créer vos applications. Maintenant, reviens là-bas et fabrique des trucs sympas!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *