utilisation de props

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.
 

src/components/person.jsx

+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;

src/components/personListing.jsx

+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;

src/data/personsData.js

+const persons = [
+   {
+      id: 'A001',
+      name: "Timoleon",
+      age: 12
+   },
+   {
+      id: 'A002',
+      name: "Bilbo Baggins",
+      age: 111
+   }
+];
+
+export default persons;

src/scripts/main.js

 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);

src/style/person.css

+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