The Great Gatsby.js

Shiven Kumar | February 22, 2021 | 3 min read

company

Any developer who has even thought about trying out front-end software development has likely heard of React. It’s one of the most popular front-end frameworks and is relatively easy to pick up. So, of course, as a student developer wanting to expand my skill set, I wanted to try and learn it! 

One problem

I had absolutely zero web development experience, with the vast majority of my past projects being simple Java and C++ desktop apps and a few Android apps in between. As a hardcore object-oriented programmer, I found React (and JavaScript in general) to be a lot less structured than I was used to; it affected my productivity and enjoyment while coding. Bugs were harder to trace, code was less reusable, and there were functions all over the place! 

Enter Gatsby (with a little help from TypeScript)

My mentor at Prosperly introduced me to Gatsby.js, a static website generator that uses React to allow fast, easy website building with a more structured approach than a pure React page. It requires almost none of the boilerplate and templated code you would need for a more HTML-first approach. Using TypeScript also alleviated most of my struggles coming from statically typed languages like Java and C++.

For the next person looking to build a site with Gatsby and React, I would pass on these lessons I learned the hard way:

  1. Baby Steps. When starting a website, it may be tempting to dive straight in and start coding. First, try to plan out the page or widget you are trying to create, whether on a computer or even just a rough sketch of some rectangles. Visualize where each piece will go, and then work from there. Wherever possible, try to reuse code or make flexible components and containers to make less work for yourself later on. If you decide to change your site's color scheme, you don’t want to have to go and edit the inline CSS of fifty different buttons and text boxes! Prioritize modular design and reusable React components to make it easier to code, easier to read, and easier to modify.
  2. Don’t be afraid of GraphQL. When starting with React and Gatsby, even beginners to JavaScript who have some other programming experience should be able to dive right in. GraphQL, on the other hand, may be very new to many of you (I know I had never heard of it before). Don’t be intimidated! GraphQL is a powerful but easy-to-learn tool - it will make your image loading and data queries simple after only a little time invested. Gatsby even has many plugins to make GraphQL even faster and allow you to do things like automatically generate blog post pages from simple Markdown files. There’s no need to be a master of GraphQL, but more than just a basic understanding will do wonders for your understanding of tutorials and documentation and allow your sites to really flourish.

While building a web page for Prosperly using Gatsby, I learned a lot about React and web development in general and my own coding style. Previously, I had learned (and taught) good software design practices, including modularity and readability, but I always saw web development as comparatively messy and disorganized. My only experience with it was mostly HTML templates.

Working with my mentor at Prosperly, I was able to adapt all my software design practices and bring them over to web development. Reusable components, modular pages, and clean, concise code made my site a joy to code and easy for others to understand. I want to thank the Prosperly team for providing an amazing learning experience with website design, from providing beautiful graphics to an easy-to-understand codebase, and I look forward to continuing my front-end work!

© 2021 FIOR LLC. All rights reserved.

Prosperly is still in beta and undergoing testing before its official release. The site, app, software and content are provided on an ‘as is’ and ‘as available’ basis. FIOR LLC does not give any warranties, express or implied, as to the suitability or usability of the Prosperly site, app, software or content.

FIOR LLC makes no guarantee or other promise as to any results that may be obtained for you or anyone else from using the information provided. You are solely responsible for the use of any content and hold FIOR LLC. and all members and affiliates harmless in any event or claim, financial or otherwise, that occur to you as a result of acting on information found from using the Prosperly site, app, software or content.

FIOR LLC is not a credit repair organization, credit counselor, debt management provider, student loan counselor, certified financial planner, or financial, investment, tax, or legal advisor, as defined under federal or state law.

Please note: By clicking on some of the links above, you will leave the Prosperly website and be directed to an external website. The privacy policies of the external website may differ from our privacy policies. Please review the privacy policies and security indicators displayed on the external website before providing any personal information.