You can use React anywhere?
Planted 02021-05-27
Today I learned…
Two things:
- React is a JavaScript library
- You can load JavaScript libraries as a
<script>tag in any page with UNPKG
Okay, I already knew those two things. But I didn’t synthesize them to realize you can use React pretty much anywhere.
// the code that loads React!
<div id="root"></div>
<script src="https://unpkg.com/react@^17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@^17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@^7/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root')
const element = <div className="container">This is loaded in react!</div>
ReactDOM.render(element, rootElement)
</script>And here’s another example with a functional component vv
// the code that loads React!
<div id="root"></div>
<script src="https://unpkg.com/react@^17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@^17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@^7/babel.js"></script>
<script type="text/babel">
function Element() {
const [state, setState] = React.useState(0)
return (
<div>
<button onClick={() => setState(state + 1)}>{state}</button>
</div>
)
}
const rootElement = document.getElementById('root')
const element = <div className="container">This is loaded in react!</div>
ReactDOM.render(<Element/>, rootElement)
</script>Note: Using React from a CDN like this should probably only be used to play around and learn React or to use React code in a non-React place–like this site!
I have an automated system to publish blog posts every friday. The day after I published this, I woke up to my ESP system suspending my account for trying to load React into an email.
