From 0155eadb71c7831b726de7e9a1d2cec46d5fc380 Mon Sep 17 00:00:00 2001 From: Jean-Christophe <> Date: Wed, 10 Jan 2024 15:21:04 +0100 Subject: [PATCH] classe de composants --- README.md | 2 ++ src/components/personListing_class.jsx | 23 +++++++++++++++++++++++ src/components/person_class.jsx | 22 ++++++++++++++++++++++ src/scripts/main.js | 4 ++-- 4 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 src/components/personListing_class.jsx create mode 100644 src/components/person_class.jsx diff --git a/README.md b/README.md index ac41043..dccde95 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 0000000..4522201 --- /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 0000000..4ab55cb --- /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 50d1780..3961493 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" -- GitLab