React

#2.5 JSX

김예나 2023. 2. 27. 17:11
  •  jsx
    •  자바스크립트를 확장한 문법
    • html에서 사용한 문법과 흡사한 문법을 사용하여 리액트 요소를 만듦
  • Babel
    •  jsx로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것
<!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");
    const Title = <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>나는 타이틀</h3> 
    const Button = (
        <button 
        style={{
                backgroundColor: "tomato"
            }}
            onClick={() => console.log("im clicked")}        
        >
            Click me
        </button>
    ) //여기가 jsx임, html과 유사함
    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(container, root); 
</script>

</html>