Pular para o conteúdo principal

UI

ui/​

Como o nome indica, em UI encontra-se a lógica da interface do utilizador da aplicação.

Para desenvolver código, seja em backend ou frontend, recomendamos os editores de código gratuito:

Estrutura da pasta UI​


├─ ui/
   ├─ src/
   │  ├─ containers/
   │  ├─ components/
   │  ├─ style/
   │  └─ index.js
   ├─ .babelrc
   ├─ .gitignore
   ├─ package.json
   ├─ package-lock.json
   ├─ README.md
   └─ webpack.config.js

src/​

A pasta src reúne o código aplicacional do frontend. Nesta, encontra-se a organização de componentes React com valores atómicos diferentes, respectivamente components e containers.

Caso pretenda remover a pasta src ou mudar o nome para criar a sua estrutura não se esqueça de mudar a configuração do webpack no ficheiro webpack.config.js.

containers/​

A pasta containers é destinada aos container components React de maior valor atómico, ou seja, traduzem uma maior quantidade de lógica.

components/​

A pasta components é destinada aos components React de menor valor atómico, ou seja, traduzem uma menor quantidade de lógica. Tipicamente um comportamento mais simples que será reutilizado em múltiplos containers ou até noutro component.

style/​

A pasta styles, é tipicamente para estilos globais de vários containers da aplicação. Ainda que não haja um forte padrão neste campo, sugerimos uma organização dos estilos específicos do component ou do container junto do mesmo na pasta components ou containers, respectivamente.

Webpack e Compiladores​

Para que seja gerada a versão da aplicação compilada e optimiazada, para ser processada pelo browser, é necessário executar os respectivos compiladores. Estes estão configurados no ficheiro webpack.config.js onde é possível verificar o fluxo de acções, os loaders e as opções dos mesmos. Por omissão são processados ficheiros: `JSX, JS, LESS e CSS.

O Ficheiro .babelrc está em formato JSON e traduz as parametrizaçoões e módulos usadas por este toolchain que funciona maioritariamente como um conversor de sintaxe. Nesta configuração também é possível localizar a biblioteca de componentes da AntDesign que vem incluída por omissão em todos os projetos do Netuno. Para mais informação sobre o Ant Design https://ant.design/

Gestor de Pacotes​

Os ficheiros package.json e package-lock.json são utilizados pelo gestor de pacotes NPM para instalar todos as dependências necessárias do frontend. Sejam elas dependências do projeto ou apenas do desenvolvimento, como o webpack. Alternativamente ao NPM podem também ser usados outros gestores de pacotes como o YARN.