JSX는 JS코드 안에 HTML과 유사한 마크업을 사용할수 있게 해주는 구문확장 이다 즉 React안에 포함되는 개념이 아닌 독립적인 개념이다.
프론트엔드 생태계는 구조는 HTML에 디자인은 CSS에 로직은 JS로 관리하는것이 일반적이었지만 웹이 인터랙티브 해짐에 따라서 로직으로 콘텐츠를 결정하는 비중이 커졌다. 따라서 JS로 이를 모두 담당 하고자 하였고 이것이 JSX를 사용하는 이유이다.
Writing Markup with JSX – React
실제 React에서는 jsx문을 작성하면 babel이 컴파일해서 React.createElement로 변환해준다. React에서는 JSX를 랜더링하는 방법이 없다
Babel · The compiler for next generation JavaScript
바벨 홈페이지에 들어가서 실제 컴파일이 어떤식으로 되는지 볼수 있다.