diff --git a/README.md b/README.md index 6be654c33266595bf3e59c76e7a093b583c5a630..6f3fb6490192a514dfa80dd8b614d97bb3276786 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,8 @@ où `tag` peut prendre comme valeur : voir `/src/scripts/main.js` et le point d'insertion `#insertReactHere` dans `/src/index.html` * `v0.5` : second exemple avec création d'un emboitement d'éléments * `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` + Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/first.jsx b/src/components/first.jsx new file mode 100644 index 0000000000000000000000000000000000000000..55de97fb13ba5bf9c9cf19a4fc9a909454ab1bae --- /dev/null +++ b/src/components/first.jsx @@ -0,0 +1,12 @@ + +/* +* define a stateless React component +*/ +const First = + () => <article> + <h3>React <strong>First component</strong> in action, using JSX</h3> + <div>this div is defined by the <code>First</code> component, in an article element defined as the root of the component</div> + </article>; + + +export default First; diff --git a/src/components/second.jsx b/src/components/second.jsx new file mode 100644 index 0000000000000000000000000000000000000000..af13c020d4d25eef4665feb9cc60bdff5d23cd6c --- /dev/null +++ b/src/components/second.jsx @@ -0,0 +1,16 @@ + +// import some other component +import First from './first.jsx'; + +/* define a stateless React component + * It uses another defined component, here First. + */ +const Second = + () => + <div> + <h3>Second React component that uses another React component</h3> + <p>below comes a <code>First</code> component : </p> + <First /> + </div> + +export default Second; diff --git a/src/scripts/main.js b/src/scripts/main.js index f83143163414f63fff319448cd876b0649cc94d6..5dcea1503e85001ee6ce2c452356619fd0577492 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,16 +1,12 @@ -import React from 'react'; import { createRoot } from 'react-dom/client'; -const bootstrapReact = () => { - const root = createRoot(document.getElementById('insertReactHere')); // DOM existing parent for created element = "insertion point" +// import component +import Second from '../components/second.jsx'; - const article = <article> - <h3>Elements created by React, using jsx</h3> - <div>this div, created by React, is in an article</div> - <div>this div, created by React, is in the same article</div> - </article>; +const bootstrapReact = () => { + const root = createRoot(document.getElementById('insertReactHere')); // parent for created element = "insertion point" - root.render(article); - } + root.render(<Second />); // use defined imported component +} window.addEventListener('DOMContentLoaded', bootstrapReact);