premiers composants sans état

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.
 

src/components/first.jsx

+
+/*
+* 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;

src/components/second.jsx

+
+// 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;

src/scripts/main.js

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