I'm looking for a simple solution/answer for this. Planning to use this on a larger product for work and preparing myself to train others for its use.
<!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>Example of using functional components and hooks from CDN version of 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>Yes, you can use class components, functional components, and react hooks. But you can't use JSX syntax directly without using this script <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>.
You can use React.createElement() to create your UI that is natively supported by browsers. For more info, see Add React to a Website
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>