feat (frameworks/react): hook updates and reducer

santanche · Aug 29, 2024 · d9348dc · d9348dc
1 parent db9e85b
commit d9348dc
Show file tree

Hide file tree

Showing 38 changed files with 14,435 additions and 0 deletions.
diff --git a/frameworks/react/6-hook-state/index.html → frameworks/react/6-1-hook-state/index.html b/frameworks/react/6-hook-state/index.html → frameworks/react/6-1-hook-state/index.html
diff --git a/...orks/react/6-hook-state/package-lock.json → ...ks/react/6-1-hook-state/package-lock.json b/...orks/react/6-hook-state/package-lock.json → ...ks/react/6-1-hook-state/package-lock.json
diff --git a/frameworks/react/6-hook-state/package.json → frameworks/react/6-1-hook-state/package.json b/frameworks/react/6-hook-state/package.json → frameworks/react/6-1-hook-state/package.json
diff --git a/...react/6-hook-state/src/MedicationItem.jsx → ...act/6-1-hook-state/src/MedicationItem.jsx b/...react/6-hook-state/src/MedicationItem.jsx → ...act/6-1-hook-state/src/MedicationItem.jsx
diff --git a/...t/6-hook-state/src/assets/medication1.svg → ...6-1-hook-state/src/assets/medication1.svg b/...t/6-hook-state/src/assets/medication1.svg → ...6-1-hook-state/src/assets/medication1.svg
diff --git a/...t/6-hook-state/src/assets/medication2.svg → ...6-1-hook-state/src/assets/medication2.svg b/...t/6-hook-state/src/assets/medication2.svg → ...6-1-hook-state/src/assets/medication2.svg
diff --git a/frameworks/react/6-hook-state/src/main.jsx → frameworks/react/6-1-hook-state/src/main.jsx b/frameworks/react/6-hook-state/src/main.jsx → frameworks/react/6-1-hook-state/src/main.jsx
diff --git a/frameworks/react/6-hook-state/vite.config.js → ...works/react/6-1-hook-state/vite.config.js b/frameworks/react/6-hook-state/vite.config.js → ...works/react/6-1-hook-state/vite.config.js
diff --git a/frameworks/react/7-hook-context/index.html → ...ks/react/6-2-hook-state-object/index.html b/frameworks/react/7-hook-context/index.html → ...ks/react/6-2-hook-state-object/index.html
diff --git a/...ks/react/7-hook-context/package-lock.json → ...t/6-2-hook-state-object/package-lock.json b/...ks/react/7-hook-context/package-lock.json → ...t/6-2-hook-state-object/package-lock.json
diff --git a/frameworks/react/7-hook-context/package.json → .../react/6-2-hook-state-object/package.json b/frameworks/react/7-hook-context/package.json → .../react/6-2-hook-state-object/package.json
diff --git a/frameworks/react/6-2-hook-state-object/src/MedicationItem.jsx b/frameworks/react/6-2-hook-state-object/src/MedicationItem.jsx
@@ -0,0 +1,28 @@
+import { useState } from 'react'
+
+export default function MedicationItem() {
+  const [medication, setMedication] = useState({
+    name: 'Velocirest',
+    description: 'Description of dosage and frequency of use of Velocirest.',
+    image: '/src/assets/medication1.svg',
+    dose: 200,
+    unity: 'mg',
+    quantity: 1,
+    frequency: 'day'
+    })
+
+  const { name, description, image, dose, unity, quantity, frequency } = medication;
+
+  return (
+    <div style={{ width: '300px', background: 'lightgray' }}>
+      <img src={image} width="50px" />
+      <h1>{name}</h1>
+      <p>{description}</p>
+      <p><b>dose:</b> {dose} {unity}</p>
+      <p><b>frequency:</b> {quantity} / {frequency}</p>
+      <button type="button" onClick={() => setMedication({ ...medication, quantity: quantity + 1 })}>
+        Increase quantity
+      </button>
+    </div>
+  );
+}
diff --git a/...7-hook-context/src/assets/medication1.svg → ...k-state-object/src/assets/medication1.svg b/...7-hook-context/src/assets/medication1.svg → ...k-state-object/src/assets/medication1.svg
diff --git a/frameworks/react/6-2-hook-state-object/src/main.jsx b/frameworks/react/6-2-hook-state-object/src/main.jsx
@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom/client'
+import MedicationItem from './MedicationItem.jsx'
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
+  <MedicationItem />
+)
diff --git a/...works/react/7-hook-context/vite.config.js → ...eact/6-2-hook-state-object/vite.config.js b/...works/react/7-hook-context/vite.config.js → ...eact/6-2-hook-state-object/vite.config.js
diff --git a/frameworks/react/7-hook-effect-object/index.html b/frameworks/react/7-hook-effect-object/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>React App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="src/main.jsx" type="module"></script>
+</body>
+</html>