<!DOCTYPE html>
<html>
<body>
<div id="root" style="background-color: lightpink;"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
/*
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => console.log("mouse Enter"),
},
"Hello I'm a title"
);
const btn = React.createElement(
"button",
{onClick: () => console.log("i'm clicked")},
"Click me"
);
*/
const Title = () => (
<h3 id ="title" onMouseEnter = {() => console.log("mouse Enter")}>
Hello I'm a title
</h3>
);
const Button = () => (
<button style = {{
backgroundColor:"tomato",
}}
onClick = {() => console.log("i'm clicked")}
>
Click me
</button>
);
//const container = React.createElement("div",null, [Title, Button]);
const Container = () => <div>
<Title/>
<Button/>
</div>
ReactDOM.render(<Container/>, root);
</script>
</html>주석처리된 코드 : 원래 React라이브러리에서 지원해주는 코드
실제 코드 : JSX코드(좀 더 간단하고, 자주 사용)
* 규칙
- 반드시 변수명은 대문자로 시작(소문자는 html태그와 구분하지 못하기 때문)
ex) Title, Button
- const 뒤의 변수를 function처리 해준 뒤 사용 가능
(컴포넌트를 다른 컴포넌트 안에 넣는 개념)
https://nomadcoders.co/courses
(그림 눌러도 들어가진다..)
잡설
React로 1년간 실제로 개발에 참여했었는데, 사실 React가 뭔지 알고있냐고 하면 글쎄,,
아마 대답할 수 없을 것 같다.
React버전이 계속 업데이트 되어서 몇 년전 개발할 때와는 분명 다른 점도 있을 것이고,
개발할 때 사용했던 코드들 외에 좀 더 깊이 공부하고 싶어 아예 개념부터 들어보기로 했다.
영상 타임이 길지 않아 기간은 짧게 잡았는데, 코드를 일일히 타이핑하며 강의를 들으려니 생각보다 오래걸린다.
'배움 > React' 카테고리의 다른 글
| [ReactJS로 영화 웹 서비스 만들기] #3.1 (0) | 2022.04.24 |
|---|
