From 9c5ca86086c18ff696a76ed648aa3d403853fed3 Mon Sep 17 00:00:00 2001 From: szabomarton Date: Fri, 17 Jan 2025 09:17:41 +0100 Subject: [PATCH] added useRef, useContext examples --- .../Frontend_25_01_07.pptx | Bin {25_01_07 => react_alap}/mai/.gitignore | 0 {25_01_07 => react_alap}/mai/README.md | 0 .../mai/package-lock.json | 17 +++++----- {25_01_07 => react_alap}/mai/package.json | 8 +++-- .../mai/public/favicon.ico | Bin .../mai/public/index.html | 0 .../mai/public/logo192.png | Bin .../mai/public/logo512.png | Bin .../mai/public/manifest.json | 0 .../mai/public/robots.txt | 0 .../mai/src/Adatlekero.js | 0 {25_01_07 => react_alap}/mai/src/App.css | 0 {25_01_07 => react_alap}/mai/src/App.js | 6 +++- {25_01_07 => react_alap}/mai/src/App.test.js | 0 {25_01_07 => react_alap}/mai/src/Auto.js | 0 react_alap/mai/src/ContextPelda.js | 31 ++++++++++++++++++ react_alap/mai/src/Idozito.js | 20 +++++++++++ react_alap/mai/src/Keslelteto.js | 20 +++++++++++ {25_01_07 => react_alap}/mai/src/Szamlalo.js | 0 react_alap/mai/src/UseRefPelda.js | 24 ++++++++++++++ {25_01_07 => react_alap}/mai/src/index.css | 0 {25_01_07 => react_alap}/mai/src/index.js | 0 {25_01_07 => react_alap}/mai/src/logo.svg | 0 .../mai/src/reportWebVitals.js | 0 .../mai/src/setupTests.js | 0 26 files changed, 114 insertions(+), 12 deletions(-) rename {25_01_07 => react_alap}/Frontend_25_01_07.pptx (100%) rename {25_01_07 => react_alap}/mai/.gitignore (100%) rename {25_01_07 => react_alap}/mai/README.md (100%) rename {25_01_07 => react_alap}/mai/package-lock.json (99%) rename {25_01_07 => react_alap}/mai/package.json (75%) rename {25_01_07 => react_alap}/mai/public/favicon.ico (100%) rename {25_01_07 => react_alap}/mai/public/index.html (100%) rename {25_01_07 => react_alap}/mai/public/logo192.png (100%) rename {25_01_07 => react_alap}/mai/public/logo512.png (100%) rename {25_01_07 => react_alap}/mai/public/manifest.json (100%) rename {25_01_07 => react_alap}/mai/public/robots.txt (100%) rename {25_01_07 => react_alap}/mai/src/Adatlekero.js (100%) rename {25_01_07 => react_alap}/mai/src/App.css (100%) rename {25_01_07 => react_alap}/mai/src/App.js (55%) rename {25_01_07 => react_alap}/mai/src/App.test.js (100%) rename {25_01_07 => react_alap}/mai/src/Auto.js (100%) create mode 100644 react_alap/mai/src/ContextPelda.js create mode 100644 react_alap/mai/src/Idozito.js create mode 100644 react_alap/mai/src/Keslelteto.js rename {25_01_07 => react_alap}/mai/src/Szamlalo.js (100%) create mode 100644 react_alap/mai/src/UseRefPelda.js rename {25_01_07 => react_alap}/mai/src/index.css (100%) rename {25_01_07 => react_alap}/mai/src/index.js (100%) rename {25_01_07 => react_alap}/mai/src/logo.svg (100%) rename {25_01_07 => react_alap}/mai/src/reportWebVitals.js (100%) rename {25_01_07 => react_alap}/mai/src/setupTests.js (100%) diff --git a/25_01_07/Frontend_25_01_07.pptx b/react_alap/Frontend_25_01_07.pptx similarity index 100% rename from 25_01_07/Frontend_25_01_07.pptx rename to react_alap/Frontend_25_01_07.pptx diff --git a/25_01_07/mai/.gitignore b/react_alap/mai/.gitignore similarity index 100% rename from 25_01_07/mai/.gitignore rename to react_alap/mai/.gitignore diff --git a/25_01_07/mai/README.md b/react_alap/mai/README.md similarity index 100% rename from 25_01_07/mai/README.md rename to react_alap/mai/README.md diff --git a/25_01_07/mai/package-lock.json b/react_alap/mai/package-lock.json similarity index 99% rename from 25_01_07/mai/package-lock.json rename to react_alap/mai/package-lock.json index 1e041cc..d09d356 100644 --- a/25_01_07/mai/package-lock.json +++ b/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-dom": "19.0.0", - "react-scripts": "5.0.1" + "react": "^19.0.0", + "react-dom": "^19.0.0", + "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", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz", - "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==", - "license": "Apache-2.0", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=14.17" + "node": ">=4.2.0" } }, "node_modules/unbox-primitive": { diff --git a/25_01_07/mai/package.json b/react_alap/mai/package.json similarity index 75% rename from 25_01_07/mai/package.json rename to react_alap/mai/package.json index 7c26997..5f6d8be 100644 --- a/25_01_07/mai/package.json +++ b/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" } diff --git a/25_01_07/mai/public/favicon.ico b/react_alap/mai/public/favicon.ico similarity index 100% rename from 25_01_07/mai/public/favicon.ico rename to react_alap/mai/public/favicon.ico diff --git a/25_01_07/mai/public/index.html b/react_alap/mai/public/index.html similarity index 100% rename from 25_01_07/mai/public/index.html rename to react_alap/mai/public/index.html diff --git a/25_01_07/mai/public/logo192.png b/react_alap/mai/public/logo192.png similarity index 100% rename from 25_01_07/mai/public/logo192.png rename to react_alap/mai/public/logo192.png diff --git a/25_01_07/mai/public/logo512.png b/react_alap/mai/public/logo512.png similarity index 100% rename from 25_01_07/mai/public/logo512.png rename to react_alap/mai/public/logo512.png diff --git a/25_01_07/mai/public/manifest.json b/react_alap/mai/public/manifest.json similarity index 100% rename from 25_01_07/mai/public/manifest.json rename to react_alap/mai/public/manifest.json diff --git a/25_01_07/mai/public/robots.txt b/react_alap/mai/public/robots.txt similarity index 100% rename from 25_01_07/mai/public/robots.txt rename to react_alap/mai/public/robots.txt diff --git a/25_01_07/mai/src/Adatlekero.js b/react_alap/mai/src/Adatlekero.js similarity index 100% rename from 25_01_07/mai/src/Adatlekero.js rename to react_alap/mai/src/Adatlekero.js diff --git a/25_01_07/mai/src/App.css b/react_alap/mai/src/App.css similarity index 100% rename from 25_01_07/mai/src/App.css rename to react_alap/mai/src/App.css diff --git a/25_01_07/mai/src/App.js b/react_alap/mai/src/App.js similarity index 55% rename from 25_01_07/mai/src/App.js rename to react_alap/mai/src/App.js index 970468d..646c094 100644 --- a/25_01_07/mai/src/App.js +++ b/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 ( <> - + ); } diff --git a/25_01_07/mai/src/App.test.js b/react_alap/mai/src/App.test.js similarity index 100% rename from 25_01_07/mai/src/App.test.js rename to react_alap/mai/src/App.test.js diff --git a/25_01_07/mai/src/Auto.js b/react_alap/mai/src/Auto.js similarity index 100% rename from 25_01_07/mai/src/Auto.js rename to react_alap/mai/src/Auto.js diff --git a/react_alap/mai/src/ContextPelda.js b/react_alap/mai/src/ContextPelda.js new file mode 100644 index 0000000..2e34857 --- /dev/null +++ b/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 ( + +

Üdv, {name}

+ + + ) +} + +function Content2(){ + return ( + + ) +} + +function Component3(){ + let name = useContext(UserContext); + return ( + <> + Üdv újra, {name} + + ) +} + +export default ContextPelda; \ No newline at end of file diff --git a/react_alap/mai/src/Idozito.js b/react_alap/mai/src/Idozito.js new file mode 100644 index 0000000..866652b --- /dev/null +++ b/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

A counter értéke: {counter}

; +} + +export default Idozito; \ No newline at end of file diff --git a/react_alap/mai/src/Keslelteto.js b/react_alap/mai/src/Keslelteto.js new file mode 100644 index 0000000..c774260 --- /dev/null +++ b/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

A counter értéke: {counter}

; +} + +export default Keslelteto; \ No newline at end of file diff --git a/25_01_07/mai/src/Szamlalo.js b/react_alap/mai/src/Szamlalo.js similarity index 100% rename from 25_01_07/mai/src/Szamlalo.js rename to react_alap/mai/src/Szamlalo.js diff --git a/react_alap/mai/src/UseRefPelda.js b/react_alap/mai/src/UseRefPelda.js new file mode 100644 index 0000000..7c66c5c --- /dev/null +++ b/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 ( + <> + setinputValue(event.target.value)} + /> +

Rendelések száma: {count.current}

+ + ); + +} + +export default UseRefPelda; \ No newline at end of file diff --git a/25_01_07/mai/src/index.css b/react_alap/mai/src/index.css similarity index 100% rename from 25_01_07/mai/src/index.css rename to react_alap/mai/src/index.css diff --git a/25_01_07/mai/src/index.js b/react_alap/mai/src/index.js similarity index 100% rename from 25_01_07/mai/src/index.js rename to react_alap/mai/src/index.js diff --git a/25_01_07/mai/src/logo.svg b/react_alap/mai/src/logo.svg similarity index 100% rename from 25_01_07/mai/src/logo.svg rename to react_alap/mai/src/logo.svg diff --git a/25_01_07/mai/src/reportWebVitals.js b/react_alap/mai/src/reportWebVitals.js similarity index 100% rename from 25_01_07/mai/src/reportWebVitals.js rename to react_alap/mai/src/reportWebVitals.js diff --git a/25_01_07/mai/src/setupTests.js b/react_alap/mai/src/setupTests.js similarity index 100% rename from 25_01_07/mai/src/setupTests.js rename to react_alap/mai/src/setupTests.js