React JS : #2.2 Our First React Element

1) React JS란?

 

html과 js코드를 상호작용할수 있게 만들어주는 라이브러리 (엔진을 생각하면 쉽다.)

 

2) React-dom이란?

 

React 코드들을 HTML body에 둘 수 있도록 해주는 패키지

 

3) ReactDOM.render()

 

React element를 가지고 HTML로 만들어 배치하는 것이다.

(=사용자에게 보여준다)

 

 

4) ReactDOM.render() 사용법

ReactDOM.render(span, span이 가야할 위치)

 

 

body에 id=“root” 만들어서 span을 root 안에 두라고 함

 

5) React.createElement 사용법

 

React.createElement("span", {span의 property}, “span의 내용”)

 

 

{span의 property} 에서 property는 class name, id도 가능 style도 가능

 

6) 코드 컴파일 순서 비교

vanilla JS:  HTML -> JS 순서
REACT:  JS -> HTML 순서

JS가 element를 생성 =>  React JS가  element를 HTML로 번역