<html>
<head>
<title>example react</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>h1태그</h1>
<!--Dom 콘테이너(리액트의 빠른 랜더링 이용하는 용)-->
<div id="root"></div>
<!--리액트 호출-->
<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>간단한 html 파일 생성.
사전에 react js 설치가 컴퓨터에 완료되어 있어야 함.
function MyButton(props){
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{onClick: () => setIsClicked(true)},
isClicked ? 'Clicked!' : 'Click here!'
)
}
//리액트 dom 렌더함수를 통해서 리액트컴포넌트를 dom컨테이너에 렌더링
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
리액트 컴포넌트를 렌더링 하지 않으면 표출 되지 않음.
**오타주의 할 것**
결과물.
함수의 return 값에 있는 React.createElement를 통해 button 태그가 삽입되면서 삼항연산자로 설정해 둔 용어가 나오는 걸 확인
'react 수업' 카테고리의 다른 글
| 6.state와 lifecycle (1) | 2024.09.03 |
|---|---|
| 5. components, props (0) | 2024.09.02 |
| 4. rendering elements (0) | 2024.08.31 |
| 3. jsx와 createElement (0) | 2024.08.31 |
| 2. react-react-app를 vs code에서 실행하기 (0) | 2024.08.29 |