reactjs - How to Add External React Libraries into Static HTML Page

Question

I have this in a js file:

const { motion } = require('../fmotion/node_modules/framer-motion/');

class Welcome extends React.Component {
render() {
    return

    <div>
     
        <Text>{this.props.name}</Text>
    <motion.div
        onClick={() => setIsActive(!isActive)}
        animate={{
            rotate: isActive ? 90 : 0,
        }}
        >
        </motion.div>;
            </div>
}
}

And this is my Html:

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


<script src="~/js/welcome.js" type="text/babel"></script>

<script type="text/babel">
    ReactDOM.render(
        <Welcome name='Trikamscsc'/>,
        document.getElementById('root')
    );
</script>

How can i integrate the Framer-Motion Library into my static Html Page?

Answer 1

等待大神答复