React:Constructeur et propriétés

folder Projet: test_react_project

Chaque Component se compose de :

  1. Constructeur : Permettant de déclarer et d'initialiser les propriétés et le State de la classe Component
  2. Méthodes Personnalisé : Ces méthodes peuvent être écrites selon le besoin
  3. La fonction render() : Permettant d'afficher le code JSX (HTML+JS)

La component principale App.js


/*Importer le Css */
import React from 'react';
import './App.css';
class  App extends React.Component{

 
  /*props:est une paramètre qui permet de récupéer les données envoyer par une autre component */
  constructor(props)
  {
    /*Appeler le constructeur del classeMere React.Component */
    super(props);
    //déclaration des propriétés
    this.nom="abc";
    this.age=12;
    this.groupe={nom:"FS203",filiere:"FS"};
  }

 
fonction1(x) {
//Traitement....
 
}

/*ou on peut créer une fonction sous la forme */
fonction2=(x)=>
{
  //traitement
}

  render()
  {
return (
  /*<div> est obligatoire  */
 <div>
 {/* Appeler les propriétés et les méthodes */}
 <table className='table'>
    <tr>
       <td>Le nom :</td>
       <td>{this.nom}</td>
   </tr>
  <tr>
    <td>l'age :</td>
    <td> {this.age} </td>
  </tr>
  <tr>
    <td colSpan={2}><input type="button" onClick={this.fonction1} value="Click me"/></td>
  </tr>
  </table>
Groupe:{this.groupe.nom} <br/>
filiere:{this.groupe.filiere}
 </div>
);
}
}
/*Exporter le fichier pour l'importer dans une autre components */
export default App;

App.css

.table, .table tr, .table td{width: 100;border: 1px solid #000;}

Lancer le projet

npm start