I don’t know about the rest of the World, but I ABSOLUTELY LOVE LO-FI beats! Whenever I don’t know what kind of music I’m in the mood for, majority of the time that I’m going through School material, it’s my go-to. Just going onto Youtube and chilling out to the serene basic motion backgrounds is my happy place. I’ve also been DJing for a long time so I thought, what the heck, let’s make our own videos based off this.

In came the idea for my React-Redux Mood Room project. I have a very “I can do it myself mindset so I decided to bypass using the Youtube API and instead created a few of my own mixes with motion backgrounds. Making mixes are like second nature so I was definitely in my zone with this project. I decided to expand from Lo-fi beats and just created what I would want to listen to depending on how I felt.

For this post, I really want to drool over React. Coming from a JavaScript project, React really touched my heart. Right out of the gate it really gives you the organization that makes your application feel…well, like it makes sense. This post will not go into detail on the initial setup of a React app, but will instead provide a base idea of the Component feature.

The main thing that aides in React’s organization is the use of Components. Components exist to help you break down multiple sections of your web application into smaller parts. This helps you stick to the Single Responsibility Principle without even trying.

A simple breakdown of a webpage might look something like this;

Here, you see we have a Navbar, MainContent, Sidebar and Footer. All of these will eventually make up four separate components. To maintain even more organization within our code, we’ll hold these files in a folder called ‘Components’ and place that inside of our ‘src’ folder that create-react-app has given us.

Still not making much sense?

Let’s think about the dreaded day known as, Laundry Day. You washed and dried your clothes but now it’s time to fold them. You could leave them on your bed in a huge pile and ‘accidentally’ fall asleep on them,(no judging here), or, you could organize your pile into smaller categories and get to work. You put all the shirts together, bottoms, undies and socks (the ones you still have), in their respective piles. It’s already looking much nicer in here, isn’t it? Then you begin to fold and place the clothes into drawers, closets and anywhere else they may go. One by one, you can visually see each area come together and your bed start to free up from clutter.

Well, that’s exactly how Components in React work. They allow us to split our UI into independent and reusable pieces. From there, were are able to think about each piece in isolation. Instead of crowding our application up with a big pile of code that has multiple purposes, we lessen the burden on ourselves and break these pieces into components. Who doesn’t like clean code?