<div id="readability-page-1" class="page"><div><a href="https://reactjs.org/docs/add-react-to-a-website.html">https://reactjs.org/docs/add-react-to-a-website.html</a>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;웹게임&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="root"&gt;&lt;/div&gt;
 &lt;script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/babel-standalone@6/babel.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/babel"&gt;
 '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: () =&gt; this.setState({liked: true})}, 'Like');
 //&lt;태그는 당연히 js에서 인식을 못한다 ^
 //이걸 바벨이라는 친구가 &lt; 태그 를 인식해 위의 | 코드로 변경해준다 
 return (
 &lt;button onClick={() =&gt; this.setState({liked: true})}&gt;
 Like
 &lt;/button&gt;
 );
 }
 }
 &lt;/script&gt;
 &lt;script type="text/babel"&gt;
 ReactDOM.render(&lt;LikeButton/&gt;, document.querySelector('#root'));
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
=&gt; 최신 react를 쓰면서 class에 대해 전혀 생각을 안하고 스킵했었는데 한번 훑고가니 좋았고
=&gt; 대략적으로 알고 있던 html 최종 파일을 확인해서 좋았고
=&gt; Babel에 대해 정확한 기능에 대해서 파악해서 좋았음
=&gt; aws lamda를 활용하려면 또 잘 알아야한다니 ..</div></div>

2taesung.log

Taesung Lee

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를 활용하려면 또 잘 알아야한다니 ..

React root html

댓글