Brushing Up On CSS in React

This week I spent a lot of time reading up on CSS in React. React has been one of my weaker points throughout my learning of programming, but I am learning to love it. The customization options are endless, and being that I enjoy the creation of backend, and am passionate in that area, I need to really strap myself in and learn more of the front end side of it.

With this in mind, I started out with a few projects that I had designed while attending Flatiron School. My first was my Sinatra game directory, because of my familiarity with Ruby. I started tinkering with button styling, and coloring of different aspects. After starting to grasp that concept, I went into styling of my search bar and hyperlinks. It all went pretty smoothly for that portion of my learning, but then I started React…

Upon starting React, I learned that I really needed to brush up on my knowledge of that alone. I started re-reading my code, and cutting and repasting aspects of it to better understand it once again. After that, I pulled up the CSS React syntax on google, and found the w3schools guide on CSS in React. It seemed to be pretty straight forward, but that’s where I began seeing the error in my original code. My class names were very unorganized and any editing I did, had very unwanted changes.

This next week, I think I will start to go over all of my classes, and restructure them to be more fitting with individual styling. It may not be the most practical changes, but it will definitely be good practice for me. In my future apps I will definitely want them to be more uniform, but the class practice is worth its weight in gold for me. This is really showing me how effective proper naming and tagging is, and overall this small amount of learning has ended up being significantly more insightful than I imagined.