10 dicas para criar seu código ReactJS como um PRO

Muitos de nós, desenvolvedores frontend, desenvolvedores js e também desenvolvedores de reação, trabalham em equipes que incluem desenvolvedores com diferentes níveis de habilidade. O melhor método para melhorar nosso código é a REVISÃO DO CÓDIGO DE BOA QUALIDADE - mas não para verificar se tudo parece funcionar, mas também como nossas faculdades obtiveram esse resultado -, portanto, temos que garantir um código limpo.

Por quê? Isso é simples - se sua equipe conta com até 5 pessoas, é fácil perguntar como funciona. Mas se sua equipe é enorme ou há muitas mudanças dinâmicas, esse código de boa qualidade ajuda a nós e a outros desenvolvedores a entendê-lo e, é claro, você pode se sentir um profissional; P

Tomei 10 melhores práticas, que ajudam a mim e minha equipe a melhorar a qualidade do código em nossos projetos React. Essas dicas geralmente são baseadas na funcionalidade do ES6, mas não as usamos sempre. Procure-os e sinta-se à vontade para usá-lo também !!

1. Componentes da Classe VS Componentes da Função

Todos nós estamos muito felizes, porque no ES6 foi implementado o suporte de classe - eu adoro! Ao reagir, podemos criar um componente estendendo uma classe simples chamada "React.Component". Lá, temos métodos simples de gerenciamento de estado, suporte a eventos de componentes etc. Às vezes, precisamos demais, mas sabemos que podemos usá-lo.

importar React, {Component} de 'react'
classe MyComponent estende o Componente {
  render () {
    retorne 

Olá {this.props.text}

  } }

Porém, no desenvolvimento de reações, muitos desenvolvedores esquecem como podemos criar um componente usando simplesmente o componente funcional, que pode ser uma função com um parâmetro - props.

importar Reagir de 'reagir'
const MyComponent = (props) => 

Olá {props.text}

Mas o uso desses dois componentes parece o mesmo!

Ok - então por que eu deveria usar componentes funcionais? Porque há muito mais leve do que a aula estendida. Lembre-se de que usamos o React e outra estrutura reativa porque pensamos no uso da memória - essas estruturas criam um DOM virtual sem adereços e métodos desnecessários para gerenciá-los com mais facilidade, rapidez e reserva de menos memória. Portanto, se pensarmos em otimização, precisamos pensar nessa diferença.

Ok - então quando poderíamos usar componentes de classe e quando componente funcional? As regras são muito fáceis - QUANDO VOCÊ PRECISA USAR ALGO QUE O COMPONENTE FUNCIONAL NÃO TEM - USE O COMPONENTE DA CLASSE!

Muito fácil? sim! Comece a escrever seus componentes a partir do esboço como componente funcional. Quando você perceber que precisa usar algo como estados ou detectar algumas alterações em seu componente - como componentWillMount () etc.) Em seguida, você poderá transformá-lo em Class Component.

Quando você pensa sobre esse tipo de componente, você se torna um PRO!

2. Instruções "If" no modelo de componente

Veja abaixo ... Você sabe o que há de errado com esse método de declaração if?

{a> b? : null}

Se a condição for inconsistente, o React se tornará nulo. Hmm ... está tudo bem - eu não vejo o que não há problema ... NÃO !!!

Esse nulo ainda existe no seu DOM, portanto, se você quiser pegar todos os filhos da sua lista ou ligar para o enésimo filho, esse nulo será contado !!!

Solução?

{a> b && }

Tão fácil, tão elegante. Como um profissional!

3. Função de ligação

EU AMO ES6! EU AMO FUNÇÕES DE SETA !!! Mas se você entender como eles realmente funcionam, o uso deles no reagir é muito fácil. Mais sobre eles (aqui). Em uma função de seta muito curta, obtenha um escopo de seu pai direto, que havia declarar.

Por que estou falando dessa referência à ligação de função? Porque existe um truque muito fácil para tornar você um código mais limpo. A ligação de função padrão ao evento é assim:

classe MyComponent estende o Componente {
  construtor (props) {
    super (adereços)
    this.clickHander = this.clickHander.bind (this)
  }
  clickHander (e) {
    e.preventDefault ();
    alert ('Olá' + this.props.text)
  }
  render () {
    return  
  }
}

Declaramos a função clickHandler, mas o contexto principal deles (este) é o botão em que clicamos. Portanto, se queremos vincular isso como nossa classe, precisamos vinculá-lo no construtor.

Posso facilitar? CLARO!!! Por função de seta, porque obtém um escopo de seu pai direto, que havia declarar (copiar de cima).

classe MyComponent estende o Componente {
  clickHander = (e) => {
    alert ('Olá' + this.props.text)
  }
 render () {
    return  
  }
}

Mais fácil, mais rápido e parece um PRO !!!!

** IMPORTANTE **

Se você deseja usar essa estrutura - lembre-se de que agora ela é experimental, por isso precisamos traduzi-la por babel usando transform-class-property, que é padrão em create-react-app. Referência aqui

4. Adereços e estados mais curtos

Outra coisa que podemos usar do ES6, mas esquecemos - a destruição. Em muitas revisões de código, podemos ver que objetos enormes são destruídos para peças pequenas.

...
var width = this.props.myObject.width,
    height = this.props.myObject.height,
    color = this.props.myObject.color;
...

Essa é uma solução muito longa e não flexível. Existe uma maneira muito fácil de desestruturar isso de maneira mais inteligente.

...
var {largura, altura, cor} = this.props.myObject;
...

Muito fácil quando queremos ter variáveis ​​com o mesmo nome como chave do objeto.

Como podemos usá-lo em reagir?

importar React, {Component} de 'react'
classe MyComponent estende o Componente {
  render () {
    deixe {name, age} = this.props
    retornar 

Meu nome é {nome}. Eu tenho {idade} anos.

  } }

ou com componente de função

importar Reagir de 'reagir'
const MyComponent = ({name, age}) => 

Meu nome é {name}. Eu tenho {idade} anos.

Outro exemplo? Quando você usa grande estrutura de adereços ou estados.

importar React, {Component} de 'react'
classe MyComponent estende o Componente {
  state = {
    equipe: [
      {
        pessoa: {
          informação básica: {
            nome: «Michal»,
            idade: 27
          }
        }
      }
    ]
  }
  render () {
    deixe {nome, idade} = this.props.team [0] .person.basicInfo
    
    retornar 

Meu nome é {nome}. Eu tenho {idade} anos.

  } }

Fácil? Fácil! E parece um PRO;)

5. Separação de estilos

Conselho muito rápido - ESTILO SEPARADO !!! : D

Mas temos duas situações:

  1. Podemos usar estilos externos de arquivos (.css, .scss)
  2. Usamos alguns componentes que usam seus estilos de construção, mas eles usam inline apenas como material-ui

A primeira situação é bastante fácil, colocar no webpack sass e style loader, e isso é tudo!

Mas a segunda situação é um pouco difícil e quero mostrar algumas soluções:

# 1 Const com estilos

importar React, {Component} de 'react'
estilos const = {
  parágrafo: {
    'fontSize': '10px',
    'cor': '# ff0000'
  }
}
classe MyComponent estende o Componente {
  render () {
    Retorna (
      
        

Este é o meu primeiro texto

        

Este é o meu segundo texto

      
    )   } }

# 2 Módulos CSS

É uma boa ideia carregar CSS como objeto e referência no seu código para a classe que existe no seu arquivo css.

importar React, {Component} de 'react'
importar classes de './style.css'
classe MyComponent estende o Componente {
  render () {
    Retorna (
      
        

Este é o meu primeiro texto

        

Este é o meu segundo texto

      
    )   } }

Vídeo rápido como preparar seu webpack para CSS

E lembre-se - se você pode separar seus arquivos e facilitar a edição, trabalha como um PRO!

6. Dependências de ambientes

Adoramos criar um protótipo de algo, mas não queremos colocar algo para a versão de produção. Como ocultar seus fragmentos ou algo disponível apenas para desenvolvedores ou no modo de desenvolvimento?

Use VARIÁVEIS AMBIENTAIS - variável extra que você pode atribuir durante o início ou a construção do projeto. Ao iniciar qualquer ação do terminal, você pode colocar variáveis ​​extras que são enviadas para o aplicativo pelo nó em process.env e, então, pode enviar qualquer coisa por push.

ex. MY_VARIABLE = "Olá, mundo!" npm run start

Então, em process.env.MY_VARIABLE, devemos ver nosso valor.

Se você estiver usando o create-react-app, terá uma variável criada como NODE_ENV que retornará o modo da sua criação como desenvolvimento, produção ou teste. E isso tudo para uso básico.

const isDebug = process.env.NODE_ENV === 'desenvolvimento'

Como usá-lo na prática?

importar React, {Component} de 'react'
const isDebug = process.env.NODE_ENV === 'desenvolvimento'
classe MyComponent estende o Componente {
  render () {
    Retorna (
      
        

Este é o meu texto público

        {isDebug &&

Este é o meu texto de desenvolvimento

}       
    )   } }

Não tenho certeza se é como um PRO, mas você pode passar por ENV VARIABLE algumas informações sensíveis ao ambiente, como o URL raiz da API ou o endereço do projeto etc.

** Importante **

Não se esqueça que, se alguém quiser decodificar seu código-fonte, ele poderá ver suas dependências.

7. Lembre-se das possibilidades de teste de componentes

Isso é muito fácil de entender - se você pensa em testar sua reação ao aplicativo, provavelmente deseja usar o Jest para testar. Mas você precisa se lembrar de que, se conectar seus componentes a algum back-end como Apollo (para GraphQL) ou máquina de estado como Redux ou outro HOC, será necessário lembrar que essas extensões não estarão disponíveis em testes simples de componentes. E isso é normal. Quando você deseja testar seu componente ÚNICO, está testando apenas a funcionalidade - verificando se os adereços e ações de entrada no componente funcionam corretamente.

Então, como preparar seus componentes para testes?

Se você não possui HOC, exporte normalmente:

importar React, {Component} de 'react'
classe MyComponent estende o Componente {
  render () {
    deixe {name, age} = this.props
    retornar 

Meu nome é {nome}. Eu tenho {idade} anos.

  } }
exportar MyComponent padrão

mas se você quiser usar algum HOC, use este padrão:

importar React, {Component} de 'react'
classe de exportação MyComponent estende o Componente {
  render () {
    deixe {name, age} = this.props
    retornar 

Meu nome é {nome}. Eu tenho {idade} anos.

  } }
exportar myHocFunction padrão (MyComponent)

Por quê? Porque, quando você deseja importar para outro documento, você faz parte do HOC, usa:

importar MyComponent de './components/MyComponent'

mas em testes você pode usar

importar {MyComponent} de './components/MyComponent'

Código simples, solução simples, mas muitas possibilidades de uso - porque é claro que somos profissionais;)

8. Use ajudantes

Coisa muito, muito simples e importante. Às vezes, você usa as mesmas funções ou as mesmas regras em muitos componentes. Não é necessário duplicar seu código. Apenas separe as funções dos auxiliares em outro arquivo e coloque-o no diretório global do assistente:

público
src
  ajudantes
    globals.js
  módulos
    Comercial
      ajudantes
        index.js
      UserList.js
      User.js
  app.js

** Importante **
Se você duplicar seu código - você deve melhorá-lo!

A separação de arquivos é a melhor maneira de se tornar um profissional!

9. Reagir fragmentos

Você preparou seu melhor layout, a marcação HTML é a melhor, todo pensamento parece bonito… ARHHHH INCRÍVEL, basta reagir à implementação… cabeçalho… parece perfeito… jumbotron… incrível… espera… Eu tenho uma seção que não está empacotada… OH NÃO ... reaja ... MERDA!

Esse foi um problema quando você deseja criar um componente que não possui um invólucro. Por muito tempo, precisamos envolver tudo:

classe MyComponent estende o Componente {
  render () {
    Retorna (
      
        

Este é o meu primeiro texto

        

Este é o meu segundo texto

      
    )   } }

porque reagir não nos permitiu colocar as coisas sozinhas. why - não era usado se cada elemento dentro tivesse sua própria chave uniq, que pode reconhecer qual parte do DOM é seu componente.

MAS O React adicionou um novo recurso chamado "React Fragments", que permite criar componentes que agrupam muitos elementos sem envolver o DOM. Funciona da mesma forma que a quebra de div, mas, em vez disso, div usamos a instrução ou a versão curta <>

Ex.

classe MyComponent estende o Componente {
  render () {
    Retorna (
      
        

Este é o meu primeiro texto

        

Este é o meu segundo texto

      
    )   } }

ou

classe MyComponent estende o Componente {
  render () {
    Retorna (
      <>
        

Este é o meu primeiro texto

        

Este é o meu segundo texto

           )   } }

Incrível - você é como um PRO. Leia o artigo completo da documentação

10. Os profissionais usam tipos de suporte e adereços padrão

Se você é PRO, pensa nas coisas que seus componentes precisavam. Por que devo usar PropTypes?

Durante o desenvolvimento, você pode ter certeza de que seus outros componentes transmitem valor adequado a eles. Se você deseja usar uma string, em seus adereços deve haver uma string, porque ex. você pode fazer coisas específicas do componente interno para string. Adicionando defaultProps, se o seu propType não for necessário, protege você que você / ou a faculdade do seu projeto esquece de adicionar algum suporte ao componente.

importar React, {Component} de 'react'
importar PropTypes de 'prop-types'
classe MyComponent estende o Componente {
  render () {
    retornar 

Olá {this.props.text.toLocaleUpperCase ()}

  } }
MyComponent.propTypes = {
  texto: PropTypes.string
}
MyComponent.defaultProps = {
  texto: 'Mundo'
}

E você deseja saber mais sobre PropTypes - Documentação completa

RESUMO

Como você pode ver, essas 10 dicas são muito fáceis de implementar no seu código. Leia mais uma vez, adicione reação, se quiser, e escreva nos comentários se houver algo incerto ou se você quiser ler sobre algo mais específico! Boa sorte!