Day 36 — Move B….

liner notes:

  • What a weekend. Let’s start on Friday. We got our weekend assignment, build a photo gallery in ReactJS and implement Routing which we just learned. Got it. Created my starter app with ReactJS (which is SUPER simple), formatted my layout using MaterializeCSS and got my hardcoded photos to work. Great. I was even thinking I could incorporate authentication since I wanted to use Firebase anyways. There would even be time during the weekend to implement some of the services Cloudinary offers.
  • That’s what I thought……haha Before leaving to start my weekend, I decided to start working on the router, cause it be something real quick , right? Nope. For some reason, when I would route to another state, it would lose the material box (light box) and modal box functionalities. I thought that maybe I missed something and would be a simple fix in the morning before the radio show.
  • Wrong again. haha Saturday morning…. I searched everywhere for an answer. The problem was that I wasn’t getting an error in the Console so I didn’t have anything specific I could search for. Then apparently, the router we are using is pretty new so a lot of the things I would find would refer to the older versions. Since it was the MaterializeCSS components that also used jQuery that weren’t working properly, I npm installed jQuery..Nope. Maybe it was something behind the scenes between MaterializeCSS and ReactJS. I installed a MaterializeCSS x ReactJS from GitHub…Nada
  • Then it was time for the radio show.

You can listen to it here: kNOwBETTERHIPHOP.com ( I created it with Angular, by the way)

  • So after taking a break to do my show, I got back right into coding. I determined that it wasn’t jQuery, ReactJS or MaterializeCSS…it had to be something with the ReactJS router. Long story, longer at 5am Sunday morning I got it to work. For some reason, when the router goes to another route, it wasn’t initializing MaterializeCSS so that it would work properly. Note to future self if this happens again, <Router forceRefresh={true}/>
  • Finally got it figured out, so it’s all cake from here on out. Strike 3. Apparently, I’m not exactly sure, but it looks like the forceRefresh interferes with the state, because I couldn’t get the code to function the way it was before. It seems like everything I tried, ReactJS would just in the way with some random error…All of Sunday, this song kept running through my mind:
  • Considering this is only the 2 second project I’ve ever done in ReactJS, it’s not so bad. A bunch of us did meet up at Starbucks worked on assignment. That helped. In conclusion, I was able to get most of it working again, but what’s even more important is that I have specific questions, I can ask Brian (the Instructor).

We’re starting week 8. Looks like we’ll be learning Firebase (which I’m a big fan of) and Redux.

Got some reading to do to prepare. Have a great day.

peace piece
Dwane / conshus
HIPHOPandCODE.com <- ReactJS remake coming soon. hopefully