웹사이트에 React추가
1. HTML파일에 DOM컨테이너 설치
// html
<body>
<div id="like_button_container"></div>
<!-- React를 실행. -->
<!-- 사이트를 배포할 때는 'develoment.js' 를 "production.min.js"로 대체한다.-->
<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>id 를 부여해준후 자바스크립트가 태그를 찾고 찾은 태그 안에 React 컴포넌트를 표시할 수 있다.
2. React컴포넌트 만들기
// like_button.js
'use strict'
const e = React.createElement;
// code....
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer)Create React App
싱글 페이지 어플리케이션 이다.
개발 환경을 설정하고, 최신 js를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 을 최적화 해준다.
$ npx create-react-app project-name
$ cd project-name
$ npm startCRA는 백 앤드 로직이나 데이터 베이스를 제어 할수 없다. CRA는 Babel이나 webpack 같은 build 도구를 사용하나, 설정없이도 동작 가능하다.
프로덕션을 배포할때 npm run build 를 실행한다.
CDN 링크
개발용
<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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>crossorigin 속성
CDN을 통해 React를 사용한다면, crossorigin 어트리 뷰트와 함께 사용하는걸 권장.
<script crossorigin src="..."></script>프로젝트에 JSX 추가하기
$ npm init -y$ npm install babel-cli@6 babel-preset-react-app@3- src폴더를 생성한다.
$ npx babel --watch src --out-dir . --presets react-app/prod명령어로 실행하면 자동화된 JSX감시기를 실행한다.
src/like_button.js라는 파일을 만들어주면, 감시기가 전처리 되어 브라우저와 호환되는 순수 JavaScript로 구성된 like_button.js를 생성한다. JSX를 포함한 소스 파일을 편집하면 이 과정이 자동으로 다시 실행된다.
참고
해당 포스팅은 실전 리엑트 공식 홈페이지 https://ko.reactjs.org/
리엑트 자습서 https://ko.reactjs.org/docs/getting-started.html 에서 참고하여 작성했습니다.
어제보다는 오늘 더 나은