티스토리 뷰

React

[노마드] ReactJS 영화 웹 서비스 만들기#2

JxxxxH 2023. 3. 7. 17:23

 

 

vanilla.js

1. Html 만들기 2.Javascript에서 가져옴 3.event감지 4.데이터업데이트

<!DOCTYPE html>
<html>
    <body>
        <span>Total clicks: 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 clicks: ${counter}`;
        }
        button.addEventListener("click", handleClick);
    </script>
</html>

 

React JS

다른 사람은 쓰지 않는 어려운 방식. 하지만 이걸 먼저 이해해야함. 

<html>
  <body>
      <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script>
    const span = React.creaeElement("span", { id:"cool-span" }, "Hello I'm a span");
    //안쓰는 방법. 외울 필요 없음!
    ReactDOM.render(span, root)
  </script>	
</html>
  • react js는 엔진. 인터렉티브한 UI를 만들 수 있는 라이브러리.
  • react-dom은 라이브러리 또는 패키지. React element를 HTML에 두는 역할.

 

'React' 카테고리의 다른 글

[노마드 ReactJS 영화 웹] #5 CREATE REACT APP  (0) 2023.06.14
[노마드 ReactJS 영화 웹] #4 Props  (0) 2023.06.13
[노마드 ReactJS 영화 웹] #3.5 Inputs and State  (0) 2023.06.05
[노마드 ReactJS 영화 웹] #3.2 setState  (0) 2023.06.04
[노마드] ReactJS 영화 웹 서비스 만들기 #2.5 JSX  (0) 2023.03.16
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함