진유림님의 리액트 강의 '만들면서 배우는 리액트: 기초'를 수강하며 배운 점을 정리한 글입니다.
npm, yarn 패키지 설치없이 html 파일에서 리액트 써보기
-
아래 리액트 공식문서 페이지로 들어간다
https://ko.reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags -
2단계 스크립트 태그 추가하기의 스크립트 코드 스니펫을 복사하여</body>바로 앞에 복붙한다.
<body>
<!-- 리액트 추가하기 -->
<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>
</body>
- 화면에 그리고자 하는 것을 jsx 형식으로 쓴다. 여기서는 h3 태그로 '이것이 리액트..!'를 화면에 보여주고자 한다.
<body>
<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>
const title = (
<div>
<h3>이것이 리액트..!</h3>
</div>
)
</script>
</body>- 바벨 스크립트를 추가하고 화면에 그릴 내용이 있는 스크립트 태그에
type="text/babel"속성을 추가한다.바벨이란?
새로운 JS 문법을 브라우저가 이해할 수 있도록 변환시켜주는 컴파일러
<body>
<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="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- text/babel 속성 추가 -->
<script type="text/babel">
const title = (
<div>
<h3>이것이 리액트..!</h3>
</div>
)
</script>
</body>- 브라우저에 그릴 곳을 추가한다.
<body>
<!-- 이 곳에 그릴 거에요 -->
<div id="app"></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="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const title = (
<div>
<h3>이것이 리액트..!</h3>
</div>
)
const app = document.querySelector("#app");
</script>
</body>ReactDOM.render()함수로 그려준다.
<body>
<div id="app"></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="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const title = (
<div>
<h3>이것이 리액트..!</h3>
</div>
)
const app = document.querySelector("#app");
// title을 렌더할거다 app에다가
ReactDOM.render(title, app);
</script>
</body>결과화면
작성한 스크립트
브라우저가 이해할 수 있도록 바벨이 컴파일한 스크립트
얼레벌레 프론트엔드 개발자