diff --git a/README.md b/README.md index 56b653d85a16eb52e43058591e608973fd58ea92..bcd7f7ccfab6b740b271740ee476d64c43cfc6bb 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,8 @@ où `tag` peut prendre comme valeur : * `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` +* `v5.1` : gestion d'événements + voir `/src/components/star.jsx` et `onClick` Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/assets/images/star_off.png b/src/assets/images/star_off.png new file mode 100644 index 0000000000000000000000000000000000000000..24677407f3cc08958c93ce1c8bb8417a7aee8c11 Binary files /dev/null and b/src/assets/images/star_off.png differ diff --git a/src/assets/images/star_on.png b/src/assets/images/star_on.png new file mode 100644 index 0000000000000000000000000000000000000000..2ff17d16e1621258670791c773285845bfacb221 Binary files /dev/null and b/src/assets/images/star_on.png differ diff --git a/src/components/star.component.jsx b/src/components/star.component.jsx new file mode 100644 index 0000000000000000000000000000000000000000..2777c4bbd03620d5c324ff0b8d22a0648c041f25 --- /dev/null +++ b/src/components/star.component.jsx @@ -0,0 +1,23 @@ +import { useState } from 'react'; + +import starOn from '../assets/images/star_on.png'; +import starOff from '../assets/images/star_off.png'; + +/* + define component Star, at first Star is off, click on component light on the star using handleClick +*/ +const Star = () => { + const [ on, setOn ] = useState(false) ; + + /* onClick listener, turn the star on if not yet */ + const handleClick = event => setOn(true); // event is not used here, could be omitted + + return( + <img src = { on ? starOn : starOff } + onClick = { handleClick } + /> + ); + +} + +export default Star; diff --git a/src/scripts/main.js b/src/scripts/main.js index 71172216cdc29dd238398b4be77de7f70de3bf5e..b6bdb818a7d343247d5a9d614908ebbdcb5b0d91 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,16 +1,14 @@ import { createRoot } from 'react-dom/client'; -// import data, simulate data retrieval from database, *personsData* is an Array object -import personsData from '../data/personsData.js'; - // import React component -import Person from '../components/person.jsx' -import PersonListing from '../components/personListing.jsx'; +import Star from '../components/star.component.jsx' const bootstrapReact = () => { const root = createRoot(document.getElementById('insertReactHere')); - const component = <PersonListing persons={personsData} delay={2000} /> + const component = <> + <Star /> <Star /> <Star /> + </> root.render(component); }