ReactJS - Utiliser React sans JSX

Qu'est-ce que JSX ?

Avant de plonger dans l'utilisation de React sans JSX, comprenons d'abord ce qu'est JSX. JSX, ou JavaScript XML, est une extension de syntaxe pour JavaScript qui ressemble à HTML. Il est couramment utilisé avec React pour décrire à quoi devrait ressembler l'interface utilisateur. Cependant, JSX n'est pas une exigence pour utiliser React. On peut utiliser React sans JSX, ce que nous allons explorer dans ce tutoriel.

Pourquoi utiliser React sans JSX ?

Vous vous demandez peut-être : "Si JSX est si commun, pourquoi voudrions-nous utiliser React sans lui ?" Excellent question ! Il y a quelques raisons :

1. Apprendre les concepts fondamentaux : Comprendre comment React fonctionne sans JSX peut vous donner une compréhension plus approfondie de la bibliothèque.
2. Limitations des outils de construction : Certains environnements de construction peuvent ne pas prendre en charge la compilation de JSX.
3. Préférence personnelle : Certains développeurs préfèrent simplement écrire du JavaScript pur.

Créer des éléments avec React.createElement()

Le cœur de l'utilisation de React sans JSX est la fonction React.createElement(). Cette fonction est ce à quoi JSX se compile finalement, donc nous coupons le middleman !

Commençons par un exemple simple :

const element = React.createElement(
'h1',
{className: 'greeting'},
'Bonjour, le monde !'
);

Dans cet exemple, nous créons un élément h1 avec une classe 'greeting' et le contenu textuel 'Bonjour, le monde !'. Décomposons les arguments :

1. Le premier argument ('h1') spécifie le type d'élément que nous voulons créer.
2. Le deuxième argument ({className: 'greeting'}) est un objet contenant les props de l'élément.
3. Le troisième argument ('Bonjour, le monde !') est le contenu de l'élément.

Si nous devions écrire ceci en JSX, cela ressemblerait à ceci :

const element = <h1 className="greeting">Bonjour, le monde !</h1>;

Voyez comme JSX est plus compact ? Mais ne vous inquiétez pas, avec la pratique, créer des éléments sans JSX devient une seconde nature !

Niveaux d'éléments

Maintenant, essayons quelque chose de plus complexe. Comment créer une div avec deux éléments enfants ?

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Bienvenue'),
React.createElement('p', null, 'Ceci est un paragraphe.')
);

Cela crée une structure équivalente à :

<div>
<h1>Bienvenue</h1>
<p>Ceci est un paragraphe.</p>
</div>

Notez comment nous_nous_nestons les appels createElement pour créer des éléments enfants. Les arguments null sont là où nous mettrions les props si nous en avions besoin.

Créer des composants

Les composants sont les briques de construction des applications React. Créons un composant fonctionnel simple sans JSX :

function Welcome(props) {
return React.createElement(
'h1',
null,
'Bienvenue, ' + props.name
);
}

Pour utiliser ce composant, nous ferions :

const element = React.createElement(Welcome, {name: 'Alice'});

Cela est équivalent au JSX :

const element = <Welcome name="Alice" />;

Gestion des événements

La gestion des événements dans React sans JSX est très similaire à celle avec JSX. Créons un bouton qui enregistre un message lorsque vous cliquez dessus :

function handleClick() {
console.log('Bouton cliqué !');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Cliquez-moi'
);

Ici, nous passons la fonction handleClick comme la prop onClick à l'élément bouton.

Rendu conditionnel

Le rendu conditionnel est un peu plus verbeux sans JSX, mais toujours entièrement possible :

function Greeting(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Bienvenue à nouveau !');
} else {
return React.createElement('h1', null, 'Veuillez vous inscrire.');
}
}

const element = React.createElement(
Greeting,
{isLoggedIn: true}
);

Listes et clés

Le rendu des listes sans JSX nécessite d'utiliser Array.map() explicitement :

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
React.createElement('li', {key: number.toString()}, number)
);

const list = React.createElement('ul', null, listItems);

Notez comment nous utilisons toujours la prop key, cruciale pour le processus de réconciliation de React.

Tableau des méthodes

Voici un tableau récapitulatif des méthodes clés que nous avons discutées :

Méthode	Description	Exemple
React.createElement()	Crée un élément React	React.createElement('div', null, 'Bonjour')
Array.map()	Transforme les éléments du tableau	numbers.map(n => React.createElement('li', null, n))
React.render()	Rend un élément React dans le DOM	ReactDOM.render(element, document.getElementById('root'))

Conclusion

Bien que JSX rende certainement l'écriture de code React plus intuitive et lisible, comprendre comment utiliser React sans JSX vous donne une appréciation plus profonde de ce qui se passe sous le capot. C'est comme apprendre à conduire une voiture manuelle avant une automatique - cela vous donne plus de contrôle et de compréhension du processus.

N'oubliez pas, que vous utilisiez JSX ou non, les principes fondamentaux de React restent les mêmes. Les composants, les props, l'état et le DOM virtuel fonctionnent tous de la même manière. JSX n'est que du sucre syntaxique qui rend le processus de codage un peu plus sucré !

Donc, la prochaine fois que vous déboguez une application React et que vous voyez React.createElement() dans le code compilé, vous saurez exactement ce qui se passe. Bon codage, et que vos éléments React se rendent toujours vrais !

Credits: Image by storyset