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!
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:
- 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.
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!