반응형
react로 뭔가 만들어보려면 초기 세팅하는 것들이 많은데요
문법만 기초부터 연습해보려면 nodejs 설치 없이도 할 수 있어요
Visual Studio Code 만 설치되어 있으면 할 수 있습니다
기본 html 에서 react 스크립트를 불러와보세요
공식 문서에서 확인 해 볼 수 있어요
reactjs.org/docs/cdn-links.html
<!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>
</head>
<body>
</body>
</html>이렇게 2개 라인을 head 태그에 붙여 넣어서 기본 틀을 만들어요
이제 script 태그 안에 React 문법을 사용할 수 있어요
<!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>
</head>
<body>
<!-- 1. React 가 보여지는 곳 -->
<div id="root"></div>
</body>
<script>
// React 로 태그 만들기
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props)
}
render() {
return e('button', null, 'Like')
}
}
</script>
<script>
// React로 만든 태그 렌더링 하기
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>
</html><div id="root"></div>
리액트로 만든 컴포넌트가 보여지는 위치입니다
React.createElement 이용하여 태그를 만들고 render를 이용하여 표시합니다
반응형
'코딩 프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글
| React JSX 문법 사용해보기 (0) | 2020.11.09 |
|---|---|
| React state 변수와 버튼에 기능 넣기 (0) | 2020.11.08 |
| Visual Studio Code 자체 웹서버 html 코드 테스트 (0) | 2020.11.05 |
| Visual Studio Code 에서 React 개발환경에 필요한 확장 프로그램 (0) | 2020.11.04 |
| 자바스크립트 Javascript 스크롤바 제거하기 (0) | 2020.10.21 |
댓글