React CDN 사용방법 / codepen

React는 크게 두가지 방법으로 사용하는데

한가지는 node 와 빌드 도구를 설치한

개발환경을 세팅하는 것이고 두번째는

cdn을 사용해서 온라인에서 바로

라이브러리를 끌어오는 것 입니다.

본격적인 개발을 위해서는 npx로

개발환경을 세팅하는 것이 좋으나

cdn을 사용할 일도 있을 수 있으니

여기서는 cdn 으로 React를 사용하는

방법에 대해서 알아보겠습니다.

파일 하나로 시작하니까 간단합니다.

우선 html 파일을 하나 만듭니다.

파일이름은 자유롭게 짓습니다.

script 태그에 cdn 세개가 필요합니다.

두개는 react 의 js 파일이고(라이브러리)

하나는 babel의 js 파일입니다.(jsx 컴파일러)

React CDN

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

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

CDN 링크 – React

A JavaScript library for building user interfaces

ko.reactjs.org

현재는 17 버전을 제공하고 있습니다.

새로운 버전이 나올 경우 CDN링크를 참고합니다.

웹사이트에서는 개발용과 배포용을

각각 제공하고 있습니다. 개발용은

배포용에 적합하지 않다고 합니다.

Babel CDN

<script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>

https://babeljs.io/docs/en/babel-standalone

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

BABEL CDN도 여러 버전이 있는데

공식 웹사이트의 CDN을 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
</head>

<body>
    <script type="text/babel">
        ReactDOM.render(
<h2>React Beginner Tutorial</h2>,
document.body
);
    </script>
</body>
</html>