From b6d996b74b02fed1b88fbf73bbcfaced4dad3dd2 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Wed, 10 Jan 2024 14:06:04 +0100
Subject: [PATCH] =?UTF-8?q?emboitement=20d'=C3=A9l=C3=A9ments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 1 +
src/scripts/main.js | 15 ++++++++++-----
2 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
index b7ba311..4273c1f 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,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
Faire ```git checkout main``` pour revenir à la version finale.
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 6cc1906..32939b2 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -4,11 +4,16 @@ import { createRoot } from 'react-dom/client';
const bootstrapReact = () => {
const root = createRoot(document.getElementById('insertReactHere')); // DOM existing parent for created element = "insertion point"
- root.render(
- React.createElement('h3', // element created by react
- null,
- 'I am a simple component generated with React'),
- );
+ // 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);
+
+ root.render(article);
}
window.addEventListener('DOMContentLoaded', bootstrapReact);
--
GitLab