App Development from Zero Knowledge with AI – 1000 Hours #3

The Wall Called React and the Trap of Dates

This is the story of how I struggled to display “the current date” and “how many days since I started using the app” using React. A single mistake in how you write the code can make everything disappear. The structure inside return, the etiquette of Hooks like useState and useEffect, and the shape of the HTML—all of it was a mystery at first. I kept wondering, “Why isn’t this working?” But little by little, it started to make sense. When the data finally displayed properly, I was genuinely moved. It made me realize that if you tackle things one by one, app development really is manageable.

“Why isn’t this showing up?”
That day, I spent from morning to night muttering to myself, trying to solve the issue. All I wanted was something simple: display today’s date and the number of days since the user started the app. That’s it… or so I thought.

At first, AI told me I could do it using useState and useEffect. So I gave it a try:

const [currentDate, setCurrentDate] = useState(new Date());
const [daysSinceStart, setDaysSinceStart] = useState(0);

Then, I calculated the number of days in useEffect and updated setDaysSinceStart. So far, so good.

But when I tried to display it in the return with <p>{daysSinceStart}</p>, the screen went completely blank.

“Whyyyyy!?”

No matter how many times I rebuilt, no errors appeared—but nothing would show up. That was the start of a long war with the div tags.

---

JSX Is Not Friendly

In React, it turns out you can’t place “multiple elements” side by side inside the return. If you try to write two <div> elements next to each other, you’ll get this error:

Adjacent JSX elements must be wrapped in an enclosing tag.

In other words, “wrap everything in a single container.” Once I wrapped the whole block in <> </>, it finally appeared.

---

Why CSS Stopped Working

Then came another issue—CSS stopped applying. Transparent backgrounds, text alignment—all ignored. “Why!?” I thought. The cause? A forgotten closing tag on a div. I had tried to return a broken HTML structure. Who would’ve thought that a single missing line could break the entire design?

---

Date Formatting Needed Extra Care

With currentDate.toLocaleDateString(), the output looks like “2024/5/6”. But I wanted “2024/05/06” with two-digit formatting, so I created a format function:

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}/${month}/${day}`;
};

And finally, the text “2024/11/17 + ○ days” appeared on screen.

“Yesssss! It finally showed up!!”

---

A Small but Meaningful Step

Date display might seem like a tiny, irrelevant detail to most people. But for someone building an app, it’s a powerful way to show “you’ve been consistent.” That one line of code can feel like a mark of real personal growth.

---

Takeaways

• React’s return requires specific structure rules
• useState and useEffect are at the heart of React
• If CSS isn’t working, check for broken HTML
• Even with AI, you still have to test things yourself, over and over

There’s still a long road ahead—but today, I took another step forward. App development really is a process of small wins.