jsx

JSX, est une extension de syntaxe JavaScript qui ressemble à XML. Elle est souvent utilisée avec React pour décrire à quoi doit ressembler l'interface utilisateur d'une application. Voici quelques points clés à retenir sur JSX :

Comprendre les bases

Les balises : Vous pouvez utiliser des balises HTML dans votre code JavaScript/React. Par exemple :
```
const element = <h1>Hello, JSX!</h1>;
```
Expressions JavaScript : Vous pouvez incorporer des expressions JavaScript en les plaçant entre des accolades {}. Cela permet d'évaluer des expressions et d'afficher le résultat :
```
const name = "John";
const element = <p>Hello, {name}!</p>;
```
Attributs : Vous pouvez utiliser des attributs HTML avec JSX. Si un attribut n'a pas de valeur spécifiée, il est considéré comme true. Par exemple :
```
const element = <input type="text" disabled />;
```

Comprendre le jsx pour pouvoir faire des composants

Petite subtilité

Dans les exemples ci dessous je n'utilise pas de fonctions flechées. Par exemple le premier code est :

function MonComposant(){}

C'est uniquement pour vous permettre de jouer avec le code dans mon site. Donc concentrez vous uniquement sur la partie return du code.

Lorsque vous créerez vos propres composants, il faudra utiliser la syntaxe standard

const App: React.FC = () =>{
}

Vous pouvez créer vos propres composants React en utilisant JSX. Les noms de composants doivent commencer par une majuscule pour les distinguer des balises HTML :

Éditeur en direct

function MonComposant() {
    let a = 4;
    return (
        <p>mon beau composant avec le chiffre {a}</p>
    );
}

function MonComposant() {
    let a = 4;
    return (
        <p>mon beau composant avec le chiffre {a}</p>
    );
}

Résultat

Listes et clés

Lors du rendu d'une liste d'éléments, vous devez spécifier une clé unique pour chaque élément afin d'optimiser les performances de rendu :

Éditeur en direct

function MonComposant() {
    const numbers = [1, 2, 3, 4, 5];
    return (
        <div>
            <p>List of Numbers:</p>
            <ul>
                {numbers.map((n) => (
                    <li key={n.toString()}>{n}</li>
                ))}
            </ul>
        </div>
    );
}

function MonComposant() {
    const numbers = [1, 2, 3, 4, 5];
    return (
        <div>
            <p>List of Numbers:</p>
            <ul>
                {numbers.map((n) => (
                    <li key={n.toString()}>{n}</li>
                ))}
            </ul>
        </div>
    );
}

Résultat

Pourquoi map et pas foreach ?

Il est important ici de comprendre pourquoi on n'utilise pas foreach pour itérer sur numbers. Le code ci-dessous ne fonctionne pas

Éditeur en direct

function MonComposant() {
    const numbers = [1, 2, 3, 4, 5];
    return (
        <div>
            <p>List of Numbers:</p>
            <ul>
                {numbers.forEach((n) => (
                    <li key={n.toString()}>{n}</li>
                ))}
            </ul>
        </div>
    );
}

function MonComposant() {
    const numbers = [1, 2, 3, 4, 5];
    return (
        <div>
            <p>List of Numbers:</p>
            <ul>
                {numbers.forEach((n) => (
                    <li key={n.toString()}>{n}</li>
                ))}
            </ul>
        </div>
    );
}

Résultat

Lorsque vous placez {numbers.forEach(...)} dans votre JSX, React s'attend à ce que cette expression retourne quelque chose qu'il peut rendre (comme un tableau de JSX). Cependant, comme forEach ne retourne rien, React ne reçoit aucune donnée à afficher. Cela signifie que la liste des éléments ne sera pas rendue du tout.

Affichage conditionnel

Vous pouvez utiliser des expressions conditionnelles pour rendre différents éléments en fonction d'une condition :

Éditeur en direct

    function MonComposant() {
        isLoggedIn = false;
        return (
            <div>
                {isLoggedIn ? <p>Welcome user!</p> : <p>Please log in.</p>}
            </div>
        );
    }

    function MonComposant() {
        isLoggedIn = false;
        return (
            <div>
                {isLoggedIn ? <p>Welcome user!</p> : <p>Please log in.</p>}
            </div>
        );
    }

Résultat

Une autre manière d'écrire un rendu conditionnel en utilisant l'opérateur &&

Éditeur en direct

function MonComposant() {
    isLoggedIn = true;
    return (
        <div>
            {isLoggedIn && <p>Welcome user!</p>} 
            {!isLoggedIn && <p>Please log in.</p>}
        </div>
    );
}

function MonComposant() {
    isLoggedIn = true;
    return (
        <div>
            {isLoggedIn && <p>Welcome user!</p>} 
            {!isLoggedIn && <p>Please log in.</p>}
        </div>
    );
}

Résultat

Style css

Vous pouvez définir le style d'une balise en lui affectant une classe :

.heading {
    color: blue;
    font-size: 20px;
}

import './styles.css';

function MonComposant() {
    return (
        <div>
            <h2 className="heading">Quel joli texte</h2>
        </div>
    );
}

cssReact

mauvaise pratique

Il est possible (comme en html classique) de faire du style directement de la balise. C'est à proscrire.

Éditeur en direct

  function MonComposant() {
        const h2Style = {
            color: 'blue',
            fontSize: '20px'
        };
        return (
            <div>
                {/* Ceci est un commentaire */}
                <h2 style={h2Style}>Quel joli texte... mais mauvaise pratique</h2>
            </div>
        );
    }

  function MonComposant() {
        const h2Style = {
            color: 'blue',
            fontSize: '20px'
        };
        return (
            <div>
                {/* Ceci est un commentaire */}
                <h2 style={h2Style}>Quel joli texte... mais mauvaise pratique</h2>
            </div>
        );
    }

Résultat

Commentaires :

Vous pouvez ajouter des commentaires dans JSX en les plaçant entre {/* */} :

Éditeur en direct

function MonComposant() {
  return (
    <div>
    {/* Ceci est un commentaire */}
      <h2>On ne voit pas le commentaire.</h2>
    </div>
  );
}

function MonComposant() {
  return (
    <div>
    {/* Ceci est un commentaire */}
      <h2>On ne voit pas le commentaire.</h2>
    </div>
  );
}

Résultat

Fragments

Lorsque vous devez retourner plusieurs éléments à partir d'un composant React, vous devez les envelopper dans un conteneur. Avant, cela se faisait souvent avec une balise <div>. Cependant, depuis React 16, vous pouvez utiliser des fragments <> pour éviter d'ajouter des nœuds inutiles au DOM :

const MonComposant = () => (
  <>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
  </>
);

C'est une brève introduction à JSX. Il offre une syntaxe concise et expressive pour décrire la structure de l'interface utilisateur dans les applications React. N'hésitez pas à explorer davantage pour découvrir les fonctionnalités avancées.

Exercice

Comme énoncé précédement, nous verrons dans les tutoriels suivants comment fonctionnent useStateet setState.

Je vous donne un code. Ne regardez pas la partie métier (juste le nom des fonctions à appeler). Concentrez-vous sur la partie jsx pour créer un composant identique à celui de la vidéo.

Fichier `App.tsx`

Copier/coller le code ci-dessous à la place de votre App.tsx actuel (ou créez un autre projet si vous préférez).

J'ai mis à plusieurs endroits {/* Compléter ici */}. Cette version du code ne peut donc pas fonctionner. Vous devez juste changer ces portions de code pour obtenir le résultat visible sur la vidéo.

App.tsx
import { useState } from 'react'
import './App.css'

const App: React.FC = () => {
  const [names, setNames] = useState<string[]>(['Alice', 'Bob', 'Charlie', 'David', 'Eva']);

  // Définir l'état pour activer/désactiver l'affichage des noms
  const [showNames, setShowNames] = useState<boolean>(true);

  // Définir l'état pour le nom saisi
  const [newName, setNewName] = useState<string>('');

  /**
   * Basculer l'affichage des noms.
   * La fonction inverse la valeur actuelle de `showNames`, ce qui permet d'afficher 
   * ou de masquer la liste
   * @returns {void}
   */
  const toggleNames = () => {
    setShowNames((prev) => !prev);    
  };

    /**
     * Ajoute un nouveau nom à la liste des noms si la chaîne de caractères est valide.
     * Remet à vide name (et donc l'input du formulaire)
     * @returns {void}
     */
    const addName = () => {
    if (newName.trim()) {
      setNames((prevNames) => [...prevNames, newName.trim()]);
      setNewName('');
    }
  };

  return (
    <div className="container">
      <h2>Liste des Noms</h2>

      {/* Bouton pour activer/désactiver l'affichage des noms */}
      <button className="toggle-btn" onClick={{/* Compléter ici */}}>
        {/* Compléter ici */}
        {/* Selon la valeur de showNames, il faut afficher "masquer" ou "Afficher" */}
      </button>

      {/* Affichage conditionnel : si showNames est vrai, afficher la liste */}
      {/* Selon la valeur de showNames on affiche ou pas la liste */}
      {{/* Compléter ici */} && (
        <ul className="name-list">
          {names.map((name, index) => (
            {/* Compléter ici */}
            {/* créer les li avec la valeur et la classe css adéquate  */}
          ))}
        </ul>
      )}

      {/* Champ de saisie et bouton pour ajouter un nom */}
      <div className="add-name">
        <input
          type="text"
          placeholder="Ajouter un nom"
          value={newName}
          onChange={(e) => setNewName(e.target.value)}
          className="name-input"
        />
        {/* Appeler la bonne fonction au Click et attribuer la bonne classe css */}
        <button onClick={{/* Compléter ici */}} className="{/* Compléter ici */}">Ajouter</button>
      </div>

    </div>
  );
};

export default App

Fichier `App.css`

App.css
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #333;
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.toggle-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  display: block;
  margin: 10px auto;
}

.toggle-btn:hover {
  background-color: #45a049;
}

.name-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.name-item {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  font-size: 18px;
  color: #555;
  transition: background-color 0.3s ease;
}

.name-item:hover {
  background-color: #f0f0f0;
}

Comprendre les bases​

Comprendre le jsx pour pouvoir faire des composants​

Listes et clés​

Affichage conditionnel​

Style css​

Commentaires :​

Fragments​

Exercice​

Fichier App.tsx​

Fichier App.css​

Comprendre les bases

Comprendre le jsx pour pouvoir faire des composants

Listes et clés

Affichage conditionnel

Style css

Commentaires :

Fragments

Exercice

Fichier `App.tsx`

Fichier `App.css`