nomad code_react js로 영화앱 만들기_#2.3, #2.5, #2.6
2022. 10. 5. 13:54ㆍreact
React js hard cording_2
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => console.log("mouse enter")
},
"Hello I`m a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("I`m clicked."),
style: {
backgroundColor: "tomato",
}
},
"Click me"
);
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);
</script>React.Element로 HTML태그, 속성, event, 내용 등을 컨트롤 할 수 있음
html에 자식 태그를 삽입할 시, 배열 " [] "에 넣으면 생성할 수 있다
React j _ JSX(babel)
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
// JSX를 읽을 수 있게 해주는 cdn
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// JSX : JS를 확장한 문법. HTML 구조와 비슷하게 사용 가능
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I`m a span
</h3>
);
const button = (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("I`m clicked.")}
>
Click me
</button>
);
const container = React.createElement("div", null, [Title, button]);
ReactDOM.render(container, root);
</script>JSX는 HTML구조와 비슷하게 사용이 가능하며 babel을 통해 컴퓨터가 JS로 읽을 수 있게 하면 된다.
위와 결과물은 동일하게 출력된다.
React j _ JSX(babel)_2
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/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")}>
Hello I`m a span
</h3>
);
}
// 화살표 함수
const Button = () => (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("I`m clicked.")}
>
Click me
</button>
);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>각각의 컴포넌트(Title, Button)를 함수의 형태로 만들고 컴포넌트를 합치는 컨테이너 또한 함수의 형태로 만든다.
단, 모든 컴포넌트의 첫 글자는 대문자이여야 한다. 소문자로 작성할 시 리액트와 JSX는 HTML태그로 인식한다.
<결과물>
babel test page
'react' 카테고리의 다른 글
| nomad code_react js로 영화앱 만들기_#3.9 (0) | 2022.11.09 |
|---|---|
| nomad code_react js로 영화앱 만들기_#3.5 ~ 3.8 (0) | 2022.11.09 |
| nomad code_react js로 영화앱 만들기_#3.0 ~ 3.4 (0) | 2022.10.06 |
| nomad code_react js로 영화앱 만들기_#2.2 (0) | 2022.10.05 |
| nomad code_react js로 영화앱 만들기_#2.1 (0) | 2022.10.05 |