<!DOCTYPE html>
<html lang="en">
<body>
/* 리액트 CDN 및 바벨 CDN 가져오는 부분은 삭제 */
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
// text가 대문자로 시작하면 h1, 소문자로 시작하면 h3
const Text = ({ text }) => {
if (text.charAt(0) === text.charAt(0).toUpperCase()) {
return <h1>{text}</h1>;
} else {
return <h3>{text}</h3>;
}
};
// 삼항 연산자를 사용해서 element를 리턴받음.
function Number({ number, selected }) {
return selected ? <h1>{number}</h1> : <h3>{number}</h3>;
}
const element = (
<>
<Text text="Text" />
<Text text="text" />
<Number number={1} />
<Number number={2} />
<Number number={3} selected={true} />
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>💡 JS에서 JSX를 리턴한다. 결국 JS와 JSX를 섞어 쓴다. (interpolation)
리액트에서도 자바스크립트와 JSX를 섞어서 그릴 수 있다!
잠실사는 주니어 개발자