In my final project, I was required to create at least three routes and I exceeded that with seven. I utilized react router to create and navigate to these various routes in my application. The routing library proved to be intuitively easy to implement and absolutely imperative in creating a seamlessly navigational user experience, but by the same token, it was definitely a struggle to fully understand. Just when I thought I understood it, it turns out I fundamentally didn’t. I learned through the words of Brad Westfall—who wrote this very useful article on react router by the way—that strategic placement was the name-of-the-game when it came to clearing up misunderstanding of react router as it concretely taught me what I was exactly doing wrong and why my routes weren’t working. Throughtout this blog post, I will be breaking down and explaining all the navigational components I composed to build my snappy single-page application. Also note that, in order for these components (or react router for that matter) to work, you’ll need to place <BrowserRouter> at the root of the application. What <BrowserRouter> does is it allows react router to pass the app’s routing information down to any child component it needs (via context). I will be illustrating just how powerfully illuminating strategic placement is with code examples from my project. Before I delve into it though, I would like to make sure we are on the same page about what the most basic yet essential <Route> component does, which is according to the official react router doc: “render some UI when its path matches the current URL”. Good? good. Let’s begin.
As I promised in my final project blog post, I will go into greater detail on how to properly consume the yelp fusion api for your final react/redux project here. Let me start from the beginning of how I approached it, work my way to all the pain points that I encountered, and show you my final solution.
My react/redux final project is my magnum opus, crème de la crème, or in plain english: my best work yet. I am immensely proud yet so burnt out by it, but oddly inspired by the prospect of adding more stretch features to it. Since the amount I have learned from this project is astoundingly unprecedented, I may not be able to cover every aspect of it in full detail, so I’m just going to expand on certain things in a separate blog post if it warrants one. In the meantime, I’m going to try my best to briefly touch on everything I have learned and struggled with.
I built an online, minimal note-taking app called “Jot” for my Rails API w/ Javascript project. This project was both a huge learning experience and struggle for me, one filled with many trials and tribulations, burnouts, rabbit holes, and tangents. But before I delve into it, I would like to preface that I originally transferred from the in-person program, so the requirements I followed for the project are slightly different from the online one in that I had to create a Rails API backend with no user authentication/passwords. Also, instead of just adding Javascript on top of an existing Rails app, I essentially had to build out the frontend and backend from scratch and have them communicate with each other via requests and responses.