How to design components correctly?

Question

JavaScript

Tired of rewriting the code several times during development, so I wanted to learn how to design / plan first, and then implement. That's what I mean by this.
Let's say I have a custom select component. I start doing it and at the entrance of the work I remember that after all, in native selects, you can click the up / down arrows and the value changes. I'm starting to add this to the code, rewriting something. Etc. How would you like to?
I would like to understand in advance what variables I may need (for example, the current value of the select, the value of the option in focus), what methods may come in handy, and in general how it should work. And write the code already looking at what happened. Something draws me to finite automata, but I have not tried it yet.
Who solves this problem, who uses what tools?

Answer 1

>I'm tired of rewriting the code during development several times.
Welcome to the party.
>I wanted to learn how to design / plan first, and then implement
This is a myth. There are legends that one programmer was able to do this, but the knowledge of HOW he did it is lost for centuries.
There will always be modifications. Even the clearest and most detailed TOR eventually changes.
You can make all sorts of mindmaps to somehow imagine the entire development process. But I don't like them.
----
It is because of this problem that all sorts of Agile / SCRUM and other approaches to development were invented.

Answer 2

The Russian-speaking community is also notable for the fact that it generates mind-boggling questions. Which cannot be adequately assessed - you can only delete (complain) and wait for the next same question.
It will never be perfect the first time. And you always need to try and look for ways to optimize. If you are interested in how to build an optimal process in a particular environment, then ask a question. In general, there is no silver bullet.
TDD means test, code, refactor. That is, "code rewriting" is already in the definition. And in the same way, no matter how many times you return to the code in time, you will always dislike something and there will be a desire to rewrite - this is normal.
In general, the post reeks of maximalism and premature optimization.

Answer 3

To plan, you need to do only 2 things:
1. Study the subject. What's the point of making a custom select at all if you haven't read the spec, learned mdn, etc. and do not fully know how the original works.
2. Make a list of features that need to be supported. And this is a TODO list. Special services like https://trello.com/ will help you with this.