React állapot

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));