<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React! React! React!</title>
<style>
#container {
padding: 50px;
background-color: #FFF;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: this.props.bgcolor,
color: '#333',
display: 'inline-block',
fontFamily: 'monospace',
fontSize: 32,
textAlign: 'center'
};
return (
<div>
{this.props.children}
</div>
);
}
}
ReactDOM.render (
<div>
<Letter bgcolor='#58B3FF'>A</Letter>
<Letter bgcolor='#FF605F'>E</Letter>
<Letter bgcolor='#FFD52E'>I</Letter>
<Letter bgcolor='#49DD8E'>O</Letter>
<Letter bgcolor='#AE99FF'>U</Letter>
</div>,
destination
);
</script>
</body>
</html>
AEIOU 여기에 색 입혀져야하는데 안입혀짐 ㅅㅂ 원일을 모르겠음 똑같이 따라했는데
능지 이슈!
ㅅㅂ럼이
레터스타일 선언만하고 적용 안해놓고 ㅋㅋ
render 안 리턴할때 div style={letterStyle} 넣으면 잘 됨
안나옴...ㅠㅠ
오 된다 이렇게 해야함?