Building a website with React and Gatsby
What I learnt from re-building an existing site using the React static site generator 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.
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.
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.
Whilst I did enjoy my time building with Gatsby, there were some parts of the process that I disliked such as…
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.
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.
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.