ReactJS Is Facebook Sorcery

ReactJS. Where do I even begin? From 10,000ft it appears to make sense and seems relatively simple. The issues pop up when you dive in for a little closer of a look. It’s some strange amalgamation of JavaScript, HTML and something called JSX  dreamed up by the wizards at Facebook that is only slightly more sensical than the ramblings of a homeless person on an angel dust bender. It somehow allows for the use of HTML tags outside of a .html file, which up until about three days ago I didn’t think was possible. And yet here we are.

The big picture makes some sense. It allows for re-rendering of only the parts of the page that have changed. (Yay for conserving resources!) This is accomplished by writing the code in a modular style which has the knock on effects of making the main program more readable and makes the chunks of code easily reusable.

Seems simple enough right? Well it’s not. It’s really, really not.

The nuts and bolts of it appear pretty straightforward, we start by creating a COMPONENT directory and then create individual files within the aforementioned COMPONENT. Within those individual files we write our code which can execute whatever tasks our feeble little minds can dream up and write. So far, so good. The individual components of React can be defined either with a standard, everyday JS function or with an ES6 class.

This is where things start getting slippery. The ES6 class is the preferred method for defining React components because we can access ‘this’ and lifecycle methods. The ‘this’ method simply refers back to whatever scope we’re in. Pretty standard JavaScript stuff in 2018. What is a lifecycle method? I have no idea. I think it has something to do with the tides or whether Mercury is in retrograde or something? Scott Domes over at Musefind describes the lifecycle as “the life of a React component, from birth (pre-mounting) and death (unmounting)“. Which is…not super helpful since I don’t know what pre-mounting or unmounting are. I’m pretty confident in saying they are opposite sides of the same coin but beyond that I got nothing. (Also I think that it should probably be “from birth to death” but whatever, I’ve got way bigger fish to fry than Scott’s grammar.) Luckily we have this handy graphic:

….which helps our understanding? I guess? I mean I know what some of those words mean so thats a pretty good. Right? Right?! RIGHT?!!?!?!!?!

I don’t know what kind of hippy, communist witchcraft Facebook is trying to push on all of us good, wholesome, God-fearing, capitalism loving web developers with this devil ReactJS but I don’t like it.

Leave a comment