From 5fe1dbe967b70b85ddb869f4a2f03b9262c02123 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Wed, 10 Jan 2024 14:34:24 +0100
Subject: [PATCH] utilisation de props
---
README.md | 4 +++-
src/components/person.jsx | 16 ++++++++++++++++
src/components/personListing.jsx | 16 ++++++++++++++++
src/data/personsData.js | 14 ++++++++++++++
src/scripts/main.js | 10 +++++++---
src/style/person.css | 15 +++++++++++++++
6 files changed, 71 insertions(+), 4 deletions(-)
create mode 100644 src/components/person.jsx
create mode 100644 src/components/personListing.jsx
create mode 100644 src/data/personsData.js
create mode 100644 src/style/person.css
diff --git a/README.md b/README.md
index 6f3fb64..3e9890d 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 0000000..fe29ea4
--- /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 0000000..4730fde
--- /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 0000000..9ba76f5
--- /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 5dcea15..bc4e060 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 0000000..07e3a9b
--- /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
--
GitLab