https://reactjs.org/docs/add-react-to-a-website.html
<!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>웹게임</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {liked: false};
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
// return e('button', {onClick: () => this.setState({liked: true})}, 'Like');
//<태그는 당연히 js에서 인식을 못한다 ^
//이걸 바벨이라는 친구가 < 태그 를 인식해 위의 | 코드로 변경해준다
return (
<button onClick={() => this.setState({liked: true})}>
Like
</button>
);
}
}
</script>
<script type="text/babel">
ReactDOM.render(<LikeButton/>, document.querySelector('#root'));
</script>
</body>
</html>=> 최신 react를 쓰면서 class에 대해 전혀 생각을 안하고 스킵했었는데 한번 훑고가니 좋았고
=> 대략적으로 알고 있던 html 최종 파일을 확인해서 좋았고
=> Babel에 대해 정확한 기능에 대해서 파악해서 좋았음
=> aws lamda를 활용하려면 또 잘 알아야한다니 ..
긍정적인 에너지를 가진 개발자, 이태성입니다.