Estoy buscando una solución/respuesta simple para esto. Planeo usar esto en un producto más grande para el trabajo y me preparo para capacitar a otros para su uso.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Playground</title> <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> <style> </style> </head> <body> <div id="root"></div> </body> <script src="./scripts/button.js"></script> </html>Ejemplo de uso de componentes funcionales y ganchos de la versión CDN de react.js
// Get a hook function const {useState} = React; const Example = ({title}) => { const [count, setCount] = useState(0); return ( <div> <p>{title}</p> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }; // Render it ReactDOM.render( <Example title="Example using Hooks:" />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>Sí, puede usar componentes de clase, componentes funcionales y ganchos de reacción. Pero no puede usar la sintaxis JSX directamente sin usar este script <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> .
Puede usar React.createElement() para crear su interfaz de usuario que sea compatible de forma nativa con los navegadores. Para obtener más información, consulte Agregar React a un sitio web
const e = React.createElement; function Text({ children }) { React.useMemo(() => { console.log('text renders'); }, [children]); return e('p', { children }); } class Button extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return e(Text, { children: 'You liked this.' }); } return e('button', { onClick: () => this.setState({ liked: true }) }, 'Like'); } } const domContainer = document.querySelector('#root'); ReactDOM.render(e(Button), domContainer); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Playground</title> <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> <style> </style> </head> <body> <div id="root"></div> </body> </html>