Things that nobody tells you but you somehow have to learn: the steps/how-to to code your app.
With a frontend app, you have a combination of HTML, CSS, and Javascript and you have to address them all. You have to write at least some HTML and write Javascript to interact with the DOM.
That’s surprisingly error-prone for a newbie.
Even a simple app has several moving parts. And nowadays, with tools like React you combine HTML, CSS, and Javascript into the “View” (the part where you tell the program how things should look like and it will then render it to the user).
So, normally, you don’t write HTML first and then Javascript second - you do them both at the same time.
HTML and CSS often startle me when I write HTML-in-Javascript (JSX or Hyperscript).
And so it becomes a convoluted mess when I try to create logic and the view functions at the same time.
What I painfully realized a few days ago, is that I don’t have a good process with creating the structure of my app.
My idea for the future is to be very clear on what the model (state) for the app is. The model change during the process when I realize that the state needs to hold more information (for example a showForm property to toggle a form view).
With React his can become fuzzy because you can hold this information in state or in props.
Then it helps to tackle the UI (HTML or JSX/Hyperscript) and the logic behind it - step by step. I made the mistake of trying to address it all. But it’s better to create a very small component (a button, or a form). And go back and forth to code the logic for it (click events, etc.).
It’s a work in progress to find the right system for me that is as error-free as I can get.
I have to remember to do everything slowly instead of trying to do it all. Separate all tasks into little snippets and be clear about what each snippet has to do.