JSX => 자바스크립트를 확장한 문법
/*
//링크를 통한 react사용
//맨 마지막 링크는 babel을 사용하기 위한 링크
<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>
// 바벨은 jsx를 React.createElement()호출로 컴파일
*/====================================================
<script type="text/babel">
const name ='algml'
// name에 algml를 담음
const myName = <p>hi my name is {name}</p>
// JSX문법 안에서 자바스크립트를 사용하기 위해서는 {}안에 넣어주어야 한다.
ReactDOM.render(
myName,
document.querySelector('#root')
)
// myName을 <div id="root"></div>이안에 넣어준다.
// 최종적으로 화면을 구현해주는 것은 ReactDOM.render()부분이다.
</script>출력물
====================================================
<body>
<div id="root"></div>
<script type="text/babel">
function formatName(name){
return(
user.firstName + '' + user.lastName
)
}
// 하나의 인자를 갖는 formatName 함수를 만듦
const user = {
firstName : 'oh',
lastName : 'algml'
}
// firstName과 lastName을 객체형식으로 user에 담음
const myFullName = <p>my fullname is {formatName(user)}! </p>
// JSX문법과 {자바스크립트문법}을 이용하여 내용을 만듦
ReactDOM.render(
myFullName,
document.querySelector('#root')
)
// 실질적으로 화면을 구현
</script>
</body>출력물
====================================================
<script type="text/babel">
function tick(){
const element = (
<div>
<h1>hello world</h1>
<h2>it is{new Date().toLocaleTimeString()}</h2>
</div>
)
ReactDOM.render(element,document.querySelector('#root'))
}
setInterval(tick,1000)
// 위의 코드는 setInterval()를 이용하여 ReactDOM.render()를 1초마다 호출하여 tick함수를 실행
</script>출력물
안녕하세요