premiers éléments syntaxe JSX

README.md

@@ -27,6 +27,7 @@ où `tag` peut prendre comme valeur :
 * `v0` : premier exemple basique avec *React*  
    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  
 
 Faire ```git checkout main``` pour revenir à la version finale.
 

src/scripts/main.js

@@ -4,14 +4,11 @@ import { createRoot } from 'react-dom/client';
 const bootstrapReact = () => {
       const root = createRoot(document.getElementById('insertReactHere'));  // DOM existing parent for created element = "insertion point"
 
-   // create an h3 element with text as child
-   const innerH3 = React.createElement('h3', null, 'Elements created by React');
-   // create a div element with text as child
-   const innerDiv1 = React.createElement('div', null, 'this div, created by React, is in an article');
-   // create a div element with text as child
-   const innerDiv2 = React.createElement('div', null, 'this div, created by React, is in the same article');
-   // create an article div element with three above created elements as children
-   const article = React.createElement('article', null, innerH3, innerDiv1, innerDiv2);
+   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>;
 
    root.render(article);
    }