DEV Community

Cover image for Day 1 of #100DaysOfCode — React Refresher + Tailwind Setup
M Saad Ahmad
M Saad Ahmad

Posted on

Day 1 of #100DaysOfCode — React Refresher + Tailwind Setup

#100daysofcode #webdev #programming #react

Today marks the beginning of my 100 Days of Code journey. My goal with this challenge is to rebuild momentum, sharpen my foundations, and ultimately become a confident full-stack developer — someone who understands how software works inside and out and can code fluently in JavaScript, TypeScript, and Python. Even though I already know the prerequisites like HTML, CSS, JavaScript, and TailwindCSS, somehow, my learning progress stalled on React.js. I knew React.js well enough to build projects, but not deeply enough to use it professionally or to treat it as a launching pad for learning more advanced technologies. So today, I officially committed to starting fresh.

Project Setup — Vite + React + TailwindCSS

I began by setting up a new React project using Vite, which is now the recommended, faster alternative to CRA.

To create the project:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

followed the instructions to create react app

then navigated into the new project directory

cd your-project
Enter fullscreen mode Exit fullscreen mode

to install project dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

When installing TailwindCSS, I initially ran the older v3 commands and ran into errors — only to realize that TailwindCSS v4+ uses a different installation method. The correct setup was:

npm install tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode

Then I added Tailwind to vite.config.js as described in the official docs. After that, running npm run dev successfully launched the project.

React Refresher — useState, props, and event handlers

For today’s React refresher, I revisited some core concepts:

  • useState – I built a simple counter to practice state updates.
  • props – I moved the counter logic into a separate Counter.jsx component and passed data via props.
  • onClick handler – The counter buttons update the count (increment, decrement, reset).
  • onChange handler – I built a simple text-input component that displays real-time user input through e.target.value.

These small exercises reminded me why React is so powerful — the simplicity of state, the flexibility of components, and the straightforward event handling make building UI logic intuitive once you get the hang of it.

Closing Thoughts

Day 1 was all about taking a step back and rebuild my React foundation and getting my development environment properly set up. It felt great to restart with a clean slate and a deeper intention. Tomorrow, I’ll continue exploring core concepts and building mini-projects as I progress through the challenge. Excited to see where this journey leads!

Top comments (0)