From 26cba62d85fe73e79b02382be93b32e9b308e1b7 Mon Sep 17 00:00:00 2001 From: Jean-Christophe <> Date: Fri, 19 Jan 2024 14:28:41 +0100 Subject: [PATCH] =?UTF-8?q?premier=20composant=20=C3=A0=20=C3=A9tat?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 +++-- src/components/person.jsx | 16 ++++++++-------- src/components/personListing.jsx | 4 +++- src/components/personListing_class.jsx | 23 ----------------------- src/scripts/main.js | 15 +++++---------- 5 files changed, 19 insertions(+), 44 deletions(-) delete mode 100644 src/components/personListing_class.jsx diff --git a/README.md b/README.md index 6aff103..56b653d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Introduction à React -Ce dépôt contient le code utilisé en exemple dans le cours [https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react.html](https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react.html). +Ce dépôt contient le code utilisé en exemple dans le cours [https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react.html](https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react.html) et [https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react-2.html](https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react-2.html). Plusieurs versions progressives du dépôt pour accompagner le cours. @@ -42,7 +42,8 @@ où `tag` peut prendre comme valeur : voir `/src/components/personListing.jsx` /!\\ mais **cette version pose problème** car il manque la gestion de la propriété `key` : voir dans la console * `v4.6` : génération d'une liste de composants avec gestion de la propriété `key` - +* `v5` : premier composant à état + voir `/src/components/person.jsx` Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/person.jsx b/src/components/person.jsx index bbfc845..8024779 100644 --- a/src/components/person.jsx +++ b/src/components/person.jsx @@ -1,22 +1,22 @@ -import React from 'react'; +import { useState } 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 = ( { name = 'Anonymous' , age } ) => { +const Person = ( { name = 'Anonymous' , age , delay } ) => { + + const [ currentAge, setCurrentAge ] = useState(age); - const year_or_years = age > 1 ? 'years' : 'year'; - const ADULT_AGE = 18; - const childOrNot = age => age < ADULT_AGE ? 'young' : 'adult' ; + // become older every delay ms + setInterval( () => setCurrentAge( currentAge + 1 ), delay); return ( - <div className="person">Here is the <span>{childOrNot(age)}</span>: + <div className="person">Here is : <div>name : <span>{ name }</span> </div> - <div>age : <span>{age} {year_or_years} </span> </div> + <div>age : <span>{ currentAge } </span> </div> </div> ); } diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx index 0bba56a..eca5ec7 100644 --- a/src/components/personListing.jsx +++ b/src/components/personListing.jsx @@ -6,13 +6,15 @@ import Person from './person.jsx'; * props.persons is an Array, here we assume with at least two elements * Here a list of components is built, but no "key" property is provided => /!\ pb, see console */ -const PersonListing = ({ persons , children }) => { +const PersonListing = ({ persons , delay }) => { const personComponents = persons.map(person => <Person {...person} key={person.id} + delay = { delay } />); return ( <div> + People getting older every <span class="highlight">{delay}</span> seconds {personComponents} </div> ); diff --git a/src/components/personListing_class.jsx b/src/components/personListing_class.jsx deleted file mode 100644 index 4522201..0000000 --- a/src/components/personListing_class.jsx +++ /dev/null @@ -1,23 +0,0 @@ -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/scripts/main.js b/src/scripts/main.js index 6c1b4a4..7117221 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -7,18 +7,13 @@ import personsData from '../data/personsData.js'; 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 bootstrapReact = () => { + const root = createRoot(document.getElementById('insertReactHere')); - const component = <PersonListing persons={personsData}> - <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>; + const component = <PersonListing persons={personsData} delay={2000} /> - root.render(component); -} + root.render(component); + } window.addEventListener('DOMContentLoaded', bootstrapReact); -- GitLab