How I learned Deploying React Router App to Gh-pages
About me
I am a fullstack software developer with a mission towards building a better world for Nigerian youths through Education, Programming and Technology. I specialise in building web apps with javascript technologies such as react, angular , node; be it front end, UI/UX or backend Application, am always eager to engage myself. I've trained myself to provide value in any team or community i find myself. At my spare time i play basketball or video games.
Why I wanted to learn Deploying React Router App to Gh-pages
I love react because of the ease it gives me in manipulating the DOM and its separation of concern as opposed to jquery. Ever since i got the hook of how it worked with redux i have been sold but i learnt this by building both the server and the client as a single app till i just a dev team in my company working on a mentorship project for the company. I was sold on how we built the front end(Angular) and the backend end (Lumen) separately and was able to connect both. This made me to research on how this work with react and then i came acrosscreate react app.
How I approached learning Deploying React Router App to Gh-pages
Working with create react app was quite a breeze as opposed to bootstrapping react from scratch and i want to see if i could build a quick app wit firebase. So i watch a few tutorial on how to configure firebase. I applied this to my checkin application and was able to build an application authenticated users and allowed them to choose an employee they wanted to see and write a reason for the visit.
Challenges I faced
This was a very simple app but gave me some headaches because i need to add react router and protect some routes from unregistered users and it became a problem because react router 4 was different from version i used and writing a higher order function was kinder tricky. I was able to solve this issue but was met again by another issue with react router when i deployed to gh-pages. this took me some research till i found out that BrowserRouter had issues gh-pages due to gp-pages thinks of your app as a single page app and requires just one route loading more route wont work because of the way it configured so i had to pass a props called basename="/name of the repo" to the BrowserRouter tag to solve this issue.
Key takeaways
I learnt read some info on the doc of every framework or library before i used them. The solution to my problem was in the documentation or would a pointer and i didn't notice till i spent 2 days surfing the web.
Tips and advice
For those who want to be web developers or programmers in general note this, always build something on your own cause watching tutorial would help build something yourself give you experience and mastery
Final thoughts and next steps
Well looking forward to working with graphql next, can't wait to share my experience with you.
