React를 Javascript에서 사용해보기
「 Node.js도 ES2015도 사용하지 않는 React 입문 」의 기사를 발견했으므로, 스스로도 똑같이 모방해 보았습니다. "±숫자"부분을 클릭하면
count 의 값이 증감됩니다. React Hooks를 사용하고 있습니다.
react.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Minimal React</title>
</head>
<body>
<div id="app"></app>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
let CounterApp = () => {
let mySetCount = n => {
let col = n>0?"blue":"red";
return React.createElement("span", {
style:{color:col, border:"1px solid " + col},
onClick: () => setCount(count + n),
}, (n>0?"+":"") + String(n))
}
const [count, setCount] = React.useState(0);
return React.createElement("span", null,
React.createElement("span", {style: {textDecoration: "underline"}}, "count: " + count),
React.createElement("span", null, " ← "),
mySetCount(2),
mySetCount(1),
mySetCount(-1),
mySetCount(-2),
)
}
var rootElement = React.createElement(CounterApp, null)
ReactDOM.render(rootElement, document.getElementById("app"))
</script>
</body>
</html>
Reference
이 문제에 관하여(React를 Javascript에서 사용해보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kkdd/items/a1ff0dac08e118e132ca텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
