React JSX 문법

react 에서 웹페이지 레이아웃은 html 똑같이 div 떡칠해서 만들면 됨

css 스타일도 App.css 파일 들어가서 바꾸면 됨

JSX 문법 1. html에 class 넣을 땐 className

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
    </div>
  )
}

리액트에서는 클래스 만들때 className 해야됨 걍 외우셈

JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호}

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
        <div>{post}</div>    => 여기 꼽아넣었음
      </div>
    </div>
  )
}

중괄호안에 데이터바인딩하고 싶은 변수명 집어넣으면 됨

진짜 온갖곳에 {}중괄호 열어서 변수 집어 넣을 수 있음

id,className,src... 등등 여러가지 html 속성에도 가능

이렇게 변수에 있던걸 html에 꽃아넣는 작업을 데이터바인딩이라고함

JSX 문법 3. html에 style속성 넣고싶으면

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

{ 속성명 : '속성값' } 이렇게 넣으면 됨
기본적으로 style = {} 이렇게 되어있고 {} 안에 또 {} 넣어서 하라는말임

그리고 -기호 못쓰니까 camelCase로 해야댐 저기서 fontSize 말하는거