Review and re-tool
- Rachel Sleet
- Apr 16, 2019
- 2 min read
Today felt like a mini-breakthrough in an otherwise dry spell in my current project.
I've tasked myself with building a website that offers the basic functionalities required by a close friend of mine for her book club. It's the first website I'm trying to build with React, with users and with some kind of data storage. Following some (brief) research and some (biased) friendly advice, I decided Firebase was a good choice for getting the thing up and running without too many tears.
And it was going very well! I quickly found Robin Wieruch's very very helpful and informative guide on the exact topic and worked through this step by step. Problem was, his tutorial was almost too helpful. As soon as it finished, I had a lot of lovely code and lovely files (this will make a nice boilerplate for future projects too) but really no idea how to move forward.
By this point, I had made use of the React Router API for some nice navigation, the Firebase API for sign in/out and creating new users and finally the React Context API for some tracking of authorization. I realised I needed to take a step back and watch some tutorials to get a real feel for what each of these were really doing and how my project was taking advantage of their features.
Here's what I used to get that context:
https://www.youtube.com/watch?v=r4EsP6rovwk - Dave Bennett
Watching these made me realise my current set up was not ideal for easily viewing my existing code/debugging. I downloaded two GREAT tools: React Dev Tools and Prettier.
React Dev Tools is a Chrome Extension that enables you to inspect your React components as they are rendered in the React Virtual DOM, just like you can HTML elements. It even displays the State and Props of each component! Way more useful than the illegible HTML it spits out otherwise.
Get set up: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Prettier has immediately increased my speed and coding enjoyment. In one of the vids I watched the guy did a quick Save on his file and the whole thing formatted - like MAGIC. It actually feels like a superpower.
I'm not a keyboard ninja who knows a million shortcuts and seamlessly formats code as I go. In fact, so far I've felt like a bit of a grandma trying to manually 'prettify' my code as I go. Goodbye grandma.
Get set up: I didn't actually find a helpful tutorial, I just downloaded the VSCode extension and fiddle with settings. Details can be shared if anyone is interested.
Summary is,
with some fresh materials and fresh tools,
my code began to unravel into something I not only understood,
but even made some further progress on
(almost entirely on my own this time).
Comments