728x90
300x250
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{color: green;font-size: italic;}
</style>
</head>
<body>
<h1>테스트 기존 사이트 리액트 삽입하기</h1>
<div id="root"></div>
<!-- 리액트 가져오기 -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="js/MyButton.js"></script>
</body>
</html>
js
function MyButton() {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{onClick:() => setIsClicked(true)},
isClicked ? 'Clicked' : 'Click here!'
)
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
728x90
반응형
'Front-end > React' 카테고리의 다른 글
| JSX란? (0) | 2024.10.18 |
|---|---|
| React 리액트 설치 방법 (0) | 2022.04.09 |
댓글