리액트 공식 홈페이지의 자습서 부분에 있는 'TicTacToe 게임'을 완성해보자!
우선, 이번 게시글에서는
기본 레이아웃 및 css를 셋팅해보자!
두 파일을 동일한 디렉토리에 생성하면 된다!
1. game.html
- 헤드 부분에 react/reactDOM/babel CDN과 css link 작성 완료
- 바디 부분에 root라는 id를 가진 div 생성하여 ReactDOM의 렌더 메서드에 작성
- Game/Board/Square라는 3개의 컴포넌트 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type = "text/css" href = "./game.css" rel = "stylesheet">
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id = "root"></div>
<script type ="text/babel">
class Square extends React.Component {
render() {
return
}
}
class Board extends React.Component {
render() {
return
}
}
class Game extends React.Component {
render() {
return
}
}
const root = document.querySelector('#root')
ReactDOM.render(<Game />,root)
</script>
</body>
</html>
2. game.css
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol,
ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}'React > 4.TicTacToe 게임 만들기' 카테고리의 다른 글
| 틱택토6. 승자 결정하기 (0) | 2022.04.23 |
|---|---|
| 틱택토5. 컴포넌트 작성(3) (0) | 2022.04.23 |
| 틱택토4. 컴포넌트 작성(2) (0) | 2022.04.22 |
| 틱태토3. 컴포넌트 작성(1) (0) | 2022.04.21 |
| 틱택토2. TicTacToe 게임의 명세 (0) | 2022.04.21 |
댓글