Inspiration for the New Year: React and Tailwind

I've been so focused on my work as a backend dev for the last couple years that I hadn't taken the time to explore the latest and greatests of the frontend ecosystem. Over the holidays, I was finally inspired to dive into React and Tailwind CSS and I'm really glad I did!

One of the mini projects I made as practice is this Random Inspiration Generator. I hope it can help you find some inspiration for the new year!

The React app itself here is very simple and minimal, where I had the most fun with this app was learning about Tailwind CSS.

Tailwind CSS is a CSS framework with a ton of utility classes that allows you to style your app right in the markup. You can also use it to compose custom styles in CSS.

I remember when I first looked at Tailwind, I was immediately intimidated by the copious amounts of utility classes. I couldn't wrap my brain around how I was supposed to know what classes existed and what classes to use, but once I broke the seal and dove into it, it became pretty intuitive and the docs are well written. I was able to style this mini inspiration app in just minutes! Okay, maybe a bit longer cause I was going back and forth to the docs, but the important part was I didn't have to spend any time coming up with my own class or selector names or organize my CSS or do any pixel pushing. It was really easy to come up with a polished look with just their built-in utility classes, I didn't have to write any custom CSS, but I like that I can if I needed to. I am definitely sold on Tailwind now and will be using it for my personal projects.

For React, I, of course, started with the classic to-do app to learn some of the basic functionality. At first, thinking in small components was a bit of a challenge. I wasn't sure how to capture or propagate certain events while also encapsulating things within a component. But after learning about passing functions in props and using React Hooks, I started really enjoying the ease and simplicity of React. In fact, using React Hooks and passing functions as props allowed me to make my functions so short and organize my code in a way that I almost felt like I was writing Ruby and Rails code. Now I can't imagine not thinking in components, I can't imagine not using React and organizing my Javascript in any other way. I talked my non-web developer partner's ear off about how awesome React is over dinner and she told me I was in NRE (new relationship energy) with React. I think I am in love with React. 😍

I'm used to focusing more on the code that I need for my job, but I am glad I tried something new this year. I am really looking forward to diving deeper and building more with React and Tailwind. I hope this inspires you to try something new too, and don't forget, open yourself to the impression left by thousands of butterflies. 🦋 Happy New Year y'all!