기존 HTML, CSS, JS만 사용한 코드
html
<!doctype html>
<html class="no-js" lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>즐★거★운★웹★개★발</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:alt" content="">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="icon.png">
<link rel="manifest" href="site.webmanifest">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<h1>
HAHAHAHAHAHHAHAHHAHHAHAHAHAHAHHAHAHAHAHAHHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHAHAHAHHAHAHA
</h1>
<div id="root">
</div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="js/MyButton.js"> </script>
</body>
</html>css
h1 {
color: green;
font-style: italic;
}js
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
"button",
{
onClick: () => setIsClicked(!isClicked),
style: {
backgroundColor: isClicked ? "red" : "green",
},
},
isClicked ? "Clicked!" : "Click me!"
);
}
const domContainer = document.querySelector("#root");
ReactDOM.render(React.createElement(MyButton), domContainer);React 사용
create-react-app
기본 리엑트 프로젝트를 생성해주는 명령어
$ npx create-react-app <프로젝트명>npm start
리엑트 프로젝트에서 이 명령어를 실행하면 웹사이트가 실행된다.
$ npm startReferance
안녕하세요! 프로타쿠입니다