Découvrir le JSX

1. Éléments JSX

Dans le JSX, vous pouvez utiliser des balises pour créer des éléments React. Les balises doivent correspondre à des composants React définis ou à des balises HTML natives. Les éléments JSX peuvent être imbriqués les uns dans les autres, tout comme dans le HTML.

Exemple de balises JSX

const monElement = <div> 
  <h1>Titre</h1> 
  <p>Contenu du paragraphe</p> 
</div>; 

Les éléments JSX sont les blocs de construction de base pour créer l’interface utilisateur. Ils ressemblent à des balises HTML, mais en réalité, ce sont des objets JavaScript qui représentent des composants React ou des éléments du DOM.

La syntaxe est similaire au HTML, ce qui les rend plus familiers aux développeurs web.

Exemples d’éléments JSX

const element1 = <div>Contenu du div</div>; 
const element2 = <h1>Titre</h1>; 
const element3 = <MonComposant />; 

Dans cet exemple, la variable element1 contient un élément JSX représentant une balise div, element2 contient une balise h1, et element3, un composant React appelé MonComposant.

Vous pouvez également utiliser des attributs dans les balises JSX, tout comme dans le HTML.

2. Attributs JSX

Dans le JSX, vous pouvez utiliser des attributs pour configurer les éléments d’interface utilisateur de manière similaire à HTML. Les attributs permettent de personnaliser le comportement et l’apparence des éléments React. Voici comment vous pouvez utiliser des attributs JSX dans vos composants :

Exemple d’attributs JSX

const monElement = <input type="text" placeholder="Entrez votre nom" />; 
const nom = "John"; 
const monElement2 = <h1>Bienvenue, {nom} !</h1>; 

Dans cet exemple, monElement est un élément...

1. Composition

La composition est l’idée de construire des composants en utilisant d’autres composants comme blocs de construction. Cela permet de découper une interface utilisateur complexe en composants plus petits et indépendants.

Pour illustrer cela, prenons un exemple simple :

function BlockDeContenu({ contenu }) { 
  return <p>{ contenu }</p>; 
} 
 
function Article() { 
  return ( 
    <div> 
      <BlockDeContenu contenu="Premier paragraphe" /> 
      <BlockDeContenu contenu="Second paragraphe" /> 
    </div> 
  ); 
} 
 
function App() { 
  return ( 
    <Article /> 
  ); 
} 

Dans cet exemple, le composant Article est constitué de plusieurs composants BlockDeContenu, créant ainsi une structure cohérente. Chaque composant BlockDeContenu accepte une propriété contenu, qui est utilisée pour afficher du texte dans un paragraphe. Cette approche favorise une architecture claire et modulaire, où chaque composant a un rôle spécifique.

En utilisant la composition, vous pouvez créer des composants indépendants qui se concentrent sur des tâches spécifiques. Ces composants peuvent être réutilisés dans différentes parties de l’application, évitant ainsi la duplication de code. Cela permet...

1. Utilisation des fragments JSX

Les fragments JSX sont une fonctionnalité de React permettant de regrouper plusieurs éléments de niveau supérieur sans introduire de nœud supplémentaire dans le DOM. Cela améliore la lisibilité du code et permet par exemple de rendre proprement une liste d’éléments sans ajouter un conteneur supplémentaire autour d’eux.

1. L’opérateur ternaire

L’opérateur ternaire (condition ? expressionSiVraie : expressionSiFausse) est une façon concise de créer une expression conditionnelle en JavaScript.

Voici un exemple d’utilisation dans un composant React :

import React from 'react'; 
 
const MyComponent = ({ isLoggedIn }) => { 
  return ( 
    <div> 
      {isLoggedIn ? <p>Bienvenue, utilisateur connecté !</p> : 
<p>Veuillez vous connecter.</p>} 
    </div> 
  ); 
}; 
 
export default MyComponent; 

Dans cet exemple, le composant MyComponent reçoit en entrée isLoggedIn qui indique si l’utilisateur est connecté ou non. Selon la valeur de isLoggedIn, le composant rendra un paragraphe différent : Bienvenue, utilisateur connecté !...

1. Les clés des éléments de liste

Les clés sont utilisées pour identifier de manière unique chaque élément de la liste lors du processus de rendu, ce qui permet à React de détecter les changements, ajouts ou suppressions d’éléments de manière efficace.