Écrivez votre première application React
Effacez les fichiers du répertoire, du dossier src et du dossier public, créez un nouveau fichier index.js dans le répertoire racine du projet et
écrivez le code suivant dans le fichier
importer React depuis 'react'
importer ReactDOM depuis 'react-dom'
ReactDOM.render(
<h1>Bienvenue dans le monde de React</h1>,
document.getElementById('root')
)
Le développement de React doit introduire plusieurs fichiers dépendants : React et ReactDOM.
ReactDOM.render est la méthode la plus basique de React pour convertir des modèles en langage HTML et insérer des nœuds DOM spécifiés.
Cette méthode reçoit deux paramètres :
- Dans le modèle créé, plusieurs éléments DOM doivent être entourés d'une balise, c'est-à-dire qu'il ne peut y avoir qu'un seul élément racine.
- où insérer ce modèle
réagir ajouter du style
Si vous souhaitez ajouter un attribut de classe à un élément créé, vous ne pouvez pas définir directement la classe mais utilisez className, car class est un mot réservé en javascript.
Par exemple:
importer React depuis 'react'
importer ReactDOM depuis 'react-dom'
ReactDOM.render(
//le style h1_style est importé
<h1 className="h1_style">Bienvenue dans le monde de React</h1>,
document.getElementById('root')
)
Vous pouvez également définir des styles en ligne
importer React depuis 'react'
importer ReactDOM depuis 'react-dom'
ReactDOM.render(
//le style h1_style est importé
<style h1={
{"backgroundColor": "jaune", "color": rouge"}}>Bienvenue dans le monde de React</h1>,
document.getElementById('root')
)
De plus, vous pouvez directement attribuer le style à une variable, puis attribuer la valeur de la variable au style
importer React depuis 'react'
importer ReactDOM depuis 'react-dom'
soit h1_style = {
"backgroundColor": "jaune",
"Couleur jaune"
}
ReactDOM.render(
//le style h1_style est importé
<h1 style={h1_style}>Bienvenue dans le monde de React</h1>,
document.getElementById('root')
)
