À la base, il n'y a aucune compilation nécessaire pour faire fonctionner du code React. L'exemple proposé dans cette fiche le démontre clairement. Il utilise une syntaxe que le navigateur comprendra de façon native.
Cette syntaxe est intéressante dans les petits projets.
Dans les projets de plus grande envergure, il est plus intéressant d'utiliser la syntaxe avec JSX, qui nécessite l'utilisation d'un précompilateur, puisque le code sera plus facile à lire et à écrire.
Puisque React génère du code JavaScript, la page qui l'utilise doit charger les fichiers JavaScript requis : ceux de React en tant que tel ainsi que ceux de nos composants React.
Exemple typique adapté de la documentation React1 :
<!-- Charge React -->
<!-- Remarque : pour le déploiement, remplacez "development.js" par "production.min.js" -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Charge mon composant React -->
<script src="MonComposant.js"></script>
Une page Web doit contenir un élément du DOM comme point d'entrée pour le code React. On l'appellera conteneur DOM.
Souvent, ce sera une division avec un id ou une classe particulière.
<div id="react-mon-composant"></div>
Au bas du fichier qui définit le composant, on fera le nécessaire pour que React remplace le conteneur DOM par le code généré pour ce composant.
Dans cet exemple, le composant génère un bouton dont le libellé contient le nombre de fois où le bouton a été cliqué.
class MonComposant extends React.Component {
constructor(props) {
super(props);
this.state = { compteur: 0 };
}
render() {
return React.createElement(
'button',
{ onClick: () => this.setState({ compteur: this.state.compteur + 1 }) },
'Vous avez cliqué ' + this.state.compteur + ' fois'
);
}
if (document.getElementById('react-mon-composant')) {
const element = document.getElementById('react-mon-composant')
ReactDOM.render(React.createElement(MonComposant), element);
}
Prenons le cas où le nombre de clics doit avoir une valeur initiale différente de zéro.
Il est possible d'initialiser une propriété à partir d'attributs data comme suit :
<div id="react-mon-composant" data-compteur-initial="3"></div>
class MonComposant extends React.Component {
constructor(props) {
super(props);
this.state = { compteur: parseInt(this.props.compteurInitial) };
}
render() {
return React.createElement(
'button',
{ onClick: () => this.setState({ compteur: this.state.compteur + 1 }) },
'Vous avez cliqué ' + this.state.compteur + ' fois'
);
}
if (document.getElementById('react-mon-composant')) {
const element = document.getElementById('react-mon-composant')
const props = Object.assign({}, element.dataset)
ReactDOM.render(React.createElement(MonComposant, props), element);
}
Vous verrez parfois l'utilisation d'un raccourci nommé e() pour remplacer React.createElement() comme suit :
const e = React.createElement;
...
ReactDOM.render(e(MonComposant, props), element);
Remarquez que si vous utilisez JSX pour intégrer un composant React sur une page Web, l'appel à React.createElement() ne sera plus nécessaire.
1. « Ajouter React à un site web ». React. https://fr.reactjs.org/docs/add-react-to-a-website.html
▼Publicité
