HelloWorld
React Tutorial
(https://www.taniarascia.com/getting-started-with-react/)
아래의 코드로 처음 튜토리얼을 진행하고 코드를 분석했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
// React, React DOM 및 Babel를 연결한다
<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.26.0/babel.js"></script>
</head>
<body>
//root에 새로운 element를 만들어서 넣을 예정
<div id="root"></div>
<script type="text/babel">
//ES6 클래스를 사용하여 React 구성 요소를 만든다
class App extends React.Component {
//클래스 컴포넌트에서 유일하게 필요한 메소드 인 메소드를 추가하여 DOM 노드를 렌더링할 준비를 한다
render() {
return <h1>Hello world!</h1>
}
}
//React DOM render()메소드 를 사용하여 App생성 한 클래스를 rootHTML 에서 div 로 렌더링한다.
ReactDOM.render(<App />, document.getElementById('root'))
</script>
</body>
</html>
즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>