At the company I work for, we're shifting over to a stack that uses Gatsby (which means we'll also be using React and GraphQL). While I have intermediate level expertise in React, I didn't even know what GraphQL or Gatsby were the first time they were mentioned. It was obvious I would have to do a lot of catching up. I figured the best thing to do would be to try and convert my existing portfolio site into a JAM Stack site with Gatsby and React.
While it means a lot of work, I firmly believe the best way to learn something new is to do it (rather than read about it, or watch someone else do it, although doing those things can add to your learning).
The old cristin.io was a single page site that used React. It didn't need React, but I'd used it just to learn it, just like I'm doing now.
My new site, as I envisioned it, would incorporate a blog with single posts, category pages, and an index page. I'd keep my Resume page, but redesign it.
Styles would be handled with Emotion, another technology I'd soon be using at work. I didn't know how routing would work until I figured out Gatsby (it's so easy!) and I'm slowly getting used to GraphQL.
Below are the most useful ones I found and ultimately incorporated into my new site:
- Emotion packages for styled components
- FontAwesome packages
- The ability to use SASS
- A page transitions animation plugin
- gatsby-v2-plugin-page-transitions (I actually had to create and update a local plugin based off of this one to remove console errors)
- A GraphQL friendly API for my CMS, ButterCMS
- The ability to parse html returned from my CMS' API
- The ability to change metadata dynamically
- A sitemap generator
- A code syntax highlighter
- A robots txt generator
- Netlify CLI for deploys
- Google Fonts
- Google analytics
Overall it was a great learning experience and I highly recommend that you do a project with the technologies you want to learn instead of simply trying to read up on them.
