webgame with react init

2020-12-16 21:40:13 +09:00
parent c0bab54b70
commit 01fb84e6d9
1 changed files with 30 additions and 0 deletions
--- a/react_webgame/main/index.html
+++ b/react_webgame/main/index.html
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!--리액트 핵심 코드-->
+        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 리액트 코드를 웹에 붙이는 역할-->
+        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    </head>
+    <body>
+        <div id="root"></div> <!-- 결과 : <div id="root"><button>Like</button></div> -->
+        <script type="text/babel">
+            class LikeButton extends React.Component {
+                constructor(props) {
+                    super(props);
+                    this.state = {
+                        liked: false 
+                    };
+                }
+                
+                render() {
+                    return <button type="submit" onClick={() => { this.setState({ liked: true })}}>
+                        {this.state.liked === true ? 'Liked': 'Like'}
+                    </button>; 
+                    // JSX ( JS + XML )
+                }
+            }
+        </script>
+        <script type="text/babel">
+            ReactDOM.render(<div><LikeButton/><LikeButton/><LikeButton/><LikeButton/></div>, document.querySelector('#root'));
+        </script>
+    </body>
+</html>