While migrating my site from Orchard to Hugo I wanted to add some JavaScripts. Specifically I wanted that to power the search experience using some simple JavaScripts. However, I’ve grown quite fond over using React (and TSX/JSX) to any kind of user experiences for the web and I did not want to go back to pure JavaScript or use some DOM manipulation scripts such as jQuery.
Hugo, that I use for my static site, does not directly have support for transpiling React. But with a few small steps you can make React transpiling as a part of your Hugo build and use React for your user experiences. Yes, this might not be new to everyone, but I did not find a direct guide on how to set this up - specifically for Hugo noobs such as me. So here’s a quick guide on how to get started with Hugo and React.