From 0155eadb71c7831b726de7e9a1d2cec46d5fc380 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Wed, 10 Jan 2024 15:21:04 +0100
Subject: [PATCH] classe de composants

---
 README.md                              |  2 ++
 src/components/personListing_class.jsx | 23 +++++++++++++++++++++++
 src/components/person_class.jsx        | 22 ++++++++++++++++++++++
 src/scripts/main.js                    |  4 ++--
 4 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/components/personListing_class.jsx
 create mode 100644 src/components/person_class.jsx

diff --git a/README.md b/README.md
index ac41043..dccde95 100644
--- a/README.md
+++ b/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.
 
diff --git a/src/components/personListing_class.jsx b/src/components/personListing_class.jsx
new file mode 100644
index 0000000..4522201
--- /dev/null
+++ b/src/components/personListing_class.jsx
@@ -0,0 +1,23 @@
+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>
+      );
+   }
+}
diff --git a/src/components/person_class.jsx b/src/components/person_class.jsx
new file mode 100644
index 0000000..4ab55cb
--- /dev/null
+++ b/src/components/person_class.jsx
@@ -0,0 +1,22 @@
+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;
+   }
+}
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 50d1780..3961493 100644
--- a/src/scripts/main.js
+++ b/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"
-- 
GitLab