Tag Archives: api

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.

#01 – Xamarin.Forms – Apresenta – API

Chapter : 1

Saga MM {Modo Mobile}

Aprendendo um pouco sobre uma das partes mais importantes de um app Xamarin.Forms, (API) e seus conceitos introdutórios. Vamos lá:

A Organização

A organização do modelo de API do Forms é dividido em 4 áreas:

xam_basico_structure

Observe na imagem que, os elementos de páginas, layouts e views representam componentes base da (UI) do Forms. Ou seja, no Forms, todos os objetos de tela (são coletivamente conhecido) como elementos visuais e classificados em 4 categorias de classes:

Page – representam uma simples tela do APP. Ela é análogo aos conceitos de Android Activity, Page Windows Phone, View Controller iOS.

Layout – representa um subtipo especializado da View. Age como um container para outros Layout ou Views. Os subtipos de layout contém lógica específica para organizar as child views em uma direção.

View – representam componentes/widgets em outras plataformas. Ou seja, elementos de UI como labels, buttons, entry, etc.

Cell – representa um elemento especializado, utilizado para definir itens de lista ou tabela (onde os itens da lista serão exibidos).

xam_view_ex_01

Exemplo de Page UI Xamarin.Forms utilizando classes comuns como Button, Entry, Label e Switcher.

Vale lembrar que estes componentes também conseguem mostrar dados armazenados em uma base por exemplo.

Ok! Sobre API do Xamarin.Forms é tudo o que eu tenho a dizer.

Missão cumprida!