Código

Descrição

Aqui serão apresentadas as convenções do código desenvolvido. padrões, documentação e conceitos básicos serão alguns dos assuntos abordados.

Sumário

• Ferramentas
• Frontend
  • Nomenclatura de Arquivos
  • Documentação

Ferramentas de Padronização

Para o desenvolvimento do código e fácil controle de versionamento (pelo GitLab) sugerimos a instalação do Visual Studio Code. O mesmo além de ser uma ótima ferramenta para desenvolvimento conta com extensões que serão essenciais para padronização do código.

Depois de instalar o Visual Studio Code, acesse sua aba de extensões e instale as seguintes:

• ESLint: Para que a IDE identifique padrões React Native que estão sendo desrespeitados.
• Prettier: Para que a IDE realize a indentação do código da maneira correta.

Depois de adicionar as extensões necessárias, falta apenas uma configuração para podermos começar o desenvolvimento. No seu teclado pressione as teclas ctrl shift p para acessar a aba de pesquisa do Visual Studio Code. Pesquise por settings e abra o arquivo com nome Preferences: Open Settings (JSON). Nesse arquivo adicione as seguintes linhas

"editor.formatOnSave": true,
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

Nomenclatura de Arquivos

A criação de Componentes ou Páginas deve ser realizada em suas respectivas pastas. Para criar qualquer um dos dois, crie uma pasta contendo o index.js e a styles.js. Na nomenclatura do nome da pasta cada palavra deve ser iniciada com letra maiúscula seguida de letras minúsculas (sem espaço, underline ou hífen). Podemos ver melhor essa regras nos exemplos abaixo:

components
    Input
        index.js
        style.js

pages
    HomePage
        index.js
        style.js

Documentação

A documentação de componentes e páginas é realizada pela biblioteca PropTypes onde fica facil a definição dos tipos de props e dos seus seus valores padrão.

Primeiramente é definido os tipos de props que o componente precisa, para isso, escreva o nome da prop e em seguida siga o formato abaixo:

Input.propTypes = {
  label: PropTypes.string.isRequired,
  rows: PropTypes.number,
  multiline: PropTypes.bool,
  variant: PropTypes.string,
};

Em seguida, preencha o valor inicial de cada prop, garantindo o funcionamento padrão do componente caso nenhuma prop seja passada:

Input.defaultProps = {
  label: 'placeholder',
  rows: 1,
  multiline: false,
  variant: 'filled',
};

Código

Para que o código se mantenha padrozinado para todos os componentes e telas, crie novos componentes a partir do seguinte exemplo:

import React from 'react';
import { $componente } from '@material-ui/core';
import useStyles from './styles';
import PropTypes from 'prop-types';

function ComponentName({ value1, value2 }) {
  const classes = useStyles();

  return (
    <componente
      prop1={value1}
      prop2={value2}
    />
  );
}

export default ComponentName;