added useRef, useContext examples

react_alap/mai/package-lock.json

@@ -7,11 +7,12 @@
     "": {
       "name": "mai",
       "version": "0.1.0",
+      "license": "ISC",
       "dependencies": {
         "cra-template": "1.2.0",
-        "react": "19.0.0",
+        "react": "^19.0.0",
-        "react-dom": "19.0.0",
+        "react-dom": "^19.0.0",
-        "react-scripts": "5.0.1"
+        "react-scripts": "^5.0.1"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -13722,7 +13723,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
       "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
-      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -16116,17 +16116,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.7.2",
+      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "license": "Apache-2.0",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {

react_alap/mai/package.json

@@ -6,7 +6,7 @@
     "cra-template": "1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -31,5 +31,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC"
 }

react_alap/mai/src/App.js

@@ -3,11 +3,15 @@ import './App.css';
 import Auto from './Auto';
 import Szamlalo from './Szamlalo';
 import Adatlekero from './Adatlekero';
+import Keslelteto from './Keslelteto';
+import Idozito from './Idozito';
+import ContextPelda from './ContextPelda';
+import UseRefPelda from './UseRefPelda';
 
 function App() {
   return (
     <>
-    <Szamlalo></Szamlalo>
+      <UseRefPelda/>
     </>
   );
 }

react_alap/mai/src/ContextPelda.js

@@ -0,0 +1,31 @@
+import { useEffect, useState, createContext, useContext } from "react";
+
+let UserContext = createContext();
+
+function ContextPelda(){
+    let [name, setName] = useState("Pop Simon");
+
+    return (
+        <UserContext.Provider value={name}>
+            <h1>Üdv, {name}</h1>
+            <Content2></Content2>
+        </UserContext.Provider>
+    )
+}
+
+function Content2(){
+    return (
+        <Component3></Component3>
+    )
+}
+
+function Component3(){
+    let name = useContext(UserContext);
+    return (
+        <>
+            Üdv újra, {name}
+        </>
+    )
+}
+
+export default ContextPelda;

react_alap/mai/src/Idozito.js

@@ -0,0 +1,20 @@
+import {useState, useEffect} from "react";
+
+function Idozito(){
+    let [counter, setCounter] = useState(0);
+
+    useEffect(() => {
+        let timer = 
+        setInterval(() => {
+            setCounter((counter) => counter + 1);
+        }, 1000);
+
+        return () => {
+            clearInterval(timer);
+        }
+    }, []);
+
+    return <h1>A counter értéke: {counter}</h1>;
+}
+
+export default Idozito;

react_alap/mai/src/Keslelteto.js

@@ -0,0 +1,20 @@
+import {useState, useEffect} from "react";
+
+function Keslelteto(){
+    let [counter, setCounter] = useState(0);
+
+    useEffect(() => {
+        let timer = 
+        setTimeout(() => {
+            setCounter((counter) => counter + 1);
+        }, 3000);
+
+        return () => {
+            clearTimeout(timer);
+        }
+    }, []);
+
+    return <h1>A counter értéke: {counter}</h1>;
+}
+
+export default Keslelteto;

react_alap/mai/src/UseRefPelda.js

@@ -0,0 +1,24 @@
+import {useState, useEffect, useRef} from 'react';
+
+function UseRefPelda(){
+    let [inputValue, setinputValue] = useState("");
+    let count = useRef(0);
+
+    useEffect(() => {
+        count.current = count.current + 1;
+    });
+
+    return (
+        <>
+            <input
+                type='text'
+                value={inputValue}
+                onChange={(event) => setinputValue(event.target.value)}
+            /> 
+            <h1>Rendelések száma: {count.current}</h1>
+        </>
+    );
+
+}
+
+export default UseRefPelda;