기존 웹페이지에 React 추가하기
기본 뼈대만 있는 웹페이지입니다.
<html>
<head>
<title>일정 관리</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>일정 관리를 시작하세요.</h1>
</body>
</html>
DOM 컨테이너로 사용할 <div> 태그를 추가하고, <script> 태그를 사용해 react와 react-dom 두 개의 javascript 파일을 가져옵니다. 미리 react 컴포넌트도 추가합니다.
...
<body>
<h1>일정 관리를 시작하세요.</h1>
<div id="root"></div>
<!-- 리액트 가져오기-->
<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>
<!-- 리액트 컴포넌트 가져오기-->
<script src="MyButton.js"></script>
</body>
</html>// MyButton.js
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
)
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);결과물
Create React App 사용하기
React 로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태로 프로젝트를 생성해주는 도구입니다.
# 사용법
$ npx create-react-app <projecr-name>Cannot create a project named "projecr-name because of npm naming restrictions:
* name can no longer contain capital letters
Please choose a different project name.❗️ 프로젝트 이름에 대소문자 또는 특수기호를 사용할 수 없습니다.
# 경로 이동
$ cd <projecr-name>
# 애플리케이션 실행
$ npm start애플리케이션을 실행하면 자동으로 브라우저가 열리면서 리액트 애플리케이션이 로컬 개발 환경에서 실행됩니다.
서버를 종료하려면 다음 단축키를 입력하면 됩니다.
MAC :Control+c
Window :Ctrl+c
Today I Learned