Réagir Rendu HTML
L'objectif de React est à bien des égards de rendre le HTML dans une page Web.
React affiche le HTML sur la page Web en utilisant une fonction appelée
ReactDOM.render().
La fonction de rendu
La ReactDOM.render()fonction prend deux arguments, le code HTML et un élément HTML.
Le but de la fonction est d'afficher le code HTML spécifié à l'intérieur de l'élément HTML spécifié.
Mais rendre où ?
Il existe un autre dossier dans le répertoire racine de votre projet React, nommé "public". Dans ce dossier, il y a un index.htmlfichier.
Vous en remarquerez un <div>
dans le corps de ce fichier. C'est là que notre application React sera rendue.
Exemple
Afficher un paragraphe à l'intérieur d'un élément avec l'id de "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Le résultat est affiché dans l' <div id="root">élément :
<body>
<div id="root"></div>
</body>
Notez que l'identifiant de l'élément n'a pas besoin d'être appelé "root", mais c'est la convention standard.
Obtenir une certification!
95 $ S'INSCRIRE
Le code HTML
Le code HTML de ce tutoriel utilise JSX qui vous permet d'écrire des balises HTML dans le code JavaScript :
Ne vous inquiétez pas si la syntaxe n'est pas familière, vous en apprendrez plus sur JSX dans le chapitre suivant.
Exemple
Créez une variable contenant du code HTML et affichez-la dans le nœud "racine" :
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Le nœud racine
Le nœud racine est l'élément HTML où vous souhaitez afficher le résultat.
C'est comme un conteneur de contenu géré par React.
Il n'a PAS besoin d'être un <div>élément et il n'a PAS besoin d'avoir id='root':
Exemple
Le nœud racine peut être appelé comme vous le souhaitez :
<body>
<header id="sandy"></header>
</body>
Affichez le résultat dans l' <header id="sandy">élément :
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));