From 0cf799f5b7d8cbc37910c794239744d3c27dcbcf Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Wed, 10 Jan 2024 14:18:29 +0100
Subject: [PATCH] =?UTF-8?q?premiers=20composants=20sans=20=C3=A9tat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 4 +++-
src/components/first.jsx | 12 ++++++++++++
src/components/second.jsx | 16 ++++++++++++++++
src/scripts/main.js | 16 ++++++----------
4 files changed, 37 insertions(+), 11 deletions(-)
create mode 100644 src/components/first.jsx
create mode 100644 src/components/second.jsx
diff --git a/README.md b/README.md
index 6be654c..6f3fb64 100644
--- a/README.md
+++ b/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.
diff --git a/src/components/first.jsx b/src/components/first.jsx
new file mode 100644
index 0000000..55de97f
--- /dev/null
+++ b/src/components/first.jsx
@@ -0,0 +1,12 @@
+
+/*
+* 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;
diff --git a/src/components/second.jsx b/src/components/second.jsx
new file mode 100644
index 0000000..af13c02
--- /dev/null
+++ b/src/components/second.jsx
@@ -0,0 +1,16 @@
+
+// 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;
diff --git a/src/scripts/main.js b/src/scripts/main.js
index f831431..5dcea15 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,16 +1,12 @@
-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);
--
GitLab