Interactive pricing component w/ (React + Styled Components) 👨‍💻

Community feedback

• 

  P

  Vander Santos•1,750

  @vandermsPosted almost 2 years ago

  Parabéns pela sua solução, Adriano! O seu aplicativo ficou muito legal.

  Quanto a sua pergunta sobre a organização dos arquivos, o fato é que React não é opinativo sobre isso, então o desenvolvedor tem muita liberdade sobre como organizar os arquivos. Eu, particularmente, gostei da forma que você organizou e achei superlegível.

  A parte isso, o principal problema na sua solução é que quando a gente trabalha com React - e outros frameworks e bibliotecas do mesmo tipo - a gente não pode manipular diretamente o DOM. Eu me refiro ao uso de getElementById, target.style.backgroundSize e innerText na sua função handleChangeInput.

  Há várias razões para não se fazer isso e isso pode trazer várias dores de cabeça. Por exemplo, se a aplicação fosse maior e, por alguma razão, houvesse um repaint do seu component <Pricing/> todos os dados inseridos pelo usuário seriam perdidos (isso ocorreria porque os dados alterados pelo innerText não estariam sincronizados com os dados do virtual DOM do React).

  O uso de id também é altamente NÃO recomendável, uma vez que isso prejudica a reusabilidade dos componentes. Por exemplo, se você tentasse reutilizar o component <Pricing/> em outro lugar do aplicativo, a página ficaria com duplicidade de ids.

  Sobre o tema, de um modo geral, em React, o gerenciamento de estado e a sincronização do estado da aplicação com a interface devem ser realizados com hooks - geralmente useState e, em menor grau, useReducer, associados, ou não, a useContext.

  Por fim, um detalhe menor: há uma forma mais prática de usar React.Fragment, isto é, ao invés de importar o Fragment e usar <Fragment>...</Fragment>, você poderia ter usado simplesmente <>..... vide https://pt-br.reactjs.org/docs/fragments.html#short-syntax

  Marked as helpful

  1

  ---

  

  Adriano•38,250

  @AdrianoEscarabotePosted almost 2 years ago

  @vanderms Muito obrigado Vander, os seus comentários sempre me ajudam muito!

  Próximo projeto colocarei em prática tudo que você disse!

  0