Tag Archives: ESTRUTURA

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

NodeJS – Básico – Estrutura da solução

Web App Saga

A estrutura do projeto!

O VisualStudio for NodeJS oferece o template Basic Node.js versão 4 do Express Application. Veja:

node_basico_estrutura_folder

A imagem ilustra essa estrutura inicial, após a criação de um projeto Template NodeJS| Starter Node.js Express 3 Application. Temos esta estrutura de arquivos necessários para construir um app.

As pastas do APP NodeJS:

  • pacotes npm – express, jade e stylus
  • public – fontes, imagens e referências javascripts :bootstratp, jquery
  • routes – index.js
  • views– utilizando o engine Jade
  • js – a aplicação Node
  • json –

O Jade é um template engine exclusivo para Node.js, com sintaxe diferente do HTML convencional.

O Jade nos permite desenvolver código server-side junto ao código client-side, ou seja, js server-side junto com html ou javascript client-side;

Next stop Node. Disambarke on the left!