Author Archives: wandersonaldo_m0p720f3

ReactJS – Eventos

Módulo # 6

WebApp Saga

A missão de hoje é fazer um estudo tratando dos detalhes fundamentais que precisamos conhecer para escrever códigos ReactJS. Ou seja, o foco será apenas em assuntos básicos da tecnologia, os elementos principais, explicando como eles funcionam dentro da plataforma.

No RN trabalhamos apenas com JS, ou seja, não temos acesso a CSS. E para aproximar a experiência de criar apps ao mundo do desenvolvimento web. Nasceu o FlexBox, uma forma declarativa de estilizar componentes bastante similar ao CSS.

A ideia é compreender a organização visual de nossos elementos. Entender os objetos, parâmetros e valores, trabalhando e customizando cada um dos elementos e conceitos disponíveis nesta tecnologia.

Ao final da missão, deveremos ter domínio sob a estrutura básica de um app-ReactJS sendo capaz de organizar boas soluções utilizando seus recursos.

Enfim, vamos fazer um overview sobre:

  • Overview
  • The Virtual DOM
  • Components
  • Creating your first component
  • JSX
  • Back to our first component
  • Props and states
  • Props
  • State

O objetivo é trabalhar muito em cima deste projeto, vamos pensar em algo pequeno e conforme for terminando, iremos aprender como acrescentar mais novas funcionalidades.

“Modo React!”

Keep Programming!!!!

 

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