<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <div id="root"></div>
</body>
    <script  src="<https://unpkg.com/[email protected]/umd/react.development.js>"></script>
    <script  src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>"></script> 
    <script  src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script> 
    <script src="<https://unpkg.com/[email protected]/prop-types.js>"></script>
    <script type="text/babel">
        function Btn({text,fontSize=16}) {
            return <button 
            style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border:0,
                borderRadius: 10,
                fontSize,
            }}
            >{text}</button>;
        }
        Btn.propTypes={
            text: PropTypes.string.isRequired,
            fontSize:PropTypes.number,
        };
        function App() {
            return(
                <div>
                    <Btn text="Save Changes" fontSize={18} />
                    <Btn text={"continue"} />
                </div>
            )
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />,root);
    </script>

    </html>

props 다른 기능 다 해보기