--- /dev/null
+function Mybutton(props) {
+ const [isClicked, setIsClicked] = React.useState(false);
+
+ return React.createElement(
+ 'button',
+ { onClick: () => setIsClicked(true) },
+ isClicked ? 'Clicked!' : 'Click here!'
+ )
+}//리액트의 함수 컴포넌트
+
+//리액트 돔에 render 함수를 사용해서 리액트 컴포넌트를 돔 컨테이너에 렌더링하는 코드
+//이 코드가 필요한 이유->스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도, 컴포넌트가 화면에 보이는 것이 아니기 때문에!
+const domContainer = document.querySelector('#root');
+ReactDOM.render(React.createElement(Mybutton), domContainer);
\ No newline at end of file
<html>
<head>
- <script type="importmap">
- { "imports": {
- "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js",
- "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.5/vue-router.esm-browser.min.js",
- "@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@6.4.5/lib/esm/index.js"
- } }
- </script>
- <script type="module">
- import { createApp } from 'vue'
-
- createApp({
- data() {
- return {
- message: 'Hello World!'
- }
- }
- }).mount('#app')
- </script>
</head>
<body>
- <div id="app">
- <h1>{{ message }}</h1>
- </div>
+ <h1>리액트를 사용하기 위한 사이트입니다.</h1>
+
+ <div id="root"></div><!--DOM Container(Root DOM Node) 추가-----버츄얼 돔의 시작점-->
+
+ <!-- React를 실행. -->
+ <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
+ <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>
+
+ <!-- 만든 React 컴포넌트를 실행. -->
+ <script src="/staic/js/Mybutton.js"></script>
</body>
</html>
\ No newline at end of file
projects / back_nicezip_fastapi.git / commitdiff