REACT unpkg CDN 컴포넌트를 다른 컴포넌트 안에 넣기

unpkg REACT / REACT-DOM

    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>

    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

 

unpkg babel standalone

<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
            </h3>

        )
        const Button = <button style={{
            backgroundColor: "tomato"
        }} onClick={()=>console.log("is clicked")}>Click me</button>

        const container = React.createElement("div", null, [Title, Button]);
        ReactDOM.render(container, root);
    </script>

 

요소들을 함수형으로 바꾸면 JSX는 <대문자로 시작하는 이름/> 이렇게 불러오기 가능

>>컴포넌트를 다른 컴포넌트 안에 넣기

 <script type="text/babel">
        const root = document.getElementById('root');
        const Title = () => (
            <h3 id="title" onMouseEnter={()=>console.log("mouse enter")}>
                hELLO
            </h3>

        )
        const Button = () => <button style={{
            backgroundColor: "tomato"
        }} onClick={()=>console.log("is clicked")}>Click me</button>

        // const container = React.createElement("div", null, [Title, Button]);
        const Container = () =><div><Title/> <Button/></div>
        ReactDOM.render(<Container/>, root);
    </script>