May 10, 2020

A few days ago, I managed to create a React element that was displayed on the page. I used the sample code from Add React to a Website and managed to render a simple like button to the page. After altering a few elements on the page and moving the React node that housed the element, the element disappeared, and I'm at pains to figure out why. After tinkering wth and prodding the dive tags and references, I turned to Google for help, and came across the whole concept of the dynamic and lazy loading of JavaScript files. That's taken me down an interesting rabbit hole, to put it lightly.

While this seemed like it might lead me in the right direction, it hasn't alleviated the issue I've been having which is this: the React element will render appropriately when its corresponding node is at the top of the page, but not when it is at the bottom. And I do not understand why.

After more tinkering with the React element, in which I removed a variable declaration and placed its reference into the render object directly, I was able to make the React element appear on the page, which is the "like" button below. Why this would make a difference, I have no idea. Whether an item is called directly or referenced via variable shouldn't matter.

Well, the damn thing works now. I don't know if this actually gets me any closer to understanding React. I do know, however, that div elements should have unique ids if you're going to refer to them by id. Which makes me wonder how I'll place one React element in multiple nodes if I ever feel the need to. So much more to learn. I am enjoying this process though. I'm learning bits of HTML and CSS in the process.

Comments? Questions? Follow me on twitter and drop me a line in response to this tweet:

Day 023: learned about dynamic and lazy loading of files, document.getElementById(), and the fuckery that is #React that left me in some confusion.https://t.co/jblD98YErQ#nonsensemod365 #thatCodingLife pic.twitter.com/IKKy4vN3HF

— Joshua Alexander (@nonsensecodes) May 10, 2020