After playing with various ways to showcase the code examples on this blog, I've found that deploying them to GitHub Pages has the most straightforward solution for me.
While the CSS and vanilla Javascript examples were working out of the box, the React examples need a bit of extra work to run on GitHub Pages.
Below is the code for a basic counter app example that runs both on GitHub Pages and locally without no extra build tools or server required.
<html>
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App = () => {
const [val, setVal] = React.useState(0)
return (<button onClick={()=> setVal(v => v +1)}>
Counter is {val}. Click to increment!
</button>)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)
</script>
</body>
</html>You can see this example running on GitHub page here and the git repo here.
The first thing to note in the above code is the CDN import of the react, react-dom, and Babel. You can read here more about why we need to add the crossorigin attribute.
Also, if we want this example to run without a server we don't get access to importing Javascript modules. Therefore we will need to prefix anything that comes from react or react-dom with their corresponding module. For example, the hooks are React.useState() or React.useEffect().
Or we can also use object destructuring to extract what we need at the beginning of the main script tag:
const {useState} = React
const App = () => {
const [val, setVal] = useState(0)
// rest of code hereAnd speaking of the main script tag be sure to mark it as type="text/babel" or, given that the browser will not know how to interpret the JSX code, you will end up with the following error:
Uncaught SyntaxError: Unexpected token '<' At the time of writing this article, React was at version 18. Be sure to update the number in the script tag if you want to use a different version:
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js">The final step is to render the app with createRoot() in its corresponding root element:
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)And this is it. This flow should work quite nicely if would want to put simple React example apps and GitHub Pages.
Before you go, if needed, you can also checkout this guide on how to deploying your first NextJs app to GitHub pages without using create-next-app.
š 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
š 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.