|
|
|
|[Home](home)|[Escopo](escopo)|[Processo](processo)|[Design](design)|[Configuração](configuracao)|[Arquitetura](arquitetura)|[**Código**](code)|[Banco de Dados](banco_dados)|[Qualidade](qualidade)|[Instalação](instalacao)|
|
|
|
|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|
|
|
|
|
|
|
|
|
|
|
|
# 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](#ferramentas)
|
|
|
|
- [Frontend](#frontend)
|
|
|
|
- [Nomenclatura de Arquivos](#nomenclatura-de-arquivos)
|
|
|
|
- [Documentação](#documentação)
|
|
|
|
- [Backend](#backend)
|
|
|
|
- [Nomenclatura de Arquivos](#nomenclatura-de-arquivos-1)
|
|
|
|
- [Documentação](#documentação-1)
|
|
|
|
|
|
|
|
## 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"
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Frontend
|
|
|
|
### 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;
|
|
|
|
```
|
|
|
|
|
|
|
|
## Backend
|
|
|
|
### Nomenclatura de Arquivos
|
|
|
|
### Documentação
|
|
|
|
### Código |
|
|
\ No newline at end of file |
