Eu me deparei com um projeto bastante grande escrito em React + Typescript.
Cavado no código. Tudo é legal, contêineres, componentes, tipos estão por toda parte, o linter é configurado, componentes estilizados, até mesmo o livro de histórias tem uma certa pergunta de reação.
Bem, apenas felicidade, não um projeto!
Sento-me para fazer uma tarefa simples - montar uma página de componentes.
Eu escrevo em código, mas ... e o IDE me oferece 16 componentes de botão.
Bliiin ...
Ok, recebi componente / botão dos componentes (zs, ele é o único lá)
Próximo Inp ... bem, essa é a ideia. 23 peças dessas entradas ao longo do projeto.
Ok, eu acho, abrindo o livro de histórias, resolvi copiar tudo daí. E existem apenas componentes simples, como botões, H1, H3. E nenhum componente com um estado para você - nenhum molde, nenhum sinal com valores.
Não há limite para minha felicidade.
Eu cavo mais longe. Acontece que os containers não contêm apenas containers ( na verdade, eu sempre tive uma dúvida sobre esta palavra, eu gosto do nome da página ou subpágina / seção ), mas também os componentes diretamente relacionados a esta página.
De acordo com os clássicos do gênero, nem tudo foi retirado em componentes reutilizáveis, e 4 a 5 grandes componentes foram simplesmente copiados em diferentes containers (container folders) onde são usados.
, .
– (...)
C , . , .
. . , ?
.
, , , , .
« Front End-» ( -).
:
1) //// !
2) “// TODO:ID description” (ID 1)
3) , TODO
?
, TODO- 2-3 , ( 1-2 ).
TODO :
-, , ( CTRL + SHIFT + F // TODO:ID, - , 23 )
-, -. TODO , – .
, "TODO - " . , – technical debt.
.
1.
Linear ( ):
, . , .
, :
Add stories – storybook stories .
Move components into components – (reusable) . .
2.
styled-component- ( )
// TODO , ( ).
, …
TODO?
.
containers.
Linear. ID.
,
Windows + V ( – , , )
, TODO Windows + V .
, , .
. (Ctrl + Shift + V).
,
`const Button =`
`// TODO: TFR-45:Button…
const Button =`
!
3.
.
TFR-44 TFR-45 TODO ID - . - , .
, , , ?
. 16 Button 23 Input node.js .
:
1. “// TODO ID…“ “};” “Folder( )+ComponentName”.
styled-component
2. , . .
, .
3. - – , , , ..
: https://github.com/DrBoria/component-mover
styled-components.
«};».
.
– , // TODO end , “// TODO ID…“ “// TODO end”.
, .
- , .
– 1 .
.. – ? ?
.
( ).
!
, .
TODO- .
, .
1) . .
2) , ( - )
3) ( , )
Como meu pai diz - algumas vantagens, como um cemitério.