I think we've all said it: "This will be super fast." That was definitely the plan for this rebuild. One day, tops. Spoiler alert: that's not how it's going.
I've hit a couple of rookie mistakes that are slowing me down, but they're teaching me something important about working with the right tool for the job:
- Treating React like vanilla JS
- Hard-coding HTML and Tailwind
Treating React Like Vanilla JS
When I started this rebuild, I didn't plan thoroughly enough. I figured, I know React and I know this project. This will be a simple rebuild. But then I just started copying what I did in the original vanilla JS version, which entirely misses the point of the exercise.
I've been dividing the HTML into components without actually thinking in components. That's an absolute rookie mistake. Instead of leveraging React's strengths, I'm just making it feel like more work than a simple vanilla stack.
Hard-coding HTML with Tailwind
This is where the pain point really showed up. I don't think I would have noticed my mistakes as quickly if I wasn't using Tailwind.
I was struggling to get momentum because there are a lot of repeated elements. The game grid alone has 5 rows, each with 4 boxes and 4 pegs, all styled as individual divs. At first, I started thinking Tailwind was the problem, that it wasn't a good fit for a project like this. Again, I was thinking in vanilla JS, not React.
But this got me thinking about what I was actually doing wrong and how I could pivot my approach. As I considered moving to a different CSS library and what that refactor would look like, I realized Tailwind wasn't the problem. It was just pointing out that I wasn't writing DRY code.
The Reset
So, as I start the build again, I'm focusing on not repeating myself. Specifically, I'm thinking about component architecture and data mapping instead of hard-coding repeated elements in my JSX. Sometimes the fastest path forward is admitting you need to back up and do it right.
Top comments (1)
thank