<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<!-- 바벨 컴파일러 불러오기 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<!-- 바벨이 읽을 수 있게 만들어 준다. -->
<!-- 바벨은 자바스크립트 컴파일러! JSX표현을 자바스크립트가 이해할 수 있는 표현으로 바꾸어준다. -->
<script type="text/babel">
const rootElement = document.getElementById("root");
// const text = "Hello world";
// const titleclassName = "title123";
// const props = { className: titleclassName, children: text };
// const customH1 = <h1 className={titleclassName}>{text}</h1>;
// const customH1 = <h1 {...props} />;
// const customH1 = (
// <h1 className={props.className} children={props.children} />
// );
const paint = () => {}
const elementV = (
<React.Fragment>
<h1>Hi</h1>
<h2>bye</h2>
<h3>children</h3>
</React.Fragment>
);
// const elementV = customH1;
ReactDOM.render(elementV, rootElement);
</script>
</body>
</html>
React.Fragment or <></> 를 통해서 여러가지 element들을 react에 주입 할 수 있다.
잠실사는 주니어 개발자