К содержанию

Tutorial Principal de React

Tutorial do framework JavaScript React. Para iniciantes. Muita teoria e exercícios.

Уроки

Introdução ao Framework React

Instalação do Framework React

Instalando a extensão react-devtools

Introdução à Abordagem de Componentes no React

Layout do site do framework React

Resultado do trabalho do componente

A linguagem JSX

Introdução à linguagem JSX no React

Retorno de tags JSX aninhadas por funções

Regras de retorno de função ao quebrar a tag para baixo em JSX

Particularidades do retorno de múltiplas tags em JSX

Retorno de tag JSX não fechada

Retorno de uma tag vazia por uma função em JSX

Inserindo valores de variáveis e constantes em JSX

Nuances ao inserir valores de variáveis

Inserindo arrays em JSX

Inserção de objetos em JSX

Inserção de variáveis e constantes em atributos de tags em JSX

Armazenando tags em variáveis e constantes JSX

Características do armazenamento de múltiplas tags em constantes JSX

Tags em linhas diferentes em JSX

Retornando tags via return em JSX

Fechamento de Tags JSX

Correção de marcação em React

Execução de código JavaScript

Condições

Aplicação de condições em JSX

Renderização Condicional em React

Condições para retornar uma tag em JSX

Operador Ternário em JSX

Utilização do operador && em JSX

Inversão para condições abreviadas em JSX

Funções

Utilização de funções no React

Chamando funções dentro de tags em React

Anexando eventos em JSX

Parâmetros em funções JSX

Objeto Event no React

Objeto Event na Passagem de Parâmetros

Formação de Tags

Tags em arrays JSX

Formação de um Array de Tags em um Loop React

Renderizando elementos de uma lista a partir de um array de dados em React

Chaves únicas em arrays de tags no React

Renderizando um array de objetos em React

Chaves únicas via id em React

Renderizando um array de objetos como uma tabela HTML em React

Id exclusivos

Discussão sobre IDs únicos no React

Problemas com novos IDs em React

Strings aleatórias para id em React

Geração de id em React

Função para gerar id em React

Utilização da função id em React

Uso incorreto da função id em React

Estados

Introdução a States no React

Utilização de States no React

Reatividade de States no React

Valor booleano no estado no React

Contador com States no React

Formulários

Trabalhando com inputs no React

Modificando dados de entrada ao exibi-los em React

Alterando dados com uma função em React

Trabalhando com Múltiplos Inputs em React

Processamento de dados de formulário ao clicar em um botão no React

Trabalhando com textarea no React

Trabalhando com checkbox em React

Checkboxes e renderização condicional em React

Trabalhando com select em React

Renderizando opções de seleção a partir de um array em React

Atributos value em select no React

Atributos value de um select a partir de um array em React

Trabalhando com radio no React

Valores Padrão no React

Vinculando inputs a um array em React

Vinculando inputs a um objeto em React

Dados

Reatividade de Dados em React

Adição Reativa em Arrays no React

Operações reativas com arrays em React

Adição Reativa a um Array de Objetos em React

Operações reativas em arrays de objetos em React

Exibição Reativa de Dados em React

Componentes

Introdução aos Componentes React

Utilização de Componentes no React

Várias instâncias de um componente em React

Props de Componentes em React

Criação de Componentes Filhos em React

Matriz para criar componentes filhos em React

Componentes filhos em loop no React

Passando estados para componentes filhos no React

Passando id para um componente no React

Alterando o estado do componente pai em um componente filho no React

Editando o estado do pai em um componente filho no React

Editando estado em um componente neto no React

Modos de operação através de estados em componentes filhos no React

Conceitos

Conceitos do React ao trabalhar com componentes

Dados de Componentes no React

Tipos de Componentes no React

Fluxo de Dados Unidirecional no React

Elevação de Estado no React

Uma Fonte Única da Verdade no React

Estilização

Maneiras de estilizar componentes React

Usando CSS Global para Estilização em React

Inserindo dados no atributo style a partir de um objeto em React

Inserindo dados no atributo style de um arquivo separado no React

Trabalhando com estilos CSS no atributo style no React

Inserindo dados no atributo style a partir de variáveis no React

Estilização com Styled Components no React

Utilizando Props com Styled Components no React

Uso de Props na Renderização Condicional com Styled Components no React

Estilização Avançada de Componentes no React

Começando a estudar estilização com CSS modules no React

Continuando o estudo de estilização com CSS Modules no React

A propriedade composes para classes em CSS modules no React

O comando composes para arquivos em CSS modules no React

Projetos

Projeto Checklist em React

Projeto Bloco de Notas em React