Tutorial Principal de React
Introdução
Instalação do React
Conexão do plugin react-devtools
Abordagem de Componentes
Layout do Site
Resultado do Trabalho do Componente
A linguagem JSX
Introdução ao JSX
Retornando tags aninhadas
Quebrando uma tag para baixo
Retornando várias tags
Retornando uma tag não fechada
Retornando uma tag vazia com uma função
Inserindo valores de variáveis
Nuances ao inserir variáveis
Inserindo arrays
Inserindo objetos
Inserindo em atributos
Armazenando tags em JSX
Armazenando várias tags
Tags em linhas diferentes
Retornando tags
Tags JSX fechadas
Correção da marcação
Executando código JavaScript
Condições
Condições no JSX
Mostrar por condição
Condições para retornar uma tag
Operador ternário no JSX
Usando o operador && no JSX
Invertendo para condições abreviadas
Funções
Usando funções
Chamando funções dentro de tags
Anexando manipuladores
Parâmetros do manipulador
Objeto Event
Objeto Event ao passar parâmetros
Formação de Tags
Array de Tags
Array de Tags em Loop
Tags de Array com Dados
Chaves em Array
Array de Objetos
Chaves Únicas via ID
Tabela de Array de Objetos
Id exclusivos
Discussão
Problemas com novos id
Strings aleatórias para id
Geração de id
Função para geração de id
Usando a função de id
Uso incorreto da função
Estados
Introdução aos Estados
Utilização
Reatividade
Valor Booleano no Estado
Contador ao Trabalhar com Estados
Formulários
Trabalhando com inputs
Modificando dados de input na saída
Modificando dados usando uma função
Trabalhando com múltiplos inputs
Processamento de dados do formulário
Trabalhando com textarea
Trabalhando com checkboxes
Checkboxes e renderização condicional
Trabalhando com selects
Itens do select a partir de um array
Atributos value no select
Atributos value do select a partir de um array
Trabalhando com radio
Valores padrão
Vinculando inputs a um array
Vinculando inputs a um objeto
Dados
Introdução
Adição reativa em array
Operações reativas com arrays
Adição reativa em array de objetos
Operações reativas com arrays de objetos
Exibição reativa de dados
Componentes
Introdução aos Componentes
Usando Componentes
Múltiplas Instâncias de Componente
Props de Componentes
Componentes Filhos
Array para Criar Componentes Filhos
Componentes Filhos em Loop
Passando Estados para Componentes Filhos
Passando id para um Componente
Alterando o Estado do Pai
Editando o Estado do Pai
Editando o Estado do Avô
Modos de Operação via Estados
Conceitos
Introdução
Dados de componentes
Tipos de componentes
Fluxo unidirecional de dados
Elevação de estado (Lifting State Up)
Fonte única da verdade
Estilização
Métodos de Estilização no React
CSS Global
Inserindo dados no atributo style a partir de um objeto
Inserindo dados no atributo style a partir de um arquivo separado
Trabalhando com estilos CSS no atributo style
Inserindo dados no atributo style a partir de variáveis
Styled Components
Props em Styled Components
Props e renderização condicional em Styled Components
Componentes com estilos estendidos
Começando com CSS Modules
Continuando com CSS Modules
Comando composes para classes
Comando composes para arquivos