React - Les composants React

React – Les composants

Les composants React implémentent une méthode render() qui prend des données en entrée et retourne ce qui doit être affiché.

Les données passées au composant sont accessibles dans render() via this.props.

Les composants permettent de découper l’interface utilisateur en éléments indépendants et réutilisables.

Chaque élément peut être alors considéré de manière isolée.

Exemple : Composant <Hello />

HTML


<div id="pos"></div>

Javascript


const Hello = function(){
       //Donner à React le code HTML à afficher
	return Hello world
}
//// Demander à React d'attacher le composant Hello à la div qui a pour id 'pos' 
ReactDOM.render(<Hello />, document.getElementById('pos'));

Ajouter un style (noter fontSize au lieu de font-size avec les CSS)

Le style est un objet {} et on ajoute un objet {{ }}


const Hello = function(){
	return <h1 style={{color: 'red',fontSize: '40px'}}>Hello world</h1>
}

Ajouter une classe (noter className au lieu de class avec HTML)


const Hello = function(){
	return <h1 className= "entete" >Hello world</h1>

Jsfiddle

Publier 27 février 2020 par sm2017 dans Non classifié(e) Commentaires fermés