반응형
지금까지 리액트 연습하면서 JSX 문법을 사용하지 않고 했었는데요
JSX 문법으로 편리하게 사용 해 볼 수 있어요
바벨 babel 이 필요합니다
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous"></script>
JSX 문법을 사용하는 스크립트를 작성하는 부분에서는 type에 text/babel 이라고 써줘야 합니다
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>연습</title>
<!-- React, React-DOM 스크립트 -->
<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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous"></script>
</head>
<body>
<!-- 1. React 가 보여지는 곳 -->
<div id="root"></div>
</body>
<script type="text/babel">
// React 로 태그 만들기
const e = React.createElement;
class 버튼 extends React.Component {
constructor(props) {
super(props)
this.state = {
liked: false
}
}
render () {
return (<button onClick={() => {this.setState({ liked:!this.state.liked })}}>
{this.state.liked ? '버튼 눌림': "버튼 누르기"}
</button>)
}
}
</script>
<script type="text/babel">
ReactDOM.render(
<div>
<버튼 />
</div>
, document.querySelector('#root'));
</script>
</html>이렇게 하면 JSX 없이 할때보다 간결하게 할 수 있어요
사실 create-react-app 으로 생성하면 이런 설정들이 처음부터 다 되어있는 상태로 시작 할 수 있는데 기본을 연습해보기 위해서 해봤어요
반응형
'코딩 프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글
| 자바스크립트 OS 명령어 실행하기 (0) | 2021.10.23 |
|---|---|
| 스크롤바 보이지 않게 하는 CSS, 스크롤바 안 보이게 하는 CSS (0) | 2021.01.28 |
| React state 변수와 버튼에 기능 넣기 (0) | 2020.11.08 |
| nodejs 없이 react 문법 연습하기 (0) | 2020.11.06 |
| Visual Studio Code 자체 웹서버 html 코드 테스트 (0) | 2020.11.05 |
댓글