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.