만들면서 학습하는 리액트(react):소개편 - 020
소개편
시작점
브랜치 전환
$ git checkout intro/jsx
실무에서는 CRA(create-react-app) 같은 툴로 개발환경을 구성함
index.html 수정
<html>
<head>
...
<title>Lecture React</title>
<link rel="stylesheet" href="./style.css" /> <!-- style.css 복사 -->
</head>
...
<body>
...
<script type="text/babel" src="js/main.js" data-type="module" data-presets="react"></script>
</body>
</html>
js/main.js 생성
// 2-react/js/main.js
const element = <h1>Hello world</h1>;
ReactDOM.render(element, document.querySelector("#app"));
헤더 구현
브랜치 이동
$ git checkout intro/scaffolding
main.js 수정
const element = (
<header>
<h2 className="container">검색</h2>
</header>
);
JSX 는 모양은 HTML이지만 실제로는 자바스크립트라서 사용방법이 HTML과 다름
속성 이름이 HTML의 경우 소문자만 사용하지만 JSX는 CamelCase를 사용(onclick -> onClick)
class -> className
최종 정리
생략