From 2ccad9bf137fc61a3abf8ef9670a19604f4526e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kov=C3=A1cs=20Rudolf?= Date: Thu, 17 Sep 2026 11:21:39 +0200 Subject: [PATCH] =?UTF-8?q?React=20=C3=A1llapot?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react_allapot/app.js | 43 ++++++++++++++++++++++++++++++++++++++++ react_allapot/index.html | 19 ++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 react_allapot/app.js create mode 100644 react_allapot/index.html diff --git a/react_allapot/app.js b/react_allapot/app.js new file mode 100644 index 0000000..1c0971f --- /dev/null +++ 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)); \ No newline at end of file diff --git a/react_allapot/index.html b/react_allapot/index.html new file mode 100644 index 0000000..5dc8048 --- /dev/null +++ b/react_allapot/index.html @@ -0,0 +1,19 @@ + + + + + + React bevezető + + + + + + + +

Boxok

+
+ + + + \ No newline at end of file