Tag Archives: fundamentos

React.JS – VirtualDom

Conceitos básicos da library React. Vamos lá:

Criada pelos engenheiros do fb, o Virtual DOM é uma abordagem de abstração para oferecer apps web com maior performance.

react_basico_virtualdom

O modo ReactJS 

O VirtualDom é uma técnica do React, utilizada para atualização de telas. Ou seja, ele abstrai uma camada qualquer diferente do DOM.

Uma vez que um Dom Virtual fica em memória, apenas as alterações na sua estrutura serão renderizadas novamente na tela, ou seja, não precisamos percorrer novamente toda a árvore.

Conclusão

Até aqui é o básico de qualquer programação baseada em React.JS.

Este é um ponto inicial interessante, pois entender esse conceito ambiciona novas experiências.

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!!!!