Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- 프론트엔드개발자
- Firebase
- API
- 클론코딩
- 리액트오류
- 프로그래머스
- react
- HTML
- github
- 깃
- 리액트
- javascript
- gitignore
- 야놀자
- 깃허브
- nextjs
- 깃버전
- 국비지원취업
- js
- gitrevert
- 코딩테스트
- ReactError
- 깃커밋
- gitcommit
- 자바스크립트
- typescript
- 패스트캠퍼스
- 파이어베이스
- webdevcurriculum
- Git
Archives
- Today
- Total
Project.log
리액트 설치하지 않고 사용하기 본문
728x90
반응형
노마드코더 니꼴라스 ReactJS로 영화 웹 서비스 만들기에서
React.js를 설치하지 않고 쓰는 모습을 보았습니다.
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 |