Padrões Interface - estudeplus/docs GitHub Wiki

Histórico de Versão

Data Versão Descrição Autores
01/07/2019 1.0 Iserção dos padrões no documento Érico Maximiano Bandeira
01/07/2019 1.0 Iserção dos padrões no documento Max Henrique Barbosa

Sumário

1. Introdução

2. Padrões

1. Introdução

1.1 Finalidade

Este documento tem como finalidade evidenciar e explicar os padrões de projeto utilizados na confecção da interface do projeto Estude+.

1.2 Referências

Padrões de Projeto React

2. Padrões

2.1 Function component

Componentes de função são pequenos módulos que são criados com a intenção de facilitar o reaproveitamento de recursos em outras telas feitas nos projetos em React. É utilizado em toda a interface, no momento em que cada página é composta por um conjunto de componentes organizados na tela.

class Navbar extends Component {
    render() {
      return (
      <div class="navbar-fixed">
         <nav>
            <div class="nav-wrapper nav">
            <a href="/" class="brand-logo">
                <img width="255" height="60" src={require('../../img/logo01pequena.png')} alt="logo"></img>
            </a>
            <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="/precadastro">Pré-cadastro</a></li>
                <li><a href="/login">Login</a></li>
            </ul>
            </div>
        </nav>
      </div>
    )
  }
}

2.2 Render Prop

É responsável por estabelecer uma condição apra que a página seja renderizada. É usado em alguns arquivos gerados pelo próprio React, tem como intenção compartilhar código entre componentes React passando uma prop cujo valor é uma função.

<Route path="/perfil" exact strict render={
            ()=>{
            return (
            <div>
              <Navbarperfil/>
              <Perfil/>
            </div>
            )
            }
          }/>

2.3 Proxy Component

Componentes que tem rotas de alteração definidas assim que ocorre uma interação, como um click em cima do mesmo por exemplo, afim de ser redirecionado a outra parte da aplicação. Geralmente está atrelado a botões, já que consiste em criar componentes que sejam capazes de redirecionar para outra área da aplicação. Por ser um componente pode ser reaproveitado.

<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="/precadastro">Pré-cadastro</a></li>
                <li><a href="/login">Login</a></li>

2.4 Style Component

O conceito está atrelado a vincular um componente a um estilo próprio, onde seria definido suas características visuais

.box1{
    
    background: rgb(172, 166, 166);
    box-shadow: 0px 4px 4px rgba(0.50, 0.50, 0.50, 0.50);
}

2.5 Layout Component

Da mesma forma que o Style Component, ele também padroniza componentes a ele vinculado, porém é visto a questão de layout atrelado a ele, como alinhamento, tamanho e posição

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

2.6 Event Switch

É utilizado por componentes que manipulam um evento, como executar ações, fazer proxy ou funções. A ideia principal é que não haja a necessidade de ficar repetindo essas ações sempre que há a necessidade de apontar um evento.

    handlechangeMatricula = event => {
     this.setState({
       matricula: event.target.value
     })
   }

2.6 Controlled Input

São especificações que limitam o tipo de entrada recebida por algum input dentro da aplicação. Ocorre dentro dos formulários da interface, já que evidencia ao usuário o tipo de entrada que é esperada pela aplicação

<div class="input-field col s12">
                <input id="icon_prefix" type="text" class="validate"
                onChange={this.handlechangeEmail}
                value={this.state.email}
                onKeyDown={this.handleKeyDown}
                required/>
                <label for="icon_prefix"></label>
                <label class="active" for="first_name2">e-mail</label>
              </div>
⚠️ **GitHub.com Fallback** ⚠️