Traditional blogging engines, like Wordpress, treat the content of a blog post as the most important element of the page. Other elements, like widgets and plugins are often disjointed and second class citizens in comparison to the content itself. A wide array of plugins exist in Wordpress, but getting them to work perfectly can be a challenge.
Breaking the problem down I decided that a blog post could be a collection of BlogPostComponents (and the content of the post is just one such component) and set off to build a JSON API in Rails that could be consumed by a React front-end to be the ulitmate user experience on the blog.
This project is an interesting case study in building a production ready react app, including a number of gotchas along the way.
I'll start with a brief high-level overview of React and Redux for people unfamiliar with the concepts, and explain the application logic code. I then will dive into the more advanced gotchas I encountered.
- Converting the app to universal (aka isomorphic) for SEO using
asyncConnect - Managing
metatags withreact-helmet - Extensive use of
ReactDOMto interact with browser events- Animation of
PostComponentson certain scroll events - Capturing link clicks from
dangerouslySetInnerHTMLcontent
- Animation of
- Page Transition Animations
- Deploying an hosting with
PM2and DigitalOcean
The configuration and setup was a nightmare but now coding on the project is super fun. After everything is said and done, I'm not sure I would go through the trouble, but having said that coding on the project is an absolute blast now.
