React 맛보기
CodeSandBox
프론트엔드 코드를 작성하고 시도해볼 수 있는 도구.
React 등 다양한 환경에 대한 기본 설정이 되어있다.
React CDN 사용하여 활용해보자.
JSX
const element = <h1>hihi</h1>
JavaScript의 확장 문법
HTML 태그를 변수화 할 수 있다.
React.createElement 표현식
Babel
Javascript Complier
CDN
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
멀티 element
<React.Fragment></React.Fragmetn>
<></>
element 찍어내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const Paint = ({ title, description }) => {
return (
<>
<h1> {title} </h1>
<h3> {description} </h3>
</>
);
};
const element = (
<>
<Paint title="A" description="apple" />
<Paint title="B" description="banana" />
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
재사용 가능한 함수를 만들어서 element를 쉽게 만들어낸다.
Custom Element는 원래 있는 html 태그와 혼동할 가능성이 있기 때문에 Upper Case로 쓰도록 한다.
JS, JSX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const Text = ({ text }) => {
//js와 jsx 섞어서 사용한다.
//text가 대문자면 h1, 소문자면 h3
if (text.charAt(0) === text.charAt(0).toUpperCase()) {
return <h1>{text}</h1>;
} else {
return <h3>{text}</h3>;
}
};
const element = (
<>
<Text text="Apple" />
<Text text="Banana" />
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
console.log('bang log');