From ff720ea15a29f1d608227975793330dedf618a2e Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Thu, 11 Jan 2024 14:06:45 +0100
Subject: [PATCH] =?UTF-8?q?d=C3=A9finitions=20locales=20et=20valeurs=20par?=
=?UTF-8?q?=20d=C3=A9faut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 2 ++
src/components/person.jsx | 17 ++++++++++++-----
src/components/personListing.jsx | 14 +++++++-------
src/scripts/main.js | 9 +++++----
4 files changed, 26 insertions(+), 16 deletions(-)
diff --git a/README.md b/README.md
index dccde95..d1514f1 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,8 @@ où `tag` peut prendre comme valeur :
* `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`
+* `v4.5` : définitions locales et valeurs par défaut
+ voir `/src/components/person.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
index f15bfc7..bbfc845 100644
--- a/src/components/person.jsx
+++ b/src/components/person.jsx
@@ -7,10 +7,17 @@ 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 =
- ( { name, age } ) => <div className="person">Here is :
- <div>name : <span>{ name }</span> </div>
- <div>age : <span>{ age }</span> </div>
- </div>
+const Person = ( { name = 'Anonymous' , age } ) => {
+ const year_or_years = age > 1 ? 'years' : 'year';
+ const ADULT_AGE = 18;
+ const childOrNot = age => age < ADULT_AGE ? 'young' : 'adult' ;
+
+ return (
+ <div className="person">Here is the <span>{childOrNot(age)}</span>:
+ <div>name : <span>{ name }</span> </div>
+ <div>age : <span>{age} {year_or_years} </span> </div>
+ </div>
+ );
+}
export default Person;
diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx
index 8761f39..064b127 100644
--- a/src/components/personListing.jsx
+++ b/src/components/personListing.jsx
@@ -6,12 +6,12 @@ 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 =
- ({ persons , children }) => <div>
- Listing :
- <Person { ...persons[0] } />
- <Person { ...persons[1] } />
- { children }
- </div>
+const PersonListing = ({ persons , children }) =>
+ (<div>
+ Person listing :
+ <Person { ...persons[0] } />
+ <Person { ...persons[1] } />
+ { children }
+ </div>);
export default PersonListing;
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 3961493..6c1b4a4 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -4,16 +4,17 @@ import { createRoot } from 'react-dom/client';
import personsData from '../data/personsData.js';
// import React component
-import Person from '../components/person_class.jsx'
-import PersonListing from '../components/personListing_class.jsx';
+import Person from '../components/person.jsx'
+import PersonListing from '../components/personListing.jsx';
const bootstrapReact = () => {
const root = createRoot(document.getElementById('insertReactHere')); // parent for created element = "insertion point"
const component = <PersonListing persons={personsData}>
- <h3>This node and followings are children and then correspond to <code>props.children</code></h3>
- <Person name="Someone Else" age={42} />
+ <h3>This node and followings are children and then correspond to prop <code>children</code></h3>
+ <Person age={42} />
<Person name="New One" age={1} />
+ <Person name="Mysterious" />
</PersonListing>;
root.render(component);
--
GitLab