premier composant à état

README.md

 # 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.
 

src/components/person.jsx

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

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

src/components/personListing_class.jsx

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

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