React 1강 - 개발환경 셋팅 / JSX (데이터바인딩)

1. terminal을 열어서 npx create-react-app blog
   => 리액트가 셋팅된 blog라는 이름의 boilerplate 생성

2. npm start
   => 짠 코드 브라우저에서 미리보기

3. app.js에서 필요없는 내용 지움

4. <navbar 만들기> (=최상단 메뉴)

   꼴로 class를 만들고 디자인 -> app.css에서 .classname{} 꼴로 파라미터를 적는다.

react의 가장 큰 장점 - 데이터바인딩이 쉽다.

ex. 서버에서 받아온 데이터를 HTML에 넣어 바꿀 때, JSX문법을 이용하여 중괄호 안에 변수명, 함수 등
{var, func}으로 동적으로 데이터바인딩 할 수 있다.
src,id,ref 등의 속성, className 등에도 {v, f 등}으로 사용 가능

JSX에서 style 속성 집어넣을 때

무조건 중괄호.
ex. <.div style = "font-size : 20px"> X,
<.div style = { {color : 'blue', fontSize : '30px'} }>이름</div.> O
-> camelCase 관습에 따라 속성의 뒤 단어는 대문자로 써야 함.