ReactJS - Guia Completo de Introducao e Desenvolvimento Frontend

PROFESSOR ANDRÉ FARIA RUARO UNESC CIÊNCIA DA COMPUTAÇÃO PROGRAMAÇÃO WEB II Conteúdo 09 Desenvolvimento Frontend Introdução ao ReactJS Elevação de Estados CRUD com ReactJS Tópicos Especiais React O Reactjs é uma bibliotecaframework javascript voltada para a criação de interfaces de usuário na web Stateful todo funcionamento do framework é em torno de estados Renderização fragmentada apenas as partes da interface que sofrem alteração são atualizadas Baseado em componentes os elementos da interface podem ser encapsulados em componentes facilitando a abstração e reutilização de componentes Implementação gradual o React pode ser inserido gradualmente na aplicação através da adaptação dos componentes REACTJS INTRODUÇÃO AO REACT REACTJS INTRODUÇÃO AO REACT class Timer extends ReactComponent constructorprops superprops thisstate seconds 0 tick thissetStatestate seconds stateseconds 1 componentDidMount thisinterval setInterval thistick 1000 componentWillUnmount clearIntervalthisinterval render return div Segundos thisstateseconds div REACTJS ESTRUTURA REACT const titulo h1Reacth1 Apesar de lembrar as marcações do HTML a sintaxe anterior não representa HTML ou mesmo uma string Essa sintaxe é uma extensão do javascript chamada JSX utilizada com o objetivo de oferecer uma linguagem de template usada em conjunto com todo o poder do javascript O uso do JSX não é obrigatório ao trabalhar com o React porém permite maior praticidade no desenvolvimento e correção de erros JSX REACTJS ESTRUTURA REACT Um dos recursos úteis do JSX é permitir a inserção de variáveis dentro do conteúdo a ser renderizado const universidade UNESC const titulo h1Bem vindo à universidadeh1 Podemos inserir qualquer expressão javascript válida em JSX como funções e cálculos function contanome return nomelength const elemento pNúmero de letras contaTwitterp const soma divSoma 2 2div Sintaxe do JSX REACTJS ESTRUTURA REACT Você pode usar aspas para especificar atributos dentro das tags no JSX const menu nav posicao0nav const bemvindo div usuariocontanomeUsuariodiv Sintaxe do JSX REACTJS ESTRUTURA REACT Uma tag JSX pode conter elementos filhos Const pagina div navMenunav footerRodapefooter div No entanto é obrigatório que exista um único nó raiz para os elementos ISTO NÃO É PERMITIDO const pagina navMenunav footerRodapefooter Organização do JSX REACTJS ESTRUTURA REACT Por padrão toda classe precisa da declaração export default NomeClasse ao final da sua implementação de modo que possa ser importada para outros arquivos usando a declaração import NomeClasse from caminhoNomeClasse ES6 Importação React REACTJS ESTRUTURA REACT A utilização de classes exige a criação de estratégias para manipulação dos atributos já que por padrão as funções e métodos do javascript sobrescrevem o escopo da classe Dessa forma podemos usar as arrow functions para tornar essa tarefa mais transparente leiase menos dores de cabeça atualiza thissetState nome Ruaro ERRO atualiza thissetState nome Ruaro OK Arrow Functions no React REACTJS ESTRUTURA REACT A implementação tradicional de uma função também pode ser resolvida utilizando o comando bind constructorprops superprops thisatualiza thisatualizathis atualiza thissetState nome Bruce Arrow Functions no React REACTJS PRINCIPAIS CONCEITOS REACT Os métodos implementados na classe principal ReactComponent são constructorprops executado na construção do objeto render executado ao realizar a renderização componentDidUpdate executado após alguma atualização nos dados componentDidMount executado após o componente entrar no DOM componentDidUnmount executado após o componente ser removido do DOM Métodos da Classe React REACTJS PRINCIPAIS CONCEITOS REACT Podemos personalizar o comportamento de um componente React utilizando as props Dessa forma um botão formulário ou caixa de diálogo pode usar a mesma abstração para diferentes tipos de saída class Caixa extends ReactComponent render return Olá thispropsusuario const elemento div Caixa usuarioBruce Caixa usuarioAlice Caixa usuarioTed div Props do React REACTJS PRINCIPAIS CONCEITOS REACT Imprime respectivamente As props de um componente não podem ser sobrescritas Para realizar alterações no estado de um componente usaremos o conceito de state Props do React REACTJS PRINCIPAIS CONCEITOS REACT O state de um componente é simular às props porém é privado e totalmente controlado pelo componente podendo ser sobrescrito a qualquer momento inclusive por eventos Inicializando State js States no React thisstate nome Bruce Atualizando State js States no React thissetState nome Alice Nunca atualize diretamente um state usando thisstate novoestado pois isso pode ser anulado caso o setState seja executado em seguida States do React REACTJS PRINCIPAIS CONCEITOS REACT Assuma sempre que o state é privado import React from react class Relogio extends ReactComponent constructorprops superprops thisstate time new Date componentDidMount setInterval thissetState time new Date 1000 render return A hora atual é thisstatetime export default Relogio States do React REACTJS PRINCIPAIS CONCEITOS REACT No exemplo do anterior ao ser montado em na aplicação usando a tag Relogio os seguintes métodos serão executados O construtor de relógio será chamado inicializando o estado com o atributo time e a hora atual new Date Em seguida o React executa o método render para que o elemento A hora atual é thisstatetime seja renderizado no DOM Ao ser inserido no DOM o React chama então o método componentDidMount que cria um timer que será executado de 1 em 1 segundo O timer gerado executa a função thissetState atualizando o atributo time com a nova hora atual A atualização de estado faz com que o React execute novamente atualize a árvore DOM renderizando apenas o componente que foi atualizado States do React REACTJS PRINCIPAIS CONCEITOS REACT Dicas de Uso do State Não modifique um state usando thisstateusuario joaozinho use sempre thissetState usuario joaozinho Ao contrário o estado não será renderizado novamente States são atualizados de maneira assíncrona Evite usálos como contadores diretamente States são atualizados de maneira fragmentada pelo React Isso significa que um componente será atualizado apenas nos atributos que foram atualizados States do React REACTJS CRIANDO PROJETO Uma ótima maneira de iniciar um novo projeto com React sem necessidade de configurações adicionais é o script createreactapp Este script é mantido pelo facebook e permite inicializar um novo projeto rapidamente através do comando npx createreactapp nomeapp E em seguida podemos iniciar a execução do app usando npm start O createreactapp configura alguns pacotes que geralmente utilizamos no processo de desenvolvimento de interfaces baseadas no React como React JSX ES6 TypeScript Flow Babel ESLint e Git Criando projeto React REACTJS CRIANDO PROJETO Babel Javascript mgmcdermottvscodelanguagebabel React Simple Snippets burkehollandsimplereactsnippets React no VSCode EXERCÍCIO VAMOS TRABALHAR PWII 1 Exercício Ar Condicionado Implemente uma interface usando React para gerenciar um sistema de ar condicionado O sistema deve apresentar as informações sobre temperatura modo de funcionamento ventilar refrigerar aquecer e velocidade 1 2 e 3 permitindo alterar todas estas variáveis Cada informação deverá ser encapsulada em um único componente PWII 2 Exercício Lista de Computadores Implemente uma interface usando React que gere uma lista de computadores contendo hostname processador memoria armazenamento e estado a partir de um arquivo JSON A interface deve incluir ainda uma forma de adicionar e deletar computadores atualizando o arquivo JSON no servidor Toda atualização deverá ser realizada também no frontend BOM TRABALHO