Tag Archives: metodos

React – Fundamentos – Components

WebApp Saga

Step 1 : Fbox – Overview

No modo React os componentes (pedaço de uma UI) são o coração desta tecnologia.

app React

Um app React é composto pela criação de vários componentes independentes e reutilizáveis para compor UI complexas.

Contém ao menos um componente (root), que contém outros componentes filhos. Ou seja, ela é uma árvore de componentes.

react_fundamentos_ui_tree

Em termos de implementação:

Um componente tem a implementação como uma classe JS que possui os métodos:

  • State() responsável pela exibição dos dados quando o componente for renderizado.
  • Render() responsável por descrever como a UI surge. A saída é um elemento React, um JS simples que faz o mapeamento do DOM.

Em resumo, o React é uma representação “ligth” do DOM em memória, um virtual DOM leve e de fácil criação.

Estado

Quando o estado de um componente sofrer alteração, temos um novo elemento React.

O React faz a comparação deste elemento com o anterior para ver o que mudou, e atualizará a parte relativa do DOM real para manter a sincronia com o DOM virtual. Desse modo, não precisamos tratar com a API do DOM no browser.

Apenas alteramos o estado de um componente, e o React irá se encarregar de atualizar automaticamente o DOM para equiparar o estado.

A lib React

Por este motivo, a lib é conhecida como React, ou seja, quando o estado muda, o React reaje a esta mudança e atualiza o DOM.

Assim, o React é uma lib e não um framework (como o Angular), e, sua responsabilidade é atuar na criação de (UI), por isso ela possui uma API pequena.

Então ao criar apps React, poderemos recorrer na utilização de outras libs para executar tarefas como:

  • Roteamento
  • Serviços HTTP

Isso ocorre porque essas tarefas não são o foco do React.

Clean Code – Classes, Metodos, Vars, Interfaces

#8 – Bons nomes

Deixe nossos códigos clean utilizando nomes claros para nomear classes, métodos, variáveis e interfaces, sempre utilizando nomes fácil de entender, sugestivos, significativos, auto descritivos e pertinente ao propósito e projeto.

MainClass.cs

Exemplo simples:

Clean Code

public class CalculoSalColaborador
        {
            ///
<summary>
            /// Calcula o valor salario do colab. horista
            /// </summary>

            /// <param name="salario"></param>                  
            /// <param name="horaExtra"></param>
            /// <param name="desconto"></param>
            public void ObterValorSalario(int salario, int horaExtra, int desconto)
            {
                int valorTotalSalario = salario + horaExtra - desconto;
            }
        }

Sempre que necessário, faça comentários resumindo o método, ou seja, descreva seu propósito e parâmetros.

Down

public class Colaborador
    {
        public void ObterValor(double sal, double he, double dia)
        {
            int t = sal + he - dia;
        }
    }

Use nomes fáceis de entender para variáveis como salario, horaExtra e desconto, ao invés de sal, he e dia.

Para nomear métodos, faça-o descrevendo a intenção do método, como ObterValorSalario() e não ObterValor().

Clean Code!