diff --git a/README.md b/README.md
index 6f3fb6490192a514dfa80dd8b614d97bb3276786..3e9890d0984fc594f320ae7813b8da3c15441b60 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,8 @@ où `tag` peut prendre comme valeur :
 * `v1` : premier exemple avec la syntaxe JSX  
 * `v2` : premiers composants sans état
   voir `/src/components/first.jsx`, `/src/components/second.jsx` et son utilisation dans `/src/mains.js`
-  
+* `v3` : utilisation des propriétés  
+  voir `/src/components/person.jsx`, `/src/components/personListing.jsx` et son utilisation dans `/src/mains.js`
+    
 Faire ```git checkout main``` pour revenir à la version finale.
 
diff --git a/src/components/person.jsx b/src/components/person.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..fe29ea41cd38bc18d461a744a606cb5ca7283d5e
--- /dev/null
+++ b/src/components/person.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+// import stysheet defining style specific to this component
+import '../style/person.css';
+
+/*
+* define a component that uses props, props is a javascript object
+* reminder : in jsx, code inside {} is javascript interpreted code
+*/
+const Person =
+        props => <div className="person">Here is :
+                   <div>name : <span>{ props.name }</span> </div>
+                   <div>age  : <span>{ props.age }</span> </div>
+                 </div>
+
+export default Person;
diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..4730fde35b4463fa0e8c383430e8fb55c6d42f69
--- /dev/null
+++ b/src/components/personListing.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Person from './person.jsx';
+
+/*
+* props.persons is an Array, here we assume with at least two elements
+* note, in second use of Person, the use of spread operator "..." on object to alleviate the syntax, possible when object field names correspond to props name
+*/
+const PersonListing =
+         props => <div>
+                     Listing :
+                     <Person name={props.persons[0].name} age={props.persons[0].age} />
+                     <Person {...props.persons[1]} />
+                  </div>
+
+export default PersonListing;
diff --git a/src/data/personsData.js b/src/data/personsData.js
new file mode 100644
index 0000000000000000000000000000000000000000..9ba76f55991480c7da0ff381c52c815712a0918f
--- /dev/null
+++ b/src/data/personsData.js
@@ -0,0 +1,14 @@
+const persons = [
+   {
+      id: 'A001',
+      name: "Timoleon",
+      age: 12
+   },
+   {
+      id: 'A002',
+      name: "Bilbo Baggins",
+      age: 111
+   }
+];
+
+export default persons;
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 5dcea1503e85001ee6ce2c452356619fd0577492..bc4e060c4d9614def0f9955b1f8c772ae5abd0a4 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,12 +1,16 @@
 import { createRoot } from 'react-dom/client';
 
-// import component
-import Second from '../components/second.jsx';
+// import data, simulate data retrieval from database, *personsData* is an Array object
+import personsData from '../data/personsData.js';
+
+// import React component
+import PersonListing from '../components/personListing.jsx';
 
 const bootstrapReact = () => {
    const root = createRoot(document.getElementById('insertReactHere'));  // parent for created element = "insertion point"
 
-   root.render(<Second />);             // use defined imported component
+   root.render(<PersonListing persons={ personsData } />);             // use defined imported component
 }
 
+
 window.addEventListener('DOMContentLoaded', bootstrapReact);
diff --git a/src/style/person.css b/src/style/person.css
new file mode 100644
index 0000000000000000000000000000000000000000..07e3a9b073b3587fa5440e8613facd770708dc6d
--- /dev/null
+++ b/src/style/person.css
@@ -0,0 +1,15 @@
+div.person {
+   padding: 4px 8px;
+   margin: 10px;
+   background-color: rgba(128, 128, 255, 0.7);
+   color: white;
+   font-size: medium;
+}
+
+div.person>div {
+   margin: 3px 15px;
+}
+
+div.person span {
+   color: black;
+}
\ No newline at end of file