diff --git a/README.md b/README.md index 6f3fb6490192a514dfa80dd8b614d97bb3276786..3e9890d0984fc594f320ae7813b8da3c15441b60 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,8 @@ où `tag` peut prendre comme valeur : * `v1` : premier exemple avec la syntaxe JSX * `v2` : premiers composants sans état voir `/src/components/first.jsx`, `/src/components/second.jsx` et son utilisation dans `/src/mains.js` - +* `v3` : utilisation des propriétés + voir `/src/components/person.jsx`, `/src/components/personListing.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 new file mode 100644 index 0000000000000000000000000000000000000000..fe29ea41cd38bc18d461a744a606cb5ca7283d5e --- /dev/null +++ b/src/components/person.jsx @@ -0,0 +1,16 @@ +import React 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 = + props => <div className="person">Here is : + <div>name : <span>{ props.name }</span> </div> + <div>age : <span>{ props.age }</span> </div> + </div> + +export default Person; diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx new file mode 100644 index 0000000000000000000000000000000000000000..4730fde35b4463fa0e8c383430e8fb55c6d42f69 --- /dev/null +++ b/src/components/personListing.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +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 = + props => <div> + Listing : + <Person name={props.persons[0].name} age={props.persons[0].age} /> + <Person {...props.persons[1]} /> + </div> + +export default PersonListing; diff --git a/src/data/personsData.js b/src/data/personsData.js new file mode 100644 index 0000000000000000000000000000000000000000..9ba76f55991480c7da0ff381c52c815712a0918f --- /dev/null +++ b/src/data/personsData.js @@ -0,0 +1,14 @@ +const persons = [ + { + id: 'A001', + name: "Timoleon", + age: 12 + }, + { + id: 'A002', + name: "Bilbo Baggins", + age: 111 + } +]; + +export default persons; diff --git a/src/scripts/main.js b/src/scripts/main.js index 5dcea1503e85001ee6ce2c452356619fd0577492..bc4e060c4d9614def0f9955b1f8c772ae5abd0a4 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,12 +1,16 @@ import { createRoot } from 'react-dom/client'; -// import component -import Second from '../components/second.jsx'; +// import data, simulate data retrieval from database, *personsData* is an Array object +import personsData from '../data/personsData.js'; + +// import React component +import PersonListing from '../components/personListing.jsx'; const bootstrapReact = () => { const root = createRoot(document.getElementById('insertReactHere')); // parent for created element = "insertion point" - root.render(<Second />); // use defined imported component + root.render(<PersonListing persons={ personsData } />); // use defined imported component } + window.addEventListener('DOMContentLoaded', bootstrapReact); diff --git a/src/style/person.css b/src/style/person.css new file mode 100644 index 0000000000000000000000000000000000000000..07e3a9b073b3587fa5440e8613facd770708dc6d --- /dev/null +++ b/src/style/person.css @@ -0,0 +1,15 @@ +div.person { + padding: 4px 8px; + margin: 10px; + background-color: rgba(128, 128, 255, 0.7); + color: white; + font-size: medium; +} + +div.person>div { + margin: 3px 15px; +} + +div.person span { + color: black; +} \ No newline at end of file