강의 유튜브 주소 :
http://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn
일단 우리가 아는 HTML에서 CDN방식으로 React를 사용하려면 총3개의 script가 필요하다며
강의에서는 하단의 3개의 script 경로를 알려준다.
// react
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
// react-dom
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
// babel-loader
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> babel-loader는 react문법을 html에서 알 수 있도록 컴파일하는 역할을 한다.
사용예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
// react
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
// react-dom
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
// babel-loader
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- #root에 react로 생성한 dom 객체를 삽입한다. -->
<!-- text/babel 타입을 넣어주어야 babel-loader가 인식할 수 있다. -->
<script type="text/babel">
class LikeButton extends React.Component {
constructor(props){
super(props); // 이렇게 해줘야 class함수 내부에서 this로 접근할 수 있다.
// state 선언
this.state = {
liked : false
}
}
render(){
// jsx 문법
return (
<button type="submit" onClick={() => {
this.setState({ liked : true })
}}>
{ this.state.liked === true ? 'Liked' : 'Like' }
</button>;
);
}
}
</script>
<!-- text/babel 타입을 넣어주어야 babel-loader가 인식할 수 있다. -->
<script type="text/babel">
// ReactDom의 render 메소드를 통해 LikeButton 컴포넌트를 #root에 생성한 후 삽입한다.
ReactDOM.render(<LikeButton />, document.querySelector('#root'));
</script>
</body>
</html>
'~2022 > FE-React' 카테고리의 다른 글
| React 기초 학습 8.배열에 push할때 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
|---|---|
| React 기초 학습 7.자식 컴포넌트로 props 전달 / 주석 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 6.반복문에서 key (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 5.클래스를 Hooks로 바꿔보자 (Zerocho님 강의 학습 후기) (0) | 2020.04.21 |
| React 기초 학습 4.파일 수정 후 자동으로 빌드되게하자! (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 3. 필요한 파일들에 대해 알아보자(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 2. node환경에서 해보자! 필요한 패키지 다운로드.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.18 |
| ReactJS로 웹 서비스 만들기 학습 정리 (0) | 2018.08.12 |