[React 교과서 ch01] hello-world
React 2019. 8. 6. 14:11반응형
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="content">
<script type="text/javascript">
//React Element를 직업 <body>에 렌더링 하지 않는 이유 : 브라우저 확장 프로그램과 충돌 방지
//h1 요소를 React 엘리먼트로 생성하여 변수에 담는다.
var h1 = React.createElement('h1', null, 'Hello World!'); //h1: 실제 DOM 노드가 아님, React h1 컴포넌트 인스턴스
console.log(h1);
//h1요소를 id가 'content' 인 실제 DOM에 렌더링 한다.
h1,
document.getElementById('content')
);
//React는 선언적, 뷰 또는 UI레이어의 역할만 함.
//React컴포넌트는 클래스로 생성하고 필수적인 render()를 포함
//React컴포넌트는 재사용할수 있고, 불가변 속성을 전달받아 this.props.NAME으로 접근 가능
</script>
</div>
</body>
</html>
|
반응형
'React' 카테고리의 다른 글
| babel 트랜스컴파일에러가 날때 해결방법 (0) | 2019.08.06 |
|---|---|
| [React교과서 ch02] hello-world-nested (0) | 2019.08.06 |
| react.js, react-dom.js (0) | 2019.08.06 |
| [길벗] 리액트를 다루는 기술 서적에서 사용되는 코드 (0) | 2019.08.05 |
| webpack 4 설정 (0) | 2019.08.05 |