1.ES6 기본문법과 JSX 기본 문법

- 필요한 것

1) Babel : ES6문법을 -> ES5문법으로 변환해주면서 JSX도 지원해줌(구 브라우저도 지원하기 위해 추가)

2) React :

<script src=" 

https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js" />

3) ReactDOM : 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"/>

리액트는 컴포넌트 기반!!!!

[    JavaScript 영역    ]

class Codelab extends React.Component{ // React컴포넌트

  render(){

    //  컴포넌트가 어떻게 생길지 정의해줌

    // JSX : javascript 상에서 html 태그를 그대로

    //      사용 가능

    //  ""로 감싸지 않는다.

    // BaBel에서 지원해줌

    let text = "Hi I am codelab";

    // let : ES6의 문법 var는 스코프가 함수영역

    // let은 블럭단위임, ES6에선 let을 관습적으로 사용

    // 어떤 뷰를 보여줄지 JSX 형태로 리턴해주면 됨

    // JSX에서 자바스크립트를 사용하려면 {}로 감싸주면된다.

    let style = {

      backgroundColor:'aqua'

    };

    return (

      // Element가 여러개일 때는 꼭 container:div와 같은 것 내부에 와야함

      <div style={style}>

        <h1>{text}</h1>

        <span>multiElement</span>

      </div>

    );

  }

}

class App extends React.Component{

  render(){

   return(

     <Codelab/>

   );

  }

}

ReactDOM.render(<App/>,document.getElementById("root"));

// 2번쨰 인자에 첫번째 컴포넌트를 그려줘라

// id가 root인 div에다가 App 컴포넌트를 랜더링해줘라.

// JSX의 특징

/*

  - 컴포넌트에서 여러 Element를 렌더링할 때

    꼭 container element 안에 포함시켜줘야함

    div와 같은...

    <h1>hi</h1>

    <h2>h2</h2> 

    이렇게 X

    

    <div>

      <h1>hi</h1>

      <h2>h2</h2>

    </div>

    이렇게 O

    

    JSX 안에서 자바스크립트를 표현할 때는 {}로 해주면 된다.

*/

[    html 코드    ]

<div id="root"></div>