Padronização de desenvolvimento para o front-end

Nomenclatura de Arquivos

Na nomenclatura dos arquivos cada palavra deve ser iniciada com letra maiúscula seguida de letras minúsculas (sem espaço, underline ou hífen). Dependendo do arquivo que está sendo criado é necessário que o sua funcionalidade seja adicionada ao nome. Podemos ver melhor essa regras nos exemplos abaixo:

Components: ExemploComponent.js

Screen: ExemploScreen.js

Documentação

A documentação deve estar presente em todos os _Components e Screens criadas. A documentação será feita com JavaDoc e deverá estar localizada no topo do código, antes mesmo das importações

Os seguintes dados deverão ser utilizados nessa ordem:

• Descrição da função do arquivo criado
• @author Nome dos criadores do arquivo separado por vírgulas.
• @param nome Parâmetro que o Component ou Screen precisa para ser executado (prop).
• @example Exemplo de chamada do Component ou Screen.

O trecho de código abaixo apresenta uma exemplificação da documentação de um componente de botão simples.

/**
  * Componente de botão básico
  * 
  * @author           João Leão, Rafael Araujo e Eduardo Cardoso
  * @param name       Texto a ser exibido dentro botão
  * @param onClick    Ação a ser realizada pelo botão
  * @example          <ButtonComponent
  *                     name={"Fazer Login"} 
  *                     action={login} 
  *                   /> 
  */

Código

Depois da documentação, os códigos de Component e de Screen deve seguir a seguinte formatação:

• Importações necessárias
• Função necessárias
• Função default com retorno em HTML
• Constante da estilização do componente

O exemplo abaixo apresenta o formato que deve ser seguido. Trechos acompanhados do símbolo $ devem ser substituídos pelo código desenvolvido (a não ser que não seja necessário).

import React from 'react';
import { StyleSheet, $componentsToImport } from 'react-native';

$functions

export default function $name(props) {
  return (
    $htmlCode
  );
}

const styles = StyleSheet.create({
  $style
});