React library & JSX

*패캠 리액트 3강

- 리액트의 핵심 모듈 2개

1) import ReactDOM from 'react-dom';

 => 만들어진 리액트 컴포넌트를 htmlelement에 연결할때 사용

 

2) import React from 'react-dom';

 => 리액트 컴포넌트 만들기

 

ex) ReactDOM.render{

  <HelloMessage name = ""/>,

  document.getElement~

}

 

--------------------

* 패캠 2-3강

- 작성한 코드를 순수 실행할 수 있는 자바스크립트로 변경해주는 것 -> babel

- JSX

 : jsx문법으로 작성된 코드는 순수한 javascript로 컴파일

 

ex) 

<div> hello </div>

// =>
React.createElement("div", null, " hello")

https://babeljs.io/

Babel · The compiler for next generation JavaScript

- JSX를 쓰는 이유 : reactcreate보다 가독성이 좋음

 

- JSX문법

 1) 최상위 요소가 하나여야함

2) 최상위 요소를 리턴하는 경우, ()로 감싸야함

3) 자식들을 바로 렌더링하고 싶으면 <>자식들</>을 사용해야함

4) if문은 사용할 수 없음 -> 삼항연산자 혹은 &&를 사용함

5) 자바스크립트 표현식을 사용하려면 {}를 이용함

6) style을 이용해 인라인 스타일링 가능

7) class대신 className을 사용해 class적용 가능

8) 자식요소가 있으면 꼭 닫아야하고, 자식요소가 없으면 열면서 닫아야함

<p?</p>

<br/>