<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 사용해보기</title>
<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>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const root = document.getElementById("root");
function myComponent() {
return React.createElement("h1", null, "hello");
}
ReactDOM.render(<myComponent />, root);
</script>
</body>
</html>
화면에 text를 띄워보는 코드를 실행했는데 화면에 나타나지 않는 에러가 발생했다
어떤게 잘못되었는지 코드를 확인해보았는데,
함수형 컴포넌트를 정의해주는 과정에서 컴포넌트 이름이 "myComponent"로 소문자로 시작하는 것을 발견했다
그래서 이름을 "MyComponent"로 바꿔준 결과
원하는 text가 제대로 실행 된 것을 확인할 수 있다
프론트엔드