TypeScript (React) programming with Claude Code

This time, it’s not really programming per se, but we are using React as a front-end development tool for IRIS. When using a web development framework—not limited to React—one key consideration is which CSS framework to use. Up until now, we’ve been using Bootstrap, which is the standard and the easiest to get started with.

However, while it’s easy to use, I felt that it offers limited flexibility for customization. That said, even if we were to switch to another CSS framework, learning it and rewriting everything from scratch would be a significant effort, so we left things as they were. 

This time, having acquired the powerful tool called Claude Code, I tried asking it to convert Bootstrap to Materialize. The result: the modifications were completed in one go. It was all done in less than five minutes, including verification. If I had studied Materialize myself and implemented it, I think it would have taken at least two or three days.

Bootstrap screen

Materialize screen

Simply changing the stylesheet wouldn’t be very interesting, so I also asked for a fix to an issue I had noticed was a bug but had left unresolved.

The problem was that even after deleting data on the edit screen, it continued to appear in the list on the left side.

This was also easily resolved with a single request.

Here is the content of the fix request:

After pressing the delete button in ExpenseItem.tsx and deleting the corresponding record, update the list in ExpenseItemList.txt so that the deleted item is no longer included in the list.

Here is the response from Claude Code:

Since state management is handled in App.tsx, it is appropriate to update the list after deletion via App.tsx.
I will review the overall flow and make the necessary changes.
Read current App.tsxRead current App.tsxI have understood the structure.
I will add an onDeleteItem callback to App.tsx to remove the corresponding ID from the list, and pass it as a prop to ExpenseItem.tsx.
Created 2 files,
Executed 2 commands,
Read filesCreated 2 files,
Executed 2 commands,
Read files
Updated two files: App.tsx and ExpenseItem.tsx.

Summary of changes:

App.tsx

Added an onDeleteItem callback using useCallback. It receives the deleted ID and filters it out from the list using setExpenseItemList.
Also clears the right pane display with setResponse("").

Passes onDeleteItem={onDeleteItem} as a prop to <ExpenseItem>.

ExpenseItem.tsx

Receives onDeleteItem via props.
Within the .then() block after a successful delete API call, calls onDeleteItem(response.id) to trigger the list update in App.tsx.

With this, when the delete button is pressed and the API call succeeds, the flow becomes:
alert is displayed → the corresponding item is immediately removed from the list in the left pane.