kovacsrud/frontend_13
3
1
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

React alap példa

Browse Source
This commit is contained in:
Kovács Rudolf
2026-09-17 10:05:49 +02:00
parent ebfa4f46dc
commit fda0dc216c
2 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
react_alap/app.js Normal file
View File

@@ -0,0 +1,32 @@
//Procedurális
const gomb=document.createElement('button');
gomb.textContent="JS gomb";
gomb.onclick=function(){
alert("Js gomb");
}
const jsgomb=document.getElementById('jsgomb');
jsgomb.appendChild(gomb);
//Deklaratív
const rgomb=React.createElement("button",{
onClick:function(){
alert("React gomb");
}
},"React gomb");
const kontener=React.createElement('div',
{
style:{
backgroundColor:"green",
width:"300px",
height:"200px"
}
},
rgomb,rgomb,rgomb,rgomb,rgomb,rgomb);
const root=ReactDOM.createRoot(document.getElementById('reactgomb'));
root.render(kontener);

18
react_alap/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!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>
</head>
<body>
<h2>Javascript gomb</h2>
<div id="jsgomb"></div>
<h2>React gomb</h2>
<div id="reactgomb"></div>
</body>
</html>