|
|
|[Home](home)|[Escopo](escopo)|[Processo](processo)|[Design](design)|[Configuração](configuracao)|[Arquitetura](arquitetura)|[**Código**](codigo)|[Banco de Dados](banco_dados)|[Qualidade](qualidade)|[Instalação](instalacao)|
|
|
|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|
|
|
|
|
|
| [Home](home) | [Escopo](escopo) | [Cronograma](cronograma) | [Design](design) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [**Código**](codigo) | [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)
|
... | ... | @@ -20,12 +23,13 @@ Para o desenvolvimento do código e fácil controle de versionamento (pelo GitLa |
|
|
|
|
|
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.
|
|
|
- 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)```.
|
|
|
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]": {
|
... | ... | @@ -34,8 +38,10 @@ Nesse arquivo adicione as seguintes linhas |
|
|
```
|
|
|
|
|
|
## 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:
|
|
|
|
|
|
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
|
... | ... | @@ -55,6 +61,7 @@ pages |
|
|
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,
|
... | ... | @@ -75,8 +82,6 @@ Input.defaultProps = { |
|
|
};
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Código
|
|
|
|
|
|
Para que o código se mantenha padrozinado para todos os componentes e telas, crie novos componentes a partir do seguinte exemplo:
|
... | ... | @@ -103,6 +108,9 @@ export default ComponentName; |
|
|
```
|
|
|
|
|
|
## Backend
|
|
|
|
|
|
### Nomenclatura de Arquivos
|
|
|
|
|
|
### Documentação
|
|
|
|
|
|
### Código |