- 직접만든 컴포넌트의 첫 글자는 반드시 대문자여야 함
- 소문자면 react랑 jsx는 html button태그라고 생각할 것
- 컴포넌트를 다른 컴포넌트들 안에 넣어주려면 함수로 만들어준 후 태그 넣듯이 넣어주면 됨
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<!-- ReactDom이 react element를 가져다 놓을 곳 -->
</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");
function Title (){ //기본 함수
return(<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>나는 타이틀</h3>);
}
const Button = () => ( //화살표 함수, function이랑 return문을 포함하고 있음
<button
style={{
backgroundColor: "tomato"
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
)
const Container = () => (
<div>
<Title />
<Button />
</div>
); //컴포넌트들을 함수로 만들어 렌더링
ReactDOM.render(<Container/>, root);
</script>
</html>
