classe de composants

README.md

@@ -34,6 +34,8 @@ où `tag` peut prendre comme valeur :
   voir `/src/components/person.jsx`, `/src/components/personListing.jsx` et son utilisation dans `/src/mains.js`
 * `v3.1` : utilisation  de la syntaxe de pattern matching sur les objets pour destructurer l'objet `props` dans le paramètre du constructeur du composant.
 * `v3.2` : la propriété `children`  
+* `v4` : définition des composants à l'aide de classes   
+  voir `/src/components/person_class.jsx`, `/src/components/personListing_class.jsx` et son utilisation dans `/src/mains.js`
 
 Faire ```git checkout main``` pour revenir à la version finale.
 

src/components/personListing_class.jsx

+import React from 'react';
+
+import Person from './person_class.jsx';
+
+/*
+* props.persons is an Array of length 2 containing "person objects"
+* props.children corresponds to children given to element when using it
+*/
+export default class PersonListing extends React.Component {
+   constructor(props) {
+      super(props);
+   }
+
+   render() {
+      return (
+         <div>
+            <Person { ...this.props.persons[0] } />
+            <Person { ...this.props.persons[1] } />
+            { this.props.children }
+         </div>
+      );
+   }
+}

src/components/person_class.jsx

+import React from 'react';
+
+import '../style/person.css';
+
+/*
+ * define component as a class that extends React.component
+*/
+export default class Person extends React.Component {
+   constructor(props) {
+      super(props);
+   }
+
+   render() {
+      const { name , age } = this.props;
+
+      const view = <div className="person">Here is :
+         <div>name : <span>{ name }</span> </div>
+         <div>age  : <span>{ age }</span> </div>
+      </div>
+      return view;
+   }
+}

src/scripts/main.js

@@ -4,8 +4,8 @@ import { createRoot } from 'react-dom/client';
 import personsData from '../data/personsData.js';
 
 // import React component
-import Person from '../components/person.jsx'
-import PersonListing from '../components/personListing.jsx';
+import Person from '../components/person_class.jsx'
+import PersonListing from '../components/personListing_class.jsx';
 
 const bootstrapReact = () => {
    const root = createRoot(document.getElementById('insertReactHere'));  // parent for created element = "insertion point"