1. Hello World!

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

2. JSX 소개

const element = <h1>Hello, world!</h1>;

위의 코드는 JSX라고 하며 JavaScript를 확장한 문법입니다.

JavaScript의 모든 기능이 포함되어있습니다.

JSX는 React 엘리먼트를 생성합니다.

2-1 JSX 란?

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장 문법이다. JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

function App() {
  return <div>Hello World!</div>;
}

위의 코드는 아래와 같이 변환된다.

function App(){
  return React.createElement("div", null, "Hello World!");
}

그렇다면 JSX는 자바스크립트 문법일까?

결론은 아니다. JSX는 리액트로 개발할 때 사용하므로 공식적인 자바스크립트 문법은 아니다.

2-2 JSX 문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.