마지막 레슨에서는 React를 시작하는 방법에 대해 논의했습니다. 아래는 최종 코드 예시입니다. 이 코드를 시작점으로 사용하려면 해당 코드를 코드 편집기의 index.html 파일에 붙여넣으세요.
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById("app")
function Header({ title }) {
return <h1>{title ? title : "Default title"}</h1>
}
function HomePage() {
const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
const [likes, setLikes] = React.useState(0)
function handleClick() {
setLikes(likes + 1)
}
return (
<div>
<Header title="Develop. Preview. Ship. 🚀" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
)
}
ReactDOM.render(<HomePage />, app)
</script>
</body>
</html>
이제 간단한 React 앱을 Next.js로 전환하는 방법을 알아보겠습니다.
'Dev > Next JS' 카테고리의 다른 글
| [공식문서] React에서 Next.js로 #3 (0) | 2023.08.11 |
|---|---|
| [공식문서] React에서 Next.js로 #2 (0) | 2023.08.11 |
| [공식문서] JavaScript에서 React로 #9 (0) | 2023.08.11 |
| [공식문서] JavaScript에서 React로 #8 (0) | 2023.08.11 |
| [공식문서] JavaScript에서 React로 #7 (0) | 2023.08.11 |
