From 396c3523adaa55a69a6fc25a797d92c1384103fc Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Wed, 10 Jan 2024 14:08:33 +0100
Subject: [PATCH] =?UTF-8?q?premiers=20=C3=A9l=C3=A9ments=20syntaxe=20JSX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 1 +
src/scripts/main.js | 13 +++++--------
2 files changed, 6 insertions(+), 8 deletions(-)
diff --git a/README.md b/README.md
index 4273c1f..6be654c 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 32939b2..f831431 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);
}
--
GitLab