Publish websites using ReactJs

Publish websites using ReactJs — 2 minute read

tl;dr= Use ReactJs to publish static + isomorphic websites

git push -> travis -> webpack -> reactjs -> gh-pages

reactpub

React can render both to in-browser DOM - which is the default use case - as well as to an in-memory string - which is usually used in server-side rendering. Thanks to static-site-generator-webpack-plugin doing the heavy lifting, and a few node modules of my own, it can also be used to generate static sites. This is perfect for hosting on Github Pages, or similar hosts.

I have switched from using docpad to this Webpack + ReactJs solution for my own blog, and managed to cut the build times down by an order of magnitude.

… but wait, there’s more! Since ReactJs renders on both client and server, the static site can (optionally) let React “take over” in the browser, and the static webpage turns into a Javascript app, where you can navigate between one page and another without a browser refresh or network request. exactly like it does in an isomorphic website! ∗1

This makes for a very snappy experience for those browsing your website!

A Talk

I’ll be giving a talk about this at the next ReactJs meetup, covering:

… link to the slides will be posted here after the talk.

Update

Gave a talk on this at a ReactJs meetup, and as promised, here are the slides for “Publish Websites with ReactJs”.

You can find that, along with slides for other talks by me, at the all new presentations page.

Footnotes

∗1 Also known as universal Javascript