-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');
+function Mybutton(props) {\r
+ const [isClicked, setIsClicked] = React.useState(false);\r
+\r
+ return React.createElement(\r
+ 'button',\r
+ { onClick: () => setIsClicked(true) },\r
+ isClicked ? 'Clicked!' : 'Click here!'\r
+ )\r
+}//리액트의 함수 컴포넌트\r
+\r
+//리액트 돔에 render 함수를 사용해서 리액트 컴포넌트를 돔 컨테이너에 렌더링하는 코드\r
+//이 코드가 필요한 이유->스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도, 컴포넌트가 화면에 보이는 것이 아니기 때문에!\r
+const domContainer = document.querySelector('#root');\r
ReactDOM.render(React.createElement(Mybutton), domContainer);
\ No newline at end of file
-<html>
- <head>
- </head>
- <body>
- <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="/static/js/Mybutton.js"></script>
- </body>
+<html>\r
+ <head>\r
+ </head>\r
+ <body>\r
+ <h1>리액트를 사용하기 위한 사이트입니다.</h1>\r
+\r
+ <div id="root"></div><!--DOM Container(Root DOM Node) 추가-----버츄얼 돔의 시작점-->\r
+\r
+\r
+ </body>\r
+ <!-- React를 실행. -->\r
+ <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->\r
+ <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>\r
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>\r
+\r
+ <!-- 만든 React 컴포넌트를 실행. -->\r
+ <script src="/static/js/Mybutton.js"></script>\r
</html>
\ No newline at end of file
projects / back_nicezip_fastapi.git / commitdiff