직접 리액트 연동하기/create-react-app
2023. 2. 6. 12:10ㆍ프레임워크(Framework)/React
[frame.html]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Oops!a</title>
<link rel="stylesheet" href="/src/main/resources/style.css">
</head>
<body>
<h1>Oops!a의 관리 프로그램</h1>
<div id="root"></div> <!--DOM Container (Root DOM Node)-->
<!-- 리액트 가져오기-->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 리액트 컴포넌트 가져오기-->
<script src="MyButton.js"></script>
</body>
</html>
[Mybutton.js]
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{onClick: () => setIsClicked(true)},
isClicked ? 'Clicked!' : 'Click here!'
)
}
const domnContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domnContainer);
[style.css]
h1 {
color:green;
font-style: italic;
}
vscode terminal에
npx create-react-app my-app
cd my-app
'프레임워크(Framework) > React' 카테고리의 다른 글
| Rendering Elements (0) | 2023.02.15 |
|---|---|
| React 실행 시 오류 해결 방법 (0) | 2023.02.15 |
| JSX의 정의와 역할 (0) | 2023.02.06 |
| React란 무엇인가? (0) | 2023.02.02 |
| React 시작 전 개발환경 구축 (0) | 2023.02.02 |