Building a website with React and Gatsby

Over the past few months I have been teaching myself React, and I am now using it in more and more projects. This month however, I hit a real plateau in my learning. I’d completed some tutorials (such as Wes Bos’ React for Beginners), built my own individual components, but had yet to put together a complete application using only React. I decided now was the time to try and build something from scratch.

As I don’t currently have any bright ideas for a brand new application, I thought I would re-build a site I have already made (karlwatson.co.uk) using the latest React tech stack.

Karl’s website is a static site generated using Hugo, so I decided to use the React equivalent – called Gatsby.

A couple of weeks and a fair few commits later, I now have a dev site somewhat resembling Karl’s Hugo site. This post is simply a summary of my likes and dislikes of my time with both React and Gatsby.

Likes

React is a wonderful system for building websites, in particular I enjoyed using…

Component based architecture

Coming from a background of BEM CSS and WordPress themes, I particularly like React’s focus on a component based architecture. As part of my current day job, I have built and now maintain a pattern library. These two factors together mean my brain works well with the component architecture, and I now break down all my sites into reusable components where possible.

Server-side rendering

I’m a huge advocate of progressive enhancement, so a large part of my reason for choosing to use Gatsby was the fact server-side rendering was included by default. If you’re building a blog with React, you simply have to be able to serve HTML and CSS without JavaScript, otherwise you are doing yourself and your customers a disservice.

Styled components

I think I will have to do a whole blog post on Styled Components. It took me about five minutes to understand the syntax, and once I understood it, I immediately fell in love with it. This is a seriously powerful tool for front-end developers and I strongly recommend using this in your next React project.

Dislikes

Whilst I did enjoy my time building with Gatsby, there were some parts of the process that I disliked such as…

Learning curve

Seasoned developers often underestimate how hard it is for newcomers learning their stack to become productive and confident. I found myself floundering on DuckDuckGo to find answers to various React setup issues. With the pace React is moving at (3 major version changes in 2 years), I found lots of documentation to be out of date, or no longer relevant.

GraphQL

One thing I hadn’t anticipated with Gatsby, is how much the system relies on GraphQL to lookup posts, pages, static files, etc. Prior to this project, I had little knowledge of GraphQL, and often found it to be the final roadblock in getting a component or page built. This project did increase my awareness and understanding of GraphQL, but I wish I had known going in I would need a working knowledge of this emerging tech.

Conclusions

After a month of learning, I still feel much more comfortable in the world of Hugo, accentuated with webpack for CSS and JS. React and Gatsby do give a great customer experience, and will continue to improve in the future, but for the moment I feel a simple portfolio and blog site for Karl is best built in Hugo.

Further resources