1. React 사이트에 접속해 CDN 주소 복사하기
https://reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper
CDN Links – React
A JavaScript library for building user interfaces
reactjs.org
<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>2. Babeljs 사이트에 접속해 CDN 주소 복사하기
https://babeljs.io/docs/en/babel-standalone
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
- babel이 필요한 이유는 JSX타입을 감지해서 컴파일 할 때 JS코드로 바꿔주기 때문이다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>1. HTML 파일 생성
- react 프로젝트를 생성한 폴더와 동등한 곳에 파일 생성! (react00_start파일과 react01_hello 파일안에 react 프로젝트가 있다.)
2. CDN으로 react와 babel링크 걸기
<!DOCTYPE html>
<html>
<head>
<!--cdn으로 react링크-->
<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>
<!--cdn으로 babel링크-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!--화면에 보일위치-->
<!-- React코드 -->
</body>
</html>3. 웹페이지에 보일 위치 코드 작성
<body>
<!--화면에 보일위치-->
<div id = "myReact"></div>
<!-- React코드 -->
</body>4. React 코드 작성
<body>
<!--화면에 보일위치-->
<div id = "myReact"></div>
<!-- React코드 -->
<script type="text/babel">
function Hello(){
return <h1>안녕하세요</h1>;
}
ReactDOM.render(<Hello/>, document.querySelector("#myReact"));
</script>
</body>- script type="text/babel"이 없으면 안된다! 오류남!
- ReactDOM.render(<함수명/>, 화면에 표시할 위치)
5. 전체코드
<!DOCTYPE html>
<html>
<head>
<!--cdn으로 react링크-->
<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>
<!--cdn으로 babel링크-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!--화면에 보일위치-->
<div id = "myReact"></div>
<!-- React코드 -->
<script type="text/babel">
function Hello(){
return <h1>안녕하세요</h1>;
}
ReactDOM.render(<Hello/>, document.querySelector("#myReact"));
</script>
</body>
</html>
'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글
| 프론트엔드 7-5. [React] port 번호 변경하기 (0) | 2022.02.19 |
|---|---|
| 프론트엔드7-4. [React] App.js를 통해서 화면 구성 (0) | 2022.02.19 |
| 프론트엔드7-2. React의 구조(index.html, App.js, index.js) (0) | 2022.02.18 |
| 프론트엔드7-1. React 설치 (Node.js 설치) (0) | 2022.02.18 |
| 프론트엔드6-4. jquery플러그인 easing/checkeditor/ bxslider / dialog (0) | 2022.02.18 |
