JSX란?

React가 표시되는 흐름은, React의 표시되는 구조에 대해 ~ DOM이란? ~ 에도 쓴 대로,
① DOM의 요소를 취득
② 가상 엘리먼트 작성
③ 렌더링
입니다.
이 흐름을 매번 쓰는 것은 힘들기 때문에, 같은 일을 해도 보다 간단한 쓰기가 있습니다.
그것이 JSX입니다.

JSX 소개

JSX는 Javascript를 확장한 쓰는 방법으로 HTML 태그를 Javascript 스크립트에 직접 기술하는 구조. JSX는 자바스크립트이므로 물론 자바스크립트를 포함할 수도 있습니다.
JSX는 ②의 요소 객체를 생성하는 부분을 담당합니다.
JSX가 만드는 것은 하나의 요소이며 여러 요소를 만들 수 없습니다.<div>...</div> 로 둘러싸고, 하나의 요소로서 취급합니다.
중요

JSX를 쓸 때의 결정

앞으로 JSX를 작성하는 규칙에 대해 정리해 나갈 것입니다.

변수 포함

  let text = "テキスト"
  let link = "https://qiita.com/"

  let el = (
          <div>
            <h4>{text}</h4>
            <h5><a href={link}>Qiita</a></h5>
          </div>
        )

태그의 내용이나 속성에도 {} 로 지정할 수 있다.
변수로 인식되지 않게 되므로 따옴표로 둘러싸거나 하지 않도록.

수업 설정

<div className="〇〇">

클래스 속성을 설정할 때는 이렇게 기술합니다.

스타일 설정

두 가지 방법이 있습니다.
①태그에 직접 스타일을 씁니다.{{}} 로 둘러싸다

 let el = (
          <div>
            <h4 style={{color:"red",fontSize:20}}>message</h4>
          </div>
        )

② 변수에 정리하여 정의하고 style 속성으로 설정

   const msg_style = {
        fontSize:20,
        color:"red"
      }
  let el = (
          <div>
            <h4 style={msg_style}>message</h4>
          </div>
        )

주의

하이픈(-)은 사용하지 않음

font-size , margin-top 등 사이에 하이픈이 들어가는 프로퍼티는 하이픈을 없애고, 그 후의 문자를 대문자로 해 대응합니다. 하이픈을 사용하면 오류가 버립니다!

숫자를 다룰 때

20px 와 20 에서는 취급이 다르다.
20px로 단위가 붙는 경우는.