React
Mão na Massa
Stateful Components
Props & State
Métodos
Passagem de métodos
JS Tricks
Listas de Componentes
Stateless Components
Interface
de Formulários
Criar Eventos
Alterar Eventos
Deletar Eventos
Controle de Dados
Preview
github.com/JsBatista/workshopReact
git clone https://github.com/JsBatista/...
cd workshopReact
cd Aula-4
cd aula4
npm i
code .
npm start
Pastas:
0 - Inicial (apenas create-react-app)
1 - Hello World + Interface
2 - Definição dos Componentes
3 - Renderização dinâmica do FormUnit
4 - Criação do Display
5 - Criação do Input estático
Pastas:
6 - Função de Criar Formulário
7 - Função de Excluir Formulário
8 - Função de Atualização de Formulário
9 - Função de Alternar entre Display - Input
10 - Polimento e Finalização
Como Usar?
Trabalhe na pasta aula4
Para avançar ou retroceder:
Exclua a pasta src da aula4
Cole a pasta src de outra pasta
Bora lá
Dentro do JSX
Expressões JS entre chaves
Tags "html"
<p> {valorJS} <p>
Operador Ternário
expressão ? valor1 : valor2
? :
Map
array.map( (atual) => {função} )
Nativa do array
Herdada de Array.Prototype
Retorna um novo array formado pelo retorno do callback
Push
array.push(elemento)
Nativa do array
Adiciona um elemento no fim do Array
indexOf
array.indexOf(elemento)
Nativa do array
Retorna o índice de um elemento no Array
splice
array.splice(i, x);
Nativa do array
Altera o array, removendo x elementos a partir do índice i
Retorna os elementos removidos
Evento (e)
e.target.value
Passado como parametro em alguns callbacks, representando o evento que o disparou
Notação de Colchetes
meuObjeto.propriedade
meuObjeto['propriedade']
meuObjeto.variavel
meuObjeto[variavel]
let variavel = 'nome';
X
V
