diff --git a/README.md b/README.md index 4273c1f4da5c5efbfd4348f06940cc4c7fb12fa7..6be654c33266595bf3e59c76e7a093b583c5a630 100644 --- a/README.md +++ b/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. diff --git a/src/scripts/main.js b/src/scripts/main.js index 32939b293e9ac8046179813e67c3c62359dffd3a..f83143163414f63fff319448cd876b0649cc94d6 100644 --- a/src/scripts/main.js +++ b/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); }