Tag Archives: fundamentos

React – Fundamentos – Estrutura da solução

Web App Saga

A estrutura do APP projeto à ser trabalhado!

Um app React é composto por muitos arquivos e recursos. Vamos aprender hoje sobre esta estrutura e todas as pastas e o tipo de informação que cada uma delas guarda. Vamos lá:

react_basico_projectstructure

A imagem ilustra essa estrutura inicial, após a criação de um projeto, temos essa estrutura de arquivos necessários para construir um app React.

Para abrir o projeto no VS Code (File | Open Folder | Pasta do projeto).

As 3 pastas do APP:

  • node_modules – mantém pacotes e dependências do app
  • public – mantém os recursos públicos do app
    • favicon.ico – ícone
    • index.html – define o template da página do app
    • manifest.json –
  • src – mantém os arquivos do componente React
    • app.cs – arquivo de estilo
    • app.test.js – arquivo de unit test
    • logo.svg – logo da página
    • registerServiceWorker.js – mantém código gerado pelo React
    • app.js – arquivo principal do componente

Index.html

Possui a section body com tag div id=”root”. Esta tag que o app React passa pela renderização/exibição. Esta div é o contâiner para o app React.

Apenas os arquivos definidos nesta pasta podem ser utilizados na página Index.html.

App.component

Responsável pela renderização do banner com o logo do React no app.

SRC

O WebPack irá processar somente os arquivos dentro desta pasta. Ou seja, coloque arquivos como JS e CSS, do contrário o Webpack não irá reconhecê-los.

Next stop React. Disambark on the left.

Keep Coding!!!!

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.