일반적인 index.html코드
<html>
<body>
<span>Total clicks : 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick(){
console.log("i have bin click");
counter = counter + 1;
span.innerText = `Total clicks : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>React createElement를 이용한 코드
<html>
<head>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.18.9/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const span = document.getElementById("span");
const btn = React.createElement("button", {
onClick : () => console.log("im clicked"),
}, "Click me");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);
</script>React.createElement("tag속성", 태그함수 혹은 css 속성, 문구);
JSX를 이용한 코드
function Title(){
return (<h3 id="title"
onMouseEnter={()=>console.log("마우스")}
>
Hello I'm a span
</h3>);
}
const Button = () => (
<button
style={{
backgroundColor : "tomato",
}}
onClick={()=> console.log("i'm clicked")}
>
Click me
</button>
);
const Container = <div>
Title Button
</div>
ReactDOM.render(Container, root);
JSX컴포넌트의 첫글자는 대문자로 표시해야함(JSX속성으로 인식하게 하기 위해)
화살표 함수 형태로 구현
그안에서 <tag명 스타일 , 이벤트 함수 작성>문구</tag명>
어제의 나보다 나은 오늘의 내가 되자!🧗♂️