개발환경 구축
2022-06-08
React 시작
- React 문서는 JavaScript 프로그래밍에 익숙한 사람을 대상으로 쓰여져 있으므로 전문가일 필요는 없지만 React와 JavaScript를 동시에 배우기 어려워 JavaScript를 익히고 시작하는 것을 권장합니다.
1. HTML에 DOM 컨테이너 설치
- 리액트를 설치하지 않고 html에서 리액트 사용하기
<body>
<!--1. hmtl 파일에 div 태그 추가-->
<div id="likeBtn"></div>
<!--
id 속성을 부여해 JavaScript가 찾는 태그 안에
React 컴포넌트 추가할 수 있게 한다.
-->
<!--2. 스크립트 태그 추가-->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 만든 React 컴포넌트를 실행. -->
<script src="like_button.js"></script>
<!--
body 내부에 script 추가,
처음 두개의 태그는 React를 실행시키고 3번째 코드는 직접 만든 컴포넌트를 실행
-->
</body>
/*3. React 컴포넌트 만들기*/
/*
like_button.js 새 파일 생성
likeBtn 이라는 React 컴포넌트 정의
*/
//스타터 코드
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
/*div를 찾고 '좋아요' 버튼이라는 컴포넌트 추가해 줌*/
const domContainer = document.querySelector('#likeBtn');
ReactDOM.render(e(LikeButton), domContainer);
2. 새로운 React 앱 만들기
환경 설정 및 설치
- Node 14.0.0 혹은 상위버전 npm 5.6 혹은 상위버전이 필요 (버전이 다르면 설치가 되지 않음)
npx create-react-app my-app (입력 후 설치 절차 진행)
cd my-app (폴더 이동)
npm(& yarn) start (시작)
- npx : npm 5.2+ 버전의 패키지 실행도구
- Creat React App은 Babel이나 Webpack 같은 build 도구를 사용하거나 설정 없이도 동작