react 설정과 JSX 특징

Bable : ECMA6를 5로 변환시켜 호환을 지원해준다.

 

react : component

reactDOM : rendering

 

15이상부터 2가지 모두 필요

 

class ES6에서 새로 추가된 문법

class 선언

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
    }
}

 

static과 상속도 가능하다.

 

모든 React.Component는 render() 메소드를 가지고 있다.

컴포넌트가 어떻게 생길지 정의해준다.

 

JSX 형식

React JSX는  XML 같은 문법을 native JavaScript로 변경해준다.

""로 감싸지 않는다.

()를 사용하지 않아도 오류 발생하지 않으나 가독성을 위해서 사용

 

 

ReactDOM.render()

reactDOM은 렌더링할때 사용

 

JSX 특징

1.모든 JSX 형태의 코드는 컴포넌트에서 Element를 렌더링 할때 container element안에 포함시켜야 한다.

2.JSX안에서 javascript를 표현하기 위해서는 {}로 wrapping 하면된다.

render() {
 let text = "Hello React!";
 return (
  <div>{text}</div>
 );
}

 

 

※let (평상시에 변수 선언시 let을 사용하는 것이 좋다. 상수인 경우 const)

• 블럭범위 안에서 선언하고 사용하기에 스코프 관련 문제를 해결할 수 있다.
• let은 한번 선언후 다시 선언을 할 수 없다.

 3. jsc안에서 스타일을 설정할 때에는 key가 camelCase인 객체를  사용해야 한다.

4. jsx안에서 주석을 작성할 땐 {/*..*/}을 사용해야한다. 또한 주석은 컨테이너 엘레먼트 안에 작성되야한다.

ex) <div> 위이거나 </div> 아래인 경우 에러 발생