So I decided to dive into learning React with a few courses and some experimentation. I had the aim of building a site in Gatsby.js as a test for doing projects built entirely in React.
<a> tags became
<Links>, and I quickly saw what people had been enthusing about.
Managing everything in one place is such a cathartic experience.
With WordPress templating, I used to have function files, filter files, template files, and Sass partials, often with similar names, depending on the framework I'd be using. To build a site meant needing to buffer the entire project in my short-term memory. Not an easy feat to manage.
And then you would complete a project, and forget it all entirely. Until it went to the client…
Every time a client returned with a last-minute change, I would open up the code (which I might not have touched for weeks or months), and try to grok what function lived where, or what I had called that Sass partial. Even with the help of browser dev tools, this can be really annoying.
Now with Gatsby and React, I have my logic in one language, and in a way that makes groking easier. I have my layout, template and config modules at hand in the folder structure, without duplication.
Whilst this might look weird, it actually makes it much easier to understand what’s going on. You know you’re dealing with this data, using this HTML, and with CSS-in-JS strategies such as Styled Components, you can see exactly what CSS is going to be implemented too. In one file.
GraphQL: SQL-like data queries
One thing I particularly love about Gatsby.js is its inclusion of GraphQL. Like SQL, you use GraphQL to query your data, whether from the WordPress API, Contentful or Markdown, and extract a dataset to display in your template.
This approach to data is really adaptable. I love the fact that you can install a plugin and query your API endpoints with such ease.
Gatsby.js comes with GraphiQL, which is a simple web-based IDE so you can query your data and get back examples of content immediately. You can then copy this query into your React module and get back the information you need, whether it's the title, content, featured image, categories or any other frontmatter you might have set up.
Aside from those pesky tick characters, which are sometimes hard to spot for a newbie, I think this is a great tool, and has sped up my development a significant amount.
CSS in JS
This is the thing that I found hardest about React. I've tried 3 methods so far, and don't really love any of them.
Following the tutorial on Gatsbyjs I built up my project from scratch, breaking things profusely at first, but it honestly didn’t take long to gain confidence enough so that I launched my first site at https://freebabylon5.com recently.
Be warned: the tutorial isn’t quite finished yet, you might be better off starting with one of the starter kits already available, so that you get
react-helmet and active links implemented, the 2 things I had to learn independently.
The Way Forward?
Together with my colleagues at Indigo Tree we’re now looking at using WordPress as a backend, where clients can edit their content without the worries of insecure plugins or other methods of being hacked.
Using GatsbyJS with its “Bring Your Own Data” strategy makes perfect sense, and we’re about to start building our first Gatsby client site using the plugin
gatsby-source-wordpress to pull in our data and build a totally secure website with some pretty impressive gains on loading time. We’ll also sleep better at night knowing insecurities in WordPress are no longer putting our clients at risk.
The web is always changing. And the way forward isn't always easy to see. Now, with GatsbyJS, we're beginning to feel like we can visualize where things are going.