react

11183 ワード
React JSX構文 テキストリンク
JSX=>JavaScriptの構文を拡張
/*
//링크를 통한 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>
しゅつりょくぶつ
Dev Log#33-8月11日
SylixOS ARM BSP第2編【startup.S】