(This post is not a thorough explanation of what React is or what it does, but there are tons of great such posts out there! This is just me talking a bit about why it appeals to me so greatly.)
During the third segment of my bootcamp, we learned how to make a site using JavaScript with DOM Manipulation. Our project for that segment ended up having some seriously gnarly functions with huge chains of commands to grab an element, create an element, append an element, etc. etc. etc.
I was excited with what I was able to make, but frustrated with this clunky method of doing this. As my partner and I worked on the project - our Bite Sized DnD App - I did my best to make the code as modular as possible. Obviously there are a lot of reasons that this is best practice, but most key for me was ease of navigation - or, translated, my sanity!
I love modular code. I would occasionally annoy my classmates during pair programming by insisting on creating modular code, even when we were just completing a short and simple exercise. I don't want to produce a scattershot mess, I want to arrange a puzzle.
So what makes modular code so great, and why do we do it? A few reasons. Here's a snippet from one of my lessons:
- Adhere to the single-responsiblity principle
- Each module is responsible for accomplishing a certain piece of functionality, or adding a specific feature to the application
- Easier to navigate
- Modules that are separated and clearly named make code more readable for other developers
- Easier to debug
- Bugs have less room to hide in isolated, contained code
- Produce clean and DRY code
- Modules can be reused and repurposed throughout applications
This all appeals so deeply to my literal and - god I hate this phrase - anal retentive brain (I'm a psych major, and, come on now psychology community, can we please replace Freud's terms. Please. He was an idiot.). If you're doing it well, you can plug modular pieces of code in over and over to craft something beautifully coherent and well structured.
And here's where I get to my point - React. Despite my best efforts at modular code during that project, we ended up with very long and unwieldy functions for generating pages.
Then, the next week, we had our first lesson introducing us to React. With the introduction of React Components, I was given a truly structural representation of modular code, and I was thrilled. I actually said out loud in class, "Oh that's so cool!" I briefly confused the instructor because he didn't know what I was referring to.
I can create a component, and know that it does X thing. I've made a square lego block, let's say. Then, whenever I need X thing done, I grab one of those square lego blocks, plug it into my structure where I need it, and voila! And yet, it's not so rigid that this block will be identical every time. I can pick a purple one, a red one, a green one. And depending where I put it, it may serve a completely different purpose. No matter where it goes it's square shaped and connects blocks together, but here it may be part of a door, there an archway, here an x-wing fighter.
These components (and containers, I'm being loose with my React vocab here) can be big or small, complex or simple. But one thing is for sure, they are so versatile!
I need one of these, and one of these, and one of those, and... voila! The picture comes together, oh so satisfyingly.
I know that there are other frameworks that work very similarly - Angular, VUE, etc., but I simply don't have exposure to them yet to know how they differ. So maybe I am just in love with front-end javascript frameworks, hah! Either way, it felt like a revelation at the time, and I figured it would be good for me to write about something in coding that makes me excited.
Top comments (0)