Desenvolvimento Web Moderno

Segunda aula

Instrutor: Diego Martins de Pinho

Realização: Code Prestige    Apoio: iMasters

A Code Prestige é uma escola especializada no ensino de programação. Desenvolvemos diariamente artigos, cursos, livros digitais, vídeos e outros conteúdos que já auxiliaram mais de 6000 pessoas de todo o Brasil a alcançarem seus objetivos profissionais.

Redes Sociais

Site da Code Prestige

Cursos a distância

Treinamentos para empresas e universidades

Também realizamos treinamentos personalizados para empresas e faculdades. Entre em contato!

Instrutor

Redes Sociais

O que veremos hoje?

  • O que é o React?
  • Pra que ele serve?
  • Como utilizá-lo?
  • Conceitos fundamentais
  • Exercícios

O que é o React?

O React é uma biblioteca JavaScript para criação de interfaces de usuário em aplicações web, que foi idealizada pelo time de desenvolvimento do Facebook.

Um pouco de história

  • Versão atual: 16.3.2
  • Criada por: Jordan Walke, engenheiro do Facebook
  • Primeiro release: Maio de 2013 na JSConf US
  • Utilizado por grandes empresas: Facebook, Instagram, Netflix, Sony etc...

Mas pra que serve?

O React foi desenvolvido com a seguinte missão:

"Como construir grandes aplicações com muitos dados que mudam frequentemente?"

Foco do React

  • Trabalhar exclusivamente com a camada da View
  • Utilizar o conceito de Virtual DOM
  • Trabalhar com componentes

Como podemos dividir?

Exemplo

Exemplo - Código

Exemplo - Código Renderizado

Como vocês dividiriam?

Como vocês dividiriam?

Esta é a ideia do React

Abstrair o projeto em vários componentes reaproveitáveis.

Exercício 1

Objetivo

Criar uma página de portifólio pessoal

Requisitos

  • A página deve conter pelo menos 1 imagem
  • Deve conter pelo menos 3 componentes distintos

Configuração do CodePen

Utilizem

  • https://unpkg.com/react@next/umd/react.development.js
  • https://unpkg.com/react-dom@next/umd/react-dom.development.js

Gabarito

Disponível neste link

O que vimos

  • Como utilizar o React no CodePen
  • Criar componentes sem estado utilizando JavaScript
  • A importância do método render()
  • Utilizar componentes dentro de componentes

Agora é a vez de vocês!

Propriedades nos componentes

Conseguimos transferir informações de um componente para o outro através das props. Basta definirmos nas tags os valores que queremos passar e então utilizá-los dentro do componente acessando a propriedade this.props.nomeDaPropriedade

Exemplo

Acesse aqui

Agora é a vez de vocês!

Baseado no exemplo, transforme seus componentes para utilizar propriedades

Estados nos componentes

Conseguimos armazenar um estado dentro dos componentes. Um estado nada mais é do um conjunto de informações condizentes a um dado período no ciclo de vida de componente.

Exemplo

Acesse aqui

Agora é a vez de vocês!

Baseado no exemplo, faça com que a foto da sua aplicação seja renderizada de acordo uma url passada por meio de um input

Ciclo de vida

Conseguimos interceptar alguns pontos de ciclo de vida dos componentes para manipulá-los.

Exemplo

Acesse aqui

Agora é a vez de vocês!

Baseado no exemplo, faça uma aplicação que consome a API do GitHub e exibe as informações de dado usuário

Utilizem

Desafio

Objetivo

Refatore a aplicação de clima tempo da aula passada para utilizar componentes

Utilizem (caso não tenham)

O que vimos?

  • Como criar um projeto do zero React do zero
  • Subir o projeto para desenvolvimento
  • Criar um novo Componente
  • Incluir um Componente dentro do outro
  • Passar propriedades de um Componente para outro
  • Mudar o estado de um Componente

Materiais para estudo