react

Primeiros passos com React

Aprenda os fundamentos de React, a biblioteca JavaScript mais popular atualmente, e crie aplicações para a web.

iniciar curso

Conteúdo do curso

React facilita a criação de interfaces de usuário e permite que você projete views para cada estado da sua aplicação enquanto o React cuida da atualização e renderização de seus componentes apenas quando os dados mudam. Crie seus próprios componentes, com estados próprios e componha-os para criar algo maior.

O que você vai aprender

  • Criar uma aplicação com componentes
  • Usar JSX para criar templates
  • Como usar state e props para tornar um componente dinâmico
  • Como funciona o ciclo de vida de um componente
  • Reutilizar e dividir componentes
  • Responder a eventos
  • Comunicação com servidores remotos
  • Estilizar componentes

1. React vs DOM

  • IntroduçãoGRÁTIS
  • Crie um elemento usando createElementGRÁTIS
  • Renderize um elemento com renderGRÁTIS
  • Crie e renderize um elementoGRÁTIS

2. JSX

  • Uma sintaxe familiarGRÁTIS
  • Substitua createElement por JSXGRÁTIS
  • Utilize expressões no JSXGRÁTIS
  • Converta a renderização de uma listaGRÁTIS
  • Renderize um array de objetos

3. Componentes

  • Criando componentes
  • Crie seu primeiro componente
  • Reutilizando e compondo componentes
  • Dividindo componentes

4. Props

  • Componentes dinâmicos com props
  • Passe informações pro componente
  • Repassando informações
  • Seu primeiro componente dinâmico
  • Reutilize um componente dinâmico
  • Use props nos atributos

5. State

  • Componentes independentes
  • Converta uma função para classe
  • Converta o Comentario para uma classe
  • Adicione state ao componente

6. Eventos

  • Como funcionam os eventos
  • Altere o state num clique
  • Capture um evento num input
  • Passe uma função para um componente
  • Num evento, altere um state complexo

7. Lógica baseada no state

  • Lógica no estado
  • Esconda o componente
  • Mostre o componente
  • Múltiplas opções com operador ternário

8. Re-render e ciclo de vida

  • Ciclo de vida de um componente
  • Altere o state na montagem
  • Use o método componentDidMount
  • Mostre dados externos
  • Remova o evento no unmount

9. Style

  • Opções de estilo
  • Aplique estilo CSS ao componente
  • Aplique estilo em linha ao componente
Sobre o instrutor
Estevan Maito

Criador da Unna e desenvolvedor fullstack

Sobre o curso
Duracao4 horas
DificuldadeIniciante
CertificadoCertificado de conclusão