Me encontré con un proyecto bastante grande escrito en React + Typecript.
Cavado en el código. Todo es genial, los contenedores, los componentes, los tipos están en todas partes, el linter está configurado, los componentes con estilo, incluso el libro de cuentos tiene una cierta react-query.
Bueno, ¡solo felicidad, no un proyecto!
Me siento para hacer una tarea simple: ensamblar una página a partir de componentes.
Escribo en código Pero ... y el IDE me ofrece componentes de 16 botones.
Bliiin ...
De acuerdo, obtuve el componente / Botón de los componentes (es el único que está allí)
Siguiente Inp ... bueno, ya entiendes la idea. 23 piezas de estos aportes a lo largo del proyecto.
Está bien, creo, al abrir el libro de cuentos, decidí copiar todo de allí. Y solo hay componentes simples, como botones, H1, H3. Y sin componentes con un estado para ti, sin moldes, sin letreros con valores.
No hay límite para mi felicidad.
Profundizo más. Resulta que los contenedores contienen no solo contenedores ( de hecho, siempre tuve una pregunta sobre esta palabra, prefiero la página de nombre o la subpágina / sección ), sino también los componentes directamente relacionados con esta página.
Según los clásicos del género, no todo se sacaba en componentes reutilizables, y simplemente se copiaban 4-5 componentes grandes en distintos contenedores (carpetas contenedoras) donde se utilizan.
, .
– (...)
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 dice mi padre, algunas ventajas, como un cementerio.