I recently wanted to set the background color of an HTML element based on the element’s text color. I wanted to use the text color to dictate the background color to ensure there was enough contrast between the two. In order to dynamically decide the background color based on the text color, I needed to access the RGB color code of the element.
In JavaScript, you have the ability to call a function, or use a variable, before it’s declared. This concept is called hoisting, and it sounds like magic, right? Well, maybe at first, but understanding how JavaScript code is executed will help to demystify this concept.
React encourages the use of the latest JavaScript syntax to allow developers to take advantage of the newest syntactic sugar. However, not all browsers are compatible with ECMAScript 2015+. This compatibility issue is solved via Babel.
Styling a React application, or any application for that matter, can get messy quickly if you don’t have a solid system for incorporating CSS. There are many options for styling React apps, and the preferred option varies amongst developers and companies. Recently, I decided to implement a popular option called styled-components in one of my side projects. I am going to walk through the benefits of using styled-components with React.
Programming is a matter of objects when using many popular languages, such as Java, Python, and Ruby. If you are thinking, “Hold up! Programming is way more complex than ‘just a bunch of objects!’” I agree with you. However, understanding object-oriented design patterns is a key to producing code that is more adaptive to change, DRY, reusable, and, in many ways, less complex.