실습. HTML만으로 간단한 웹사이트 만들기
<html>
<head>
<title>hee's react study</title>
<link rel="stylesheet" href="2강_style.css">
</head>
<body>
<h2>20240524<br>hee's react study</h2>
<!-- 기존 html파일에 DOM 컨테이너를 추가.-->
<!-- Root DOM Node라고도 부름. -->
<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="2강_MyButton.js"></script>
</body>
</html>h2 {
color:darkblue;
font-style:italic;
}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 (CRA)
create-react-app 이란?
create-react-app은 React로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태로 프로젝트를 생성해주는 도구.
npx 정의와 사용법
npx(eXecute NPm package binaries) 란?
npm 패키지를 설치한 이후에 곧바로 실행, 엑스큐트까지 해주는 명령어
사용법
#사용법
$ npx create-react-app <your-project-name>
#실제 사용 예제
$ npx create-react-app my-app실습 파일을 확인하고 싶다면?
https://github.com/ContenderPeerStudy/reactstudy_hee/tree/main/처음_만난_리액트/실습/2강
흥미있어 보이는 것은 모두 도전하고 경험하며 살기!