loadGoogleMaps is a small React component which loads Google Maps in a manner more consistent with the React ecosystem. I used a few different npm packages prior to this and they seemed to be overly complex.
Instead of hardcoding the Google Maps url into our index.html file, we set our API key somewhere in our app ( in a constants file, perhaps ) and pass that value to the loadGoogleMaps function, along with an array of Google Maps libraries we want to load.
Call it when our application mounts for the first time:
And presto! You’re all set to start using Google Maps in your React app. Currently available as a Gist here and you’ll need to install the little-loader and query-string packages manually but I might refactor into an actual npm package at some point.
Someone recently asked me if there was a way to generate React components. While there are plenty of generators to create full React projects (such as using Yeoman or create-react-app), there aren’t any tools (that I’m aware of) for quickly building out a new, blank component.
This inspired my curiosity, so I spent the better part of an afternoon building out a Node CLI app to quickly generate components. The tool, react-gc, accepts one argument, the component name, but also has flags for additional options, including specifying the directory path ( if you don’t want to create the component in the current directory ), specifying whether the component is basic or stateful, and including the Redux function mapStateToProps and mapDispatchToProps.
I originally built the CLI using more of the Node fs-extra API for reading, writing, and copying files using Promises instead of callbacks, but it seemed to be throwing a lot of errors. Aside from that, building the templates as strings in a JS file and exporting them to the CLI made it much easier to manipulate how the templates are built.
MusicGearShareis a Craig’s List style application where users can sign up and share their music equipment with each other, including anything ranging from instruments, accessories, sound equipment, and more. After signing up, users can search gear thats available to rent and messages each other to coordinate sharing and renting.
In this post I’ll do a deep dive into how and why I refactored each feature.