Project.log

리액트 설치하지 않고 사용하기 본문

React.js

리액트 설치하지 않고 사용하기

jinuk_ 2023. 5. 13. 14:21
728x90
반응형

노마드코더 니꼴라스 ReactJS로 영화 웹 서비스 만들기에서 

React.js를 설치하지 않고 쓰는 모습을 보았습니다.

 

https://www.unpkg.com/

 

UNPKG

UNPKGunpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:unpkg.com/:package@:version/:file Examples Using a fixed version: You may also use a semver range or a

www.unpkg.com

1. unpkg사이트에 들어가서 형식에 맞게 url을 긁어옵니다.

 

여기서 UNPKG, unpkg, 언패키지는

npm 패키지들을 올려둔 CDN으로 간단한 URL을 통해 사용할 수 있게 한다.

 

CDN이란 웹에서 사용되는 다양한 리소스를 저장하여 제공하는 시스템이다.

 

unpkg.com/:package@:version/:file

이런식으로 가져오시면 됩니다.

 

 

2. 저는 index.html에다가 적용하여 사용해보겠습니다.

<!-- index.html-->

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</html>

 

3. 잘적용이 됬는지 확인하기 위해 콘솔에 React를 입력합니다.

위와 같이 출력되면 제대로 작동하는 것입니다.

 

3-1. 실습하고 있는 코드도 테스트해봅니다. (꼭 밑 코드와 같지않아도 됩니다)

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        id: "title",
        onMouseEnter: () => console.log("mouser enter"),
      },
      "Hello I'm a span"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("im clicked"),
        style: {
          backgroundColor: "tomato",
        },
      },
      "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

출력결과

 

728x90
반응형
저작자표시 비영리 변경금지

'React.js' 카테고리의 다른 글

리액트 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'  (0) 2023.04.22
리액트 firebase 오류 (firebase import오류)  (0) 2023.04.22
리액트 Fragments와 단축문법 <>, </>  (0) 2022.09.24
'React.js' Related Articles more