React állapot

2026-09-17 11:21:39 +02:00
parent fda0dc216c
commit 2ccad9bf13
2 changed files with 62 additions and 0 deletions
--- a/react_allapot/app.js
+++ b/react_allapot/app.js
@@ -0,0 +1,43 @@
+function App(){
+    return(
+        React.createElement('div',{
+            style:{
+                backgroundColor:"black"
+            }
+
+        },
+        React.createElement(Box,{kezdo:5,felirat:"Box A",hatterszin:"green"}),
+        React.createElement(Box,{kezdo:1,felirat:"Box B",hatterszin:"yellow"}),
+        React.createElement(Box,{kezdo:67,felirat:"Box C",hatterszin:"red"}))
+    )
+
+}
+
+function Reset({setSzamlalo}){
+    return(
+        React.createElement('button',{
+            className:"btn btn-primary m-2",
+            onClick:(e)=>{setSzamlalo(0);e.stopPropagation()}
+        },"Reset")
+    )
+}
+
+function Box({felirat,kezdo,hatterszin}){
+
+    const[szamlalo,setSzamlalo]=React.useState(kezdo);
+
+    return(
+        React.createElement('div',{
+            style:{
+                width:"200px",
+                height:"200px",
+                backgroundColor:hatterszin
+            },
+            className:"p-2 m-5 rounded",
+            onClick:()=>setSzamlalo(prev=>prev+1)
+        },felirat," ",szamlalo,React.createElement(Reset,{setSzamlalo:setSzamlalo}))
+    )
+}
+
+const root=ReactDOM.createRoot(document.getElementById('root'));
+root.render(React.createElement(App));
--- a/react_allapot/index.html
+++ b/react_allapot/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>React bevezető</title>
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script defer src="app.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+
+</head>
+<body>
+    <h2>Boxok</h2>
+    <div id="root"></div>
+   
+    
+</body>
+</html>