(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
•Download as PPTX, PDF•
0 likes•257 views
ReactJS를 이용한 간단한 HelloWorld 실펴보세요~ 리액트는 UI를 구축하기 위한 라이브러이다. 한 번만 설정하고 사용한다. 앱의 상태(Store)가 변경되면 자동으로 재구성한다. 작은 컴포넌트로 크고 강력한 앱을 구축한다.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to (리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
Similar to (리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~ (20)
More from 탑크리에듀(구로디지털단지역3번출구 2분거리)
More from 탑크리에듀(구로디지털단지역3번출구 2분거리) (20)
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
- 2. ReactJS - HelloWorld 리액트는 UI를 구축하기 위 한 라이브러이다. 한 번만 설정하고 사용한다. 앱의 상태(Store)가 변경되 면 자동으로 재구성한다. 작 은 컴포넌트로 크고 강력한 앱을 구축한다. <!– Hello.html <!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@latest/dist/react.js"></scr ipt> <script src="https://unpkg.com/react- dom@latest/dist/react-dom.js"></script> <script src="https://unpkg.com/babel- standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> ReactDOM.render( React.DOM.h1(null, "Hello World!"), document.getElementById('app') ); </script> </body></html>
- 3. ReactJS – HelloWorld, JS소스를 살펴보 는 방법 Chrome > F12 > Elements
- 4. ReactJS – HelloWorld, JS소스를 살펴보 는 방법 위치 보유자의 내용 이 리액트 앱에서 생 성한 내용으로 대체 된 것을 알 수 있다. <html class="gr__localhost"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src="https://unpkg.com/react@latest/dist/react.js"></script> <script src="https://unpkg.com/react-dom@latest/dist/react- dom.js"></script> <script src="https://unpkg.com/babel- standalone@6.15.0/babel.min.js"></script> <script> "use strict"; ReactDOM.render(React.DOM.h1(null, "Hello World!"), document.getElementById('app')); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW...생 략 </script> <style id="style-1-cropbar-clipper"> /* Copyright 2014 Evernote Corporation. All rights reserved. */ .en-markup-crop-options { …… }
- 5. ReactJS – HelloWorld, JS소스를 살펴보 는 방법 위치 보유자의 내용 이 리액트 앱에서 생 성한 내용으로 대체 된 것을 알 수 있다. .en-markup-crop-options div div:first-of-type { margin-left: 0px !important; } </style> </head> <body data-gr-c-s-loaded="true"> <div id="app"> <h1 data-reactroot="">Hello World!</h1> </div> <script type="text/babel"> ReactDOM.render( React.DOM.h1(null, "Hello World!"), document.getElementById('app') ); </script> <script src="chrome-extension://hhojmcideegachlhfgfdhailpfhgknjm/ web_accessible_resources/index.js"></script> </body> </html>
- 6. ReactJS - HelloWorld ReactDOM.render(what, where) 여러 환경에서 랜더링하는 앱을 만든다. 앱을 브라우저에서 랜더링하는 방법 중 하나다. React.DOM.h1(속성, 자식 엘리먼트) HTML DOM 엘리먼트를 감싸는 래퍼를 제공한다. h1 컴포넌트를 이용한다. 미리 만들어진 엘리먼트의 집합이다. React.DOM.h1(null, "Hello World!") 첫 번째 파라미터 컴포넌트로 전달하는 엘리먼트의 속성 정보를 갖고 있는 객체다. 두 번째 파라미터 컴포넌트의 자식을 정의한다. 중첩된 자식을 원하는 만큼 가질 수 있다. document.getElementById('app') 페이지 내에서 앱의 위치를 리액트에 알려준다. 컴포넌트를 타겟 플랫폼의 맞게 전환하는 작업은 리액트가 알아서 처리한다.