The logic of small parts of the application. How to do?

Question

React

I'm watching a course on building an application. The author makes, for example, the functionality of likes. When you click on like, an element is added to your favorite. Shows how to write code. It is clear that he knows how to do it and the architecture of this element is easy for him to repeat (he was preparing). But how is this done in practice?

For example. There is a product card and a heart next to it. We click on the heart - the element gets into the list of likes. We wring out the heart - it leaves this element.

How to think about the data structure, what functions are needed, etc. Tell me please! Can this be somehow visualized on a sheet, in a program? Or does it only come with experience?

Answer 1

You can stupidly copy examples of component frameworks like Vue before you understand what you are doing. It and similar ones already have a structure that is well visualized in the documentation.
Otherwise, the structure is made by the developer, a group of developers, or uses generally accepted patterns.

Answer 2

More theory . And practices to understand how to apply theory. For example, some kind of project. Which you will not just do for show, but something that you will constantly support and develop. Then, you will almost certainly have to, as the project develops, rewrite its architecture several times, as over time you will better understand what is more suitable.

Answer 3

Well, I would recommend the book "Algorithms and Data Structures" (C) by Niklaus Wirth . If you know typical data structures, then the choice of data structure is almost automatic. And further - data structures dictate work algorithms.

Answer 4

Initially, build 2 types of circuits.
1. Connections of logical blocks (the highest level of the architecture).
2. For each block and object - build a state diagram. This is a table in the form of a flowchart: from left to bottom - all actions for the business algorithm when processing data, from top to right - objects (functional blocks / entities, etc.).
After that, using the correct design patterns, assemble the puzzle from step 2 to step 1 and get a complete architecture with all possible states (there will be a lot of schemes according to step 2, this is normal).