•
babel이 jsx→ React create element로 만든다.
◦
React 컴포넌트 이름은 대문자로 입력해야 바벨과 같은 트랜스파일러가 컴포넌트로 이해한다.
<script type="text/babel">
const Message = props => <p>{props.children}</p>
const createdReactElement = React.createElement(Message, {
children: 'created react element',
})
const JsUi = React.createElement('p', {
children: "UI that's created using JS",
})
const JsxUi = () => <p>UI that's created using JSX</p>
const element = (
<div className="container">
<Message>Hello World</Message>
{createdReactElement}
{Message({children: 'this is children'})}
{React.createElement('p', {
children: 'created UI',
})}
{JsUi}
<JsxUi />
<>
<Message>Fragment test</Message>
<Message>Fragment test</Message>
</>
</div>
)
ReactDOM.createRoot(document.getElementById('root')).render(element)
</script>
HTML
복사
createElement와 일반 JSX의 차이점
•
그냥 JSX를 return 할 경우 컴포넌트가 되지 않는다. 그냥 HTML되나 createElement API로 호출할 경우 비로소 컴포넌트가 된다.