728x90
참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby
1. JSX코드로 바꾸어보자!
<!DOCTYPE html>
<head>
<body>
<div id="root"></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 Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello, I'm a title!
</h3>
);
const Button = (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me!
</button>
);
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>👉🏻짠! 전체 코드
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
}
},
"Click me!"
);const Button = (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me!
</button>
);👉🏻위의 코드가 이전 강의까지 작성했던 코드 찐 리액트 코드이고 아래가 JSX를 이용해 간략하게 적은 코드이다. JSX코드를 사용하기 위해서는 찐 리액트 코드로 변환하는 작업이 필요하다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
...중략...
</script>👉🏻해당 작업은 babel을 통해서 할 수 있다. 위의 스크립트를 붙여넣기 해주고 리액트 코드를 감싸는 스크립트의 타입을 text/babel로 지정한다.
728x90
'그 땐 Front했지 > 그 땐 React했지' 카테고리의 다른 글
| [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 0. Understanding State (0) | 2022.05.16 |
|---|---|
| [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 6. JSX part Two (0) | 2022.05.15 |
| [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 3. Events in React (0) | 2022.05.14 |
| [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 2. Our First React Element (0) | 2022.05.14 |
| [생활코딩/React] 2022개정판 | 10. delete (0) | 2022.05.06 |
