Journée Comprendre JSX et les éléments de rendu - ReactJS

Bienvenue au jour 3 du défi « 30 Days of ReactJS » ! Aujourd'hui, nous allons plonger dans l'un des concepts fondamentaux de React : JSX. À la fin de cet article, vous aurez une solide compréhension de JSX et de la manière dont React l'utilise pour afficher des éléments sur la page Web.

Qu'est-ce que JSX ?
JSX signifie JavaScript XML. Il s'agit d'une extension de syntaxe pour JavaScript qui vous permet d'écrire du code de type HTML dans vos fichiers JavaScript. JSX facilite la création et la visualisation des composants de l'interface utilisateur directement dans votre code, en mélangeant la logique et la structure de votre application.

Comment fonctionne JSX
Lorsque vous écrivez du JSX, vous écrivez un mélange de HTML et de JavaScript. React prend cela et le transforme en objets JavaScript standard qui représentent votre interface utilisateur.

Voici un exemple de base :

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

Cette ligne de code crée un élément React qui représente un

tag avec le texte « Bonjour tout le monde ! ».

JSX n'est pas HTML
Même si JSX ressemble beaucoup à HTML, il est important de se rappeler que ce n’est pas exactement la même chose. JSX est un sucre syntaxique que React utilise pour créer des éléments.

Par exemple, en HTML, des attributs comme class sont utilisés pour appliquer des classes CSS :

<h1 class="header">Hello, world!</h1>

Mais en JSX, vous devez utiliser className au lieu de class, car class est un mot-clé réservé en JavaScript :

const element = <h1 className="header">Hello, world!</h1>;

Intégration d'expressions dans JSX
L'une des fonctionnalités puissantes de JSX est que vous pouvez y intégrer des expressions JavaScript directement. Cela vous permet de générer dynamiquement du contenu basé sur la logique de votre application.

Par exemple :

const name = 'Meraj';
const element = <h1>Hello, {name}!</h1>;

Ici, {name} est une expression JavaScript qui sera évaluée et remplacée par la valeur de la variable name, rendue par « Bonjour, Meraj ! » sur l'écran.

Rendu des éléments dans React
Dans React, le rendu des éléments est le processus d'affichage du contenu sur la page. Les éléments React sont les éléments constitutifs de l’interface utilisateur de votre application.

Pour restituer un élément, vous utilisez la méthode ReactDOM.render(). Cette méthode prend deux arguments :

1. L'élément React que vous souhaitez afficher.
2. L'élément DOM où vous souhaitez le restituer.

Voici comment rendre le message « Bonjour tout le monde ! » exemple :

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = <h1>Hello, world!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

Ce code indique à React de restituer l'élément à l'intérieur de l'élément HTML avec l'identifiant de root.

La puissance du DOM virtuel de React
React utilise un DOM virtuel pour gérer efficacement les modifications apportées à l'interface utilisateur. Lorsque vous mettez à jour un élément, React compare la nouvelle version avec la précédente et ne met à jour que les parties du DOM réel qui ont changé. Cette approche rend React rapide et efficace.

Exemple concret : une liste de courses
Pensez à une liste de courses sur un tableau blanc. Si vous devez modifier un élément, vous n’effacez pas la liste entière et ne la réécrivez pas. Vous mettez simplement à jour l’élément spécifique qui a changé. Le DOM virtuel de React fonctionne de la même manière, mettant à jour uniquement les parties qui doivent être modifiées.

Pourquoi utiliser JSX ?

• Code lisible : JSX vous permet d'écrire vos composants d'une manière facile à lire et à comprendre. Vous pouvez voir la structure de votre interface utilisateur directement dans votre code.
• Moins de code : Avec JSX, vous pouvez écrire moins de code que si vous utilisiez React.createElement() pour créer des éléments manuellement.
• Intégration avec JavaScript : Puisque JSX est une extension syntaxique de JavaScript, vous pouvez intégrer la logique directement dans le code de votre interface utilisateur.

Configuration de JSX avec Vite
Puisque nous utilisons Vite pour le développement, la bonne nouvelle est que Vite est préconfiguré pour prendre en charge JSX dès le départ. Cela signifie que vous pouvez commencer à écrire du JSX immédiatement sans aucune configuration supplémentaire.

Si vous avez suivi les étapes du jour 2, votre projet Vite est déjà configuré. Vous pouvez commencer à créer des composants avec JSX et les voir rendus instantanément.

Conclusion
JSX est un outil puissant qui comble le fossé entre HTML et JavaScript, facilitant ainsi la création d'interfaces utilisateur dynamiques et interactives avec React. Comprendre comment fonctionne JSX et comment React l'utilise pour restituer des éléments établira une base solide pour votre parcours de développement React.

Demain, nous plongerons dans les composants et les accessoires, les éléments de base de toute application React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!