diff --git a/README.md b/README.md
index ac410438de906656b3897d7dacdbe97d5b7c824e..dccde95d5b20c78ba163e6f4b7ed1cd9002a347b 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 0000000000000000000000000000000000000000..4522201dc12e3cc665d4e7627a240aa5cf5c1969
--- /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 0000000000000000000000000000000000000000..4ab55cb8e596768e0c766e595d9ae801509f4549
--- /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 50d1780ff458a5362f0253a9b7c08198c5b0527e..3961493aaac6d409c157e048603025f9a9a8b0a5 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"