[react] react 시작하기 ② - JSX

1. JSX ?

   • javascript에서 쓰는 HTML 비슷한 것
   • 태그 이름은 기존 HTML과 거의 유사하다 (다른 것도 있음)
   • Attributes나 css는 camel방식이다. (className,textAlign)
   • JS코드를 활용하고 싶다면 {}를 이용한다.

2. JSX로 inline style 넣기

    //App.js
    <h1 style={{color:'red'}}>Hello World</h1>    

   변수로 선언해서 넣는 것도 가능하다

        //App.js
        const myStyle = {
          color:'red',
          fontWeight:'bold', //font-weight 가 아니라 fontWeight
        }
        function App() {
          return (
            <div>
              <h1 style={'myStyle'}>Hello World</h1>

   3. className 사용하기
      기존의 HTML과는 다르게 class 대신 className을 사용한다.
      css파일에서 css 설정 가능하다. 기존 css랑 같음

        //App.js
        function App() {
        return (
          <div className="App">
            <h1 className={'myStyle'}>Hello World</h1>
            <div className={'post'}>
                첫 게시글 입니다. 
            </div>
          </div>
        );
      
        //App.css
          .myStyle{
            color:red;
            font-weight:bold;
          }
          .post{
            width:600px;
            padding:30px;
            margin:auto;
            border:1px solid grey;
          }