react

nomad code_react js로 영화앱 만들기_#2.1

Kale_coding 2022. 10. 5. 11:32

클릭이벤트_클릭 counter

Vanilla JS

<body>
  <span>Total click: 0</span>
  <button id="btn">Click me</button>
</body>
<script>
  let counter = 0;
  const button = document.getElementById("btn");
  const span = document.querySelector("span");
  function handleClick(){
    counter = counter + 1;
    span.innerText = `Total click: ${counter}`;
  };
  button.addEventListener("click", handleClick);
</script>

→Click me 버튼을 클릭하면 클릭한 횟수가 카운팅 됨.

React import (cdn 방식)

<배포용>

<body></body>
// React cdn
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
// React-dom cdn
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<개발용>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

react cdn 링크

https://ko.reactjs.org/docs/cdn-links.html

 

CDN 링크 – React

A JavaScript library for building user interfaces

ko.reactjs.org