Becoming A React Developer

Becoming a React Developer (or any Developer really) just means knocking your head against problem after problem without the smothering guidance of a tutorial. Just pick a set of requirements for a small project and do it. Keep adding to it and solving more things and eventually get to a point where you can actually create something tangible. And then improve it!

This is my unfiltered journey/ method of madness to becoming a developer. This may not be the best fit for everybody, but I learn best from just failing miserably a hundred times over. So here is a documented accounts of my faux pas!

My Daily Process!

So here are my requirements: Create a web app that decides where I eat lunch.

1. The app needs to find my current location.
2. Then do a search of restaurants near me.
3. And lastly pick a random restaurant and provide me with the name and location.

Currently, I have a react app setup with Next.Js. You don’t have to use Next.Js, I personally prefer it for this use case. It simplifies the setup process for getting react installed and running, and (my personal favorite) simplifies routing. Plus their documentation is pretty spot on.

I have two pages (views technically, but using Next Js terminology): index.jsx and food.jsx. The index page has the button that triggers the geolocation. Using the HTML5 geolocation and Next.Js route I can add my location values as params to the url of the food page. Using the concepts of react lifecycle, I have a componentDidMount that then uses the url params to send a HttpGETRequest to the Google Places Library for restaurants within 1500 meter radius of my location. And, this is where I have stumbled…

Oh how foolishly I have stumbled. I kept hitting a CORS Error when trying to do HttpRequest which had me cursing like a…hipster jacked on way too much coffee.

This here article/issue sums it up. Basically from the browser side I can use the Google Maps Javascript API to render a map, but not the other cooler stuff like the Places Library. I need to be making a server side request for that.

I have two options:

1. Switch out what I have now to use the Google Maps Javascript API and then filter my results down to one option and figure out a way to just get content inside the infowindow…or
2. Add a teeny tiny bit of Node Js to do my GET Request.

Being the stubborn being I am…gonna go with Option 2 first…

Step 2: Add node?