ReactJS 단계별 학습 1 - step.1 createElement()

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

 

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- CDN 방식으로 HTML 문서에 react.js 라이브러리를 추가하는 방법을 학습한다.

- createElement()를 이용하여 태그를 생성하는 방법을 알아보자.

- render()을 이용하여 특정 ID를 갖는 태그에 간단한 문자열을 출력한다.

 

3. 적용

① html 파일에 reactjs 라이브러리를 CDN 방식으로 추가한다.

    - https://ko.reactjs.org/docs/cdn-links.html

CDN 링크 – React

 

② "div1"이라는 id를 갖는 div 태그 영역이 출력을 위한 목적지 태그이다.

 

③ createElement()를 이용하여 "Hello World" 문자열을 h1 태그로 생성하고, id가 "div1"인 목적지에 출력한다.

 

④ 전체 완성 코드는 다음과 같으며, 프로그램을 실행한다.

 

chap10.html

0.00MB

createElement()를 이용하여 문자열 출력

 

4. 결과

    - HTML 파일을 더블클릭하여 실행한다.

    - "Hello World" 문자열을 갖는 h1 태그가 생성된 것이 "div1" 위치에 출력되 것을 확인할 수 있다.

 

결과 확인

 

결과 Elements

 

 

 

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.