2. JSX

jsx는 자바스크립의 확장 문법

• 자바스크립트 함수선언 + HTML 표현
• UI/UX적으로 더 쉽게 볼수 있고, 코드가 짧아서 좋음
• 표현식 예시

// name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안 사용
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>
      
// jsx를 if 구문 및 for loop 안에서 사용
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

// 

문법 예시

리액트 문법

<script>
    'use strict';

    class LikeButton extends React.Component {
		constructor(props) {
          super(props);
          this.state = {liked: false};
        }
    
    //	return React.createElement('button', {onClick: () => this.setState({liked: true})}, 'Like');
    return (
<button onClick={() => this.setState({liked: true})}>
  Like
  </button>
  		}
 	 } // 1% ErrorBoundary 
</script>  
<script>
  ReactDom.render(React.createElement(LikeButton), document.querySelector('#root'));
</script>
// class 보다는 대부분 함수 사용 
<script>
    const LikeButton = () => {};
    function LikeButton() {}
</script>