DEV Community: Cristian Araujo

AWS Amplify + React: Criando e hospedando a aplicação

Cristian Araujo — Sat, 15 May 2021 04:41:27 +0000

A ideia dessa série de tutoriais é dar uma visão geral sobre a AWS Amplify, que é um conjunto de ferramentas e serviços que inclui um serviço de hospedagem na Web da Amazon. Para isso vamos criar uma simples aplicação em React para armazenar notas mentais, que terá autenticação, uma API GraphQL e com banco de dados e armazenamento de imagens.

Nesse tutorial vamos começar com a criação de uma aplicação React que será hospedado na AWS Amplify e ficará disponivel no domínio amplifyapp.com. Para isso, temos alguns pré-requisitos.

Pré-requisitos

Conta da AWS com acesso de administrador;
Node.js: Node.js v10.x ou posterior;
Yarn
Conta no GitHub
Git: os usuários do Windows precisarão instalar o Git;
Um editor de texto. Eu utilizarei o Visual Studio Code;

Criando a aplicação

Dando uma visão geral, o React é uma framework Web que permite aos desenvolvedores criar rapidamente aplicações de uma única página de desempenho usando JavaScript.

O caminho mais simples para criar uma aplicação React é usando o create-react-app. Para isso vamos rodar os seguintes comandos:

yarn create react-app amplifyapp
cd amplifyapp
yarn start

Criando repositório no GitHub

Agora vamos criar um repositório para armazenar o código da nossa aplicação. Você precisará de uma conta no GitHub para concluir esta etapa. Se você não tiver uma conta, inscreva-se aqui.

Crie um novo repositório nesse link
Inicialize o git e envie a aplicação para o repositório, com os comandos:

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m “initial commit”
git push origin master

Hospedando a aplicação na AWS Amplify

O AWS Amplify oferece um fluxo CI/CD baseado em Git para criar, implantar e hospedar aplicações SPA Web ou sites estáticos com serveless back-ends. Quando conectado a um repositório Git, o Amplify determina automaticamente as configurações de compilação para a estrutura do front-end e todos os recursos de back-end serveless configurados com a CLI do Amplify e implanta automaticamente as atualizações a cada deploy.

Muitos dos recursos do Amplify não estão disponíveis em todas as regiões, esse é a lista de regiões que oferecemos suporte na CLI hoje, 15/05/2021:
'us-east-1': 'US East (N. Virginia)',
'us-east-2': 'US East (Ohio)',
'us-west-2': 'US West (Oregon)',
'eu-west-1': 'EU (Ireland)',
'eu-west-2': 'EU (London)',
'eu-central-1': 'EU (Frankfurt)',
'ap-northeast-1': 'Asia Pacific (Tokyo)',
'ap-northeast-2': 'Asia Pacific (Seoul)',
'ap-southeast-1': 'Asia Pacific (Singapore)',
'ap-southeast-2': 'Asia Pacific (Sydney)',
'ap-south-1': 'Asia Pacific (Mumbai)',
'ca-central-1': 'Canada (Central)',

Para isso vamos abrir o Console de Gerenciamento da AWS, use suas credenciais para acessar. Quando estiver logado, digite “Amplify” na barra de pesquisa e selecione AWS Amplify para abrir o console de serviço.

Agora vamos conectar nosso repositório a AWS Amplify, isso vai permitir que a gente crie, implante e hospede nosso aplicativo na AWS.

No console selecione "Get Started" em "Deliver".

Selecione o GitHub e clique em Continue.

Faça a autenticação no GitHub e retorne ao Console do Amplify. Escolha o repositório e a branch master ou main e clique em Next.

Aceite as configurações de compilação padrão e clique em Next.

Revise os detalhes finais e selecione Save and Deploy.

Agora é só esperar o processo da esteira de deploy, e o Amplify vai gerar o link da nossa aplicação em produção.

Testando a esteira de CI/CD

Para testar a nossa esteira, vamos modificar a aplicação e subir para nosso repositório as mudanças.

Edite o arquivo src/App.js com o código abaixo e salve.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello from V2</h1>
      </header>
    </div>
  );
}

export default App;

Agora vamos commitar e subir as mudanças para o github.

git add .
git commit -m “changes for v2”
git push origin master

Depois que a compilação for concluída no console do AWS Amplify, vamos entrar na url gerada para visualizar o aplicativo atualizado.

Saideira

Conseguimos concluir nossa configuração inicial e subir nossa aplicação React com alguns cliques no AWS Amplify. No proximo artigos vamos instalar o CLI do Amplify localmente e iniciar nosso backend serveless. Até lá!

Configurando React do zero: Iniciando a estrutura do projeto

Cristian Araujo — Sat, 15 May 2021 02:51:21 +0000

Esse é o primeiro artigo de uma série que pretendo criar com os meus resumos e observações das aulas da RocketSeat. A ideia é que fique como lembrança para consultas futuras e também como apoio para iniciantes em React.

Para iniciar, criamos uma pasta que vai conter todos os projetos do curso, chamei de ignite-aula. Após isso vamos criar a pasta para o nosso primeiro projeto, vamos chama-la de 01-github-explorer, e entrar nela com o Visual Studio Code.

mkdir 01-github-explorer
cd 01-github-explorer
code .

Com nossa pasta criada, vamos fazer a primeira coisa que todo o projeto JS precisa ter, independente do framework, vamos inicializar o repositório criando o package.json. Temos algumas formas de criar esse arquivo, podemos usar o npm, com o npm init -y, ou o **yarn, que é como faremos agora.

yarn init -y

Caso você não conheça o package.json vai trazer as principais informações do projeto. O nome, a versão, qual o arquivo principal que vai ser executado, para o caso do nosso projeto ser uma biblioteca que outros projetos possam escalar, a licença, que informa se vai ser um código aberto e afins, mas o mais importante que vai existir nesse arquivo, são as dependências do nosso projeto, ou seja as bibliotecas de terceiros que utilizamos na nossa aplicação.

{
  "name": "01-github-explorer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Então vamos instalar nossa primeira biblioteca, que vai ser o React.

yarn add react

Podemos perceber que nosso arquivo mudou um pouco, agora nós temos a informação de que existe uma dependência no nosso projeto, no caso o React, e a versão que foi instalada. Não se preocupe se a versão estiver diferente, pois o React pode ter lançado uma nova versão desde o momento que escrevi esse post.

{
  "name": "01-github-explorer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.2"
  }
}

Podemos notar que um novo arquivo foi criado, o yarn.lock, e também uma nova pasta, a node_modules. A pasta node_modules vai tá presente em todos os projetos JS, assim como o package.json que falamos anteriormente, nela vai tá todo código das dependências que instalamos na nossa aplicação, como podemos ver na foto a pasta do React que instalamos agora a pouco.

Arquivos do projeto e package.json da biblioteca React

Mas você pode se perguntar, "porque temos mais outras pastas sendo que só instalei o **React?" isso ocorre porque o React também tem as suas dependências, como podemos ver na foto acima, e elas também são instaladas, assim como as dependências de suas dependências...

Mas como você pode ver, o React é uma biblioteca bem enxuta, precisa de poucas outras bibliotecas para funcionar.

Além do React, no nosso projeto vamos utilizar também o react-dom que é a forma como nós trabalhamos com React na web. A DOM, caso você não conheça é a arvore de elementos da nossa aplicação web, é um HTML convertido numa sintaxe de objeto JS podemos dizer. E essa biblioteca basicamente faz com que o React consiga se comunicar com a arvore de elementos do HTML, faz com que ele, insira ou apague novos elementos em tela e afins

Mas outra pergunta que você pode fazer pequeno gafanhoto é "porque essas bibliotecas são separadas?" e a resposta é: O React pode ser usado para outras casos, como para mobile com o React Native, e ai instalaríamos o react e o react-native no lugar do react-dom pois não vamos estar na web.

Com as principais bibliotecas instaladas, vamos criar nossa estrutura de pastas. Primeiro vamos criar a pasta src ou source onde vai ficar todo código criado por nós para nossa aplicação. Teremos uma outra pasta chamada public que será onde ficarão arquivou ou assets que serão públicos, como o index.html o ícone de favicon, o arquivo robot.txt que diz ao Google, quais paginas ele deve indexar e quais ele deve ignorar na nossa aplicação, qualquer arquivo que precise ser acessado diretamente do meio externo.

Pastas public e src criadas.

Dentro da nossa pasta public como falamos, vamos criar o nosso arquivo index.html e colocar uma estrutura básica de HTML 5 nele.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Github Explorer</title>
  </head>
  <body></body>
</html>

E por enquanto é só, no próximo artigo vamos continuar a construir a nossa aplicação.

Relembrando esse conteúdo são resumos e anotações de aulas do curso que recomendo super da RocketSeat. Espero que ajude alguém!

NLW#5: Voltando a estudar ReactJS

Cristian Araujo — Wed, 21 Apr 2021 23:01:32 +0000

A quase um ano migrei para um projeto Angular e tive que focar meus estudos nesse novo framework. Nas ultimas semanas resolvi voltar a estudar React, e nada melhor que voltar com um projetinho do #NLW5 da @rocketseat.

Tem sido muito gratificante ver como o React evoluiu nos últimos meses, principalmente com a chegada de novas ferramentas como o Next.js.

Estamos no meio da construção de uma plataforma de podcasts e o resultado esta ficando incrível. Agora é subir no foguete e continuar decolando!

Aprendendo React do zero - Configurando ambiente: Iniciando a estrutura do projeto

Cristian Araujo — Fri, 16 Apr 2021 00:05:51 +0000

mkdir 01-github-explorer
cd 01-github-explorer
code .

Com nossa pasta criada, vamos fazer a primeira coisa que todo o projeto JS precisa ter, independente do framework, vamos inicializar o repositório criando o package.json. Temos algumas formas de criar esse arquivo, podemos usar o npm, com o npm init -y, ou o yarn, que é como faremos agora.

yarn init -y

{
  "name": "01-github-explorer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Então vamos instalar nossa primeira biblioteca, que vai ser o React.

yarn add react

{
  "name": "01-github-explorer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.2"
  }
}

Arquivos do projeto e package.json da biblioteca React

Mas como você pode ver, o React é uma biblioteca bem enxuta, precisa de poucas outras bibliotecas para funcionar.

Pastas public e src criadas.

Dentro da nossa pasta public como falamos, vamos criar o nosso arquivo index.html e colocar uma estrutura básica de HTML 5 nele.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Github Explorer</title>
  </head>
  <body></body>
</html>

E por enquanto é só, no próximo artigo vamos continuar a construir a nossa aplicação.

Relembrando esse conteúdo são resumos e anotações de aulas do curso que recomendo super da RocketSeat. Espero que ajude alguém!

Quando usar Refs no React?

Cristian Araujo — Sat, 10 Apr 2021 05:02:06 +0000

Ao conhecer os "refs" pensamos que é algo ótimo e que deve ser usado a todo momento para facilitar o acesso de elementos e componentes. Porém, isso é um erro grave.

Ficar criando referências é algo custoso e consome memória. É muito mais simples, leve e até melhor para a manutenção e reutilização de código se você utilizar refs apenas em situações em que não há outra solução, como:

Executar "focus()" em um <input>;
Dar "play" ou "pause" em um <vídeo>;
Acessar o elemento <canvas> para desenhar;
Disparar animações imperativas;
Acessar elementos criados por uma outra biblioteca ou framework.

Fora essas situações, normalmente podemos evitar o uso de refs.

Por exemplo, ao invés de acessar o estado de um componente filho para alterar um dado dele, você pode passar dados ao filho pelas suas propriedades.

O elemento <dialog> do HTML exibe uma modal. Se você acessá-lo, poderá exibi-lo executando o método "showModal()" e escondê-lo executando "close()".

Porém, o <dialog> também pode ser controlado pelo atributo "open". Então é melhor criar uma variável no "state" para controlar o atributo "open" ao invés de criar um "ref" para executar "showModal()" e "close()".

A Saideira

Esse post foi inspirado no conteúdo lá da TreinaWeb. Recomendo o material deles!

Entendendo o Diffing Algorithm no React

Cristian Araujo — Sat, 10 Apr 2021 04:58:21 +0000

Fazer alterações diretamente no DOM pode comprometer a performance da sua aplicação se não for feita corretamente. Outros problemas também podem ocorrer como, por exemplo, o gerenciamento de event listeners adicionados à elementos que estão sendo adicionados ou removidos.

Com o React não precisamos nos preocupar com nada disso, e ele ainda lida com as alterações do DOM de maneira inteligente utilizando um algoritmo que faz uma análise em um DOM Virtual para saber exatamente onde as alterações são necessárias. Assim o React acessa o DOM o menor número de vezes possível.

É importante entender como o React funciona, pois isso pode te ajudar a evitar certas situações que podem levar a perda de performance.

Quando executamos o método "render()", uma árvore de elementos é criada. Quando alteramos props ou state de um componente, o "render()" irá retornar algo diferente. A inteligência do React permite que ele faça uma diferenciação rápida, pois analisar totalmente o código gerado em uma aplicação apenas para acessar o DOM um número mínimo de vezes também não seria viável, pois milhares de comparações teriam que ser feitas.

Comparando Elementos

Dois elementos diferentes provavelmente retornarão árvores de elementos diferentes.

O React primeiro compara os elementos que estão na raiz. Imagine a seguinte situação: temos um componente <ListaUsuarios /> que é removido da tela e no lugar dele é inserido um componente chamado <ListaProdutos />.

Obviamente o "render()" desses dois componentes retornarão conteúdo diferente, então neste momento o React nem se preocupa mais em fazer comparações. A árvore em questão é apagada e uma nova é construída do zero.

Isso acontece com qualquer tipo de elemento.

Então:

<div>
    <ListaProdutos />
</div>

<span>
    <ListaProdutos />
</span>

No exemplo acima mantivemos o componente <ListaProdutos />, mas o elemento a sua volta (<div> e <span>) são diferentes. Isso faria com que o React apagasse totalmente nosso <ListaProdutos /> e criasse um novo, mesmo que as propriedades e estados de <ListaProdutos /> não tivessem sido alterados.

Elementos do mesmo tipo

Quando a comparação chega a um lugar onde os elementos são do mesmo tipo, o React analisa os seus atributos. Se os atributos diferem, apenas eles serão atualizados e o resto continua intocado.

<div class="ativado" style={{color: ‘green’, fontSize: ‘14px’}}>
    <span>TreinaWeb</span>
<div>
<div class="desativado" style={{color: ‘red’, fontSize: ‘14px’}} >
    <span>TreinaWeb</span>
<div>

No exemplo acima temos o mesmo elemento (div), então apenas o que é diferente de atributo será alterado. O React é inteligente o suficiente para, inclusive, saber alterar apenas o "color" de "style" e manter o "fontSize" intocado.

Após fazer a diferenciação de um elemento, o React começa a verificar os elementos que estão dentro dele e o ciclo se reinicia, verificando se são elementos do mesmo tipo ou não.

Componentes do mesmo tipo

Quando um componente é atualizado a sua instância continua a mesma, então métodos como o "constructor()" e "componentDIdMount()" não serão executados novamente, já que são eventos disparados apenas na inicialização.

Métodos de atualização, como o "componentWillReceiveProps()" e "componentWillUpdate()" são chamados. O "render()" é executado novamente para que seu conteúdo seja comparado ao estado anterior para poder ser atualizado também, e lá dentro todo esse ciclo também se reinicia.

Diferença entre elementos filhos e chaves

Por padrão React irá analisar os elementos filhos e, ao encontrar uma diferença, fará as alterações necessárias.

Imagine a seguinte lista:

<ul>
    <li>Maria</li>
    <li>João</li>
</ul>

<ul>
    <li>Maria</li>
    <li>João</li>
    <li>Karen</li>
</ul>

No exemplo acima o React verá que o elemento raiz (ul) é o mesmo, então saberá que não precisa alterar nada e irá verificar os elementos filhos.

Ao chegar nos filhos verá que os dois primeiros <li> são idênticos, então não precisarão de alterações também. Agora temos um novo elemento, então ele simplesmente será inserido no final. Bem simples não é mesmo?

Mas e se o novo item tivesse sido colocado no começo da lista?

<ul>
    <li>Maria</li>
    <li>João</li>
</ul>

<ul>
    <li>Karen</li>
    <li>Maria</li>
    <li>João</li>
</ul>

Veja que agora o primeiro item é diferente do novo primeiro, o segundo é diferente do segundo e o João que antes já existia na lista agora será visto como um novo item, pois agora está em terceiro.

Isso fará com que o React pense que precisa fazer duas alterações e a inserção de um novo item (3 operações) ao invés de apenas inserir um item novo no começo (1 operação).

Então, como fazer para o React reconhecer que aqueles itens de antes eram os mesmos? É nesse momento que entram as chaves! Elas identificam cada um dos itens de uma lista como únicos e permitem que o React consiga identificar os itens.

<ul>
    <li key="11" >Maria</li>
    <li key="22" >João</li>
</ul>

<ul>
    <li key="33" >Karen</li>
    <li key="11" >Maria</li>
    <li key="22" >João</li>
</ul>

Agora o React é capaz de saber que o elemento com a chave "33" é o novo primeiro item e que os demais apenas foram movidos. Ao comparar esses itens pela chave o React perceberá que eles não sofreram nenhuma alteração e os deixará intactos.

Se isso já é ótimo para essa lista simples com três itens, imagine em uma aplicação real, onde teremos listas muito maiores com componentes bem mais complexos!

Por isso que utilizar o îndice do elemento no Array como chave é ruim, pois o índice muda conforme modificamos o Array, fazendo com que essas chaves não tenham serventia nenhuma para o React reconhecer um elemento.

<ul>
    <li key="0" >Maria</li>
    <li key="1" >João</li>
</ul>

<ul>
    <li key="0" >Karen</li>
    <li key="1" >Maria</li>
    <li key="2" >João</li>
</ul>

Veja que nesse exemplo estamos usando o índice dos elementos no Array. Eles acabaram ficando com a chave diferente. Maria antes tinha a chave 0 e agora está com a chave 1, fazendo o React reconhecer como um elemento diferente, o que o fará pensar que todos os elementos mudaram, tendo novamente que fazer três operações para atualizar os elementos.

Outro erro comum é utilizar números aleatórios, como os gerados por "Math.random()", como chave. Lembre-se que isso irá atrapalhar o funcionamento do React e prejudicando a performance da aplicação.

A Saideira

Esse post foi inspirado no conteúdo lá da TreinaWeb. Recomendo o material deles!

A natureza assíncrona do setState()

Cristian Araujo — Sat, 10 Apr 2021 04:53:24 +0000

Usar o console.log() para imprimir valores é um item comum na depuração. No entanto, isso não funciona muito bem quando o código é executado de forma assíncrona. Um exemplo é o código a seguir:

handleCounterIncrement = () => {
  const { counter } = this.state;
  console.log(`Before update: ${counter}`);
  this.setState({ counter: counter + 1 });
  console.log(`After update: ${counter}`);
};

Você com certeza já deve ter visto algo assim não é? E por que isso não funciona? As chamadas setState() são assíncronas. Não há garantia de que o código fornecido seja executado em ordem. Isso pode levar a resultados como este:

As duas chamadas do console.log() são executadas antes da execução de setState(). Assim, ele imprime o valor do estado anterior duas vezes. Se você deseja verificar o valor do seu estado antes e depois de chamar setState(), passe uma função de callback como segundo parâmetro dentro de setState().

handleCounterIncrement = () => {
  const { counter } = this.state;
  console.log(`before update: ${counter}`);
  this.setState({ counter: counter + 1 }, () => {
  console.log(`after update: ${this.state.counter}`);});
};

A função de callback será executado após a conclusão de setState(), fornecendo um comportamento síncrono para o seu console.log().

A Saideira

Esse artigo foi inspirado num artigo do Jeremy Aw, recomendo muito da uma olhada nas postagens dele!

Até a próxima!

Manipulando múltiplos campos em um formulário React

Cristian Araujo — Sat, 10 Apr 2021 04:49:53 +0000

Supondo que você tenha um formulário com vários tipos de entrada input, textarea, select e afins, podemos imaginar que deveríamos criar uma função de change para cada um deles.

Porem podemos melhorar isso criando apenas uma função global que recebe o evento e faz a mudança a partir do tipo.

O componente

Temos o componente a seguir e precisamos controlar o estado a partir das mudanças dos campos do formulário.

import React, { Component } from 'react';

class MyForm extends Component{
    constructor(props){
        super(props);

        this.state = {
            name: '',
            fruit: 'orange',
            message: ''
        }

        this.fruits = [
            {'name': 'Apple', 'value': 'apple'},
            {'name': 'Banana', 'value': 'banana'},
            {'name': 'Orange', 'value': 'orange'}
        ];
    }

    render(){
        const { state } = this;
        return (
            <form>
                <div>
                    <label>
                        Name:
                        <input type="text" name="name" value={state.name} onChange={} /> {state.name}
                    </label>
                </div>
                <div>
                    <label>
                        Fruit:
                        <select value={state.fruit} name="fruit" onChange={}>
                            {
                                this.fruits.map(fruit => <option value={fruit.value} >{fruit.name}</option>)
                            }
                        </select>
                    </label>
                </div>
                <div>
                    <label>
                        Message:
                        <textarea name="message" value={state.message} onChange={} />
                    </label>
                </div>
                <input type="submit" value="Enviar" />
            </form>
        )
    }
}

export default MyForm;

A função

Podemos então criar uma função handleChange que receba como parâmetro um evento e a partir disso faça a mudança do estado correto.

  handleChange(event) {
    const { type, name, checked, value } = event.target;

    const newValue = type === "checkbox" ? checked : value;

    this.setState({
      [name]: newValue,
    });
  }

Foi necessário criar um verificador type === "checkbox" ? checked : value; para que nos casos onde o tipo é checkbox o valor seja pego corretamente.

Resultado

Depois de criado precisamos colocar a função handleChange no onChange de cada componente.

Não esquecer de dar um bind na função para trabalharmos com o escopo correto.

import React, { Component } from "react";

class MyForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      fruit: "orange",
      message: "",
    };

    this.fruits = [
      { name: "Apple", value: "apple" },
      { name: "Banana", value: "banana" },
      { name: "Orange", value: "orange" },
    ];

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { type, name, checked, value } = event.target;

    const newValue = type === "checkbox" ? checked : value;

    this.setState({
      [name]: newValue,
    });
  }

  render() {
    const { state } = this;
    return (
      <form>
        <div>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={state.name}
              onChange={this.handleChange}
            />{" "}
            {state.name}
          </label>
        </div>
        <div>
          <label>
            Fruit:
            <select
              value={state.fruit}
              name="fruit"
              onChange={this.handleChange}
            >
              {this.fruits.map((fruit) => (
                <option value={fruit.value}>{fruit.name}</option>
              ))}
            </select>
          </label>
        </div>
        <div>
          <label>
            Message:
            <textarea
              name="message"
              value={state.message}
              onChange={this.handleChange}
            />
          </label>
        </div>
        <input type="submit" value="Enviar" />
      </form>
    );
  }
}

export default MyForm;

A Saideira

Para mais dicas como essa, não deixa de acompanhar o nosso blog e me seguir nas redes sociais!

Até a próxima!

E o React? Parte 3

Cristian Araujo — Sat, 10 Apr 2021 04:38:52 +0000

Essa série de posts é resumo sobre o que é React que fiz durante as aulas da TreinaWeb em 2020.

As ultimas partes desse tutorial podem ser encontradas aqui:

Continuando a nossa saga sobre React do curso da TreinaWeb, vamos aprender um pouco sobre alguns conceitos mais avançados.

React Transition Group

Uma biblioteca muito utilizada para ter mais controle das suas animações e criar transições com React é o React Transition Group.

Seu código é bem leve, praticamente não influenciando no tamanho da sua aplicação.

Para começar a utilizar, precisamos instalar com o comando:

$ npm install react-transition-group --save
// or
$ yarn add react-transition-group

Com ele nós teremos três componentes: Transition, CSSTransition*e *TransitionGroup.

Transition

Componente utilizado para se gerenciar o estado de uma animação.

Devemos passar as propriedades "in" (booleano, que trata se a animação está entrando ou saindo) e "timeout" (numérico, tempo em milissegundos da animação).

<Transition in={true} timeout={300} >
        {(status) => (
          <div>{status}</div>
        )}
</Transition>

São 4 estados no total:

entering;
entered;
exiting;
exited.

Propriedades do Transition

in- indica se a animação está ou não ativa;
timeout- indica o tempo da animação;
appear- indica se queremos animação de entrada logo que a tela carregar;
unmountOnExit- indica se um elemento deve ser removido do DOM ao sair;
mountOnEnter- indica se um elemento já deve ser inserido no DOM quando a tela carregar e ele ainda não tiver entrado.

Eventos do Transition

onEnter;
onEntering;
onEntered;
onExit;
onExiting;
onExited.

CSSTransition

Componente que aplica classes automaticamente em seu elemento filho. Recebe as mesmas propriedades e eventos do componente Transition.

Passamos um nome padrão de classe pela propriedade "classNames". Também podemos customizar cada um dos estados.

Os estados disponíveis para customização são:

appear;
appearActive;
enter;
enterActive;
enterDone;
exit;
exitActive;
exitDone.

TransitionGroup

Componente que serve para grupos de animações. Nos dispensa a necessidade de controlar a propriedade "in", que será controlada automaticamente conforme um elemento for inserido ou removido.

React Router

Até agora vimos como criar componentes e utilizar apenas uma tela. Mas claro que quando estivermos criando uma aplicação de verdade necessitaremos de mais de uma tela.

Precisamos então começar a criar views, e para gerenciar estas views precisamos de um router.

React é todo baseado em componentes, e um método simples seria criar um componente que seria um container da aplicação inteira, e conforme mudássemos o seu status, ele exibiria uma determinada view, que seria um outro componente.

Para facilitar a nossa vida, existe o React Router, uma biblioteca que nos ajuda a gerenciar views, feita especialmente para trabalhar com o React ou React Native.

Instale com o comando:

$ npm install --save react-router-dom

Usando o React Router

Use o componente <BrowserRouter>como contêiner da aplicação.

Use o componente <Link to="caminho"/>para redirecionar o usuário ao clicar.

Use o componente <Route path="caminho"component={Componente} />para indicar o componente que será exibido quando determinado caminho for acessado.

Para passar parâmetros na URL, basta usar ":" no path junto ao nome da variável (<Route path="caminho/:variavel"component={Componente} />).

A variável ficará acessível dentro de "params" do objeto "match" que será inserido nos "props" dos componentes passados aos componentes <Route>.

Para garantir que apenas um componente seja renderizado, utilize o componente <Switch>.

Evitando mudar de View

Utilize o componente <Prompt>. A propriedade "message" recebe uma função que retorna uma mensagem a ser exibida. A propriedade "when" recebe um valor true ou false. Quando true perguntará ao usuário se ele realmente quer ir a outra view caso o endereço mude.

<Prompt
          when={true}
          message={location =>
            `Tem certeza de que deseja ir para ${location.pathname} ?`
          }
/>

Hooks do React Router

useHistory: retorna um objeto para navegação;
useLocation: retorna um objeto com informações da URL atual;
useParams: retorna um objeto com parâmetros presentes na URL;
useRouteMatch: retornar se estamos em uma determinada rota.

Code Splitting e Lazy Loading

Para manter uma boa organização é sempre bom mantermos apenas um componente em cada arquivo.

A maioria das ferramentas de empacotamento como Webpack juntam todos estes arquivos em um só arquivo minificado. Isso pode ser muito bom, pois faz a aplicação ser carregada toda de uma só vez dentro de uma única requisição, deixando o carregamento de toda a aplicação mais rápido.

Porém, caso sua aplicação seja grande, carregar tudo de uma única vez não é o mais recomendado, pois teremos um único arquivo muito grande, portanto, demorará mais para ser carregado, prejudicando a experiência do usuário ao entrar na aplicação.

Nestes casos é recomendado que partes da aplicação sejam separados em arquivos menores. A parte principal será carregada na inicialização e, como separamos o código em outros arquivos, este arquivo principal será menor, carregando mais rapidamente.

As demais partes nós podemos fazer com que sejam carregadas apenas quando necessárias. Por exemplo, se um usuário não entrar na rota "/about" não precisamos carregar os arquivos responsáveis por esta view.

Teremos arquivos menores sendo rapidamente carregados apenas quando forem necessários.

Carregamentos feitos apenas quando necessários são chamados de Lazy Loading (carregamento preguiçoso)

Se você utiliza o "create-react-app", ele já tem o Webpack configurado para isso. Vamos ver melhor como funciona o Code-Splitting e Lazy Loading com React.

Code Splitting

Divisão do código em vários arquivos

Lazy Loading

Carregamento de arquivos apenas quando necessários.

React.lazy() e

Utilize o React.lazy() para carregar componentes apenas quando necessários.

const TextCounter = React.lazy(() => import('./components/text-counter'));

O componente deve estar dentro do componente <Suspense>, ao qual indicamos um componente a ser exibido enquanto o módulo com o componente carregando não terminar de ser carregado.

<Suspense fallback={<div>Loading...</div>} >
   <TextCounter />
</Suspense>

Loadable Components

Loadable Components é uma biblioteca que facilita o carregamento dinâmico de componentes. Para instalar execute:

$ npm install --save @loadable/component

import loadable from '@loadable/component';
const Index = loadable(() => import('./views/index'));

O Loadable Components não exige a presença do <Suspense>.

Por que Tipar dados?

Tipar dados significa que estaremos indicando se um dado é uma string, número, etc.

Tipar dados nos permite identificar certos problemas até mesmo antes de executarmos nosso código, nos ajudando a melhorar e acelerar nosso fluxo de trabalho.

O JavaScript não oferece um tipo de tipagem estática, então precisamos de outras ferramentas para nos possibilitar isso.

Hoje em dia, por causa do Angular, a forma mais comum de se trabalhar com tipagem no JavaScript é usando o TypeScript, mas também temos o Flow, uma ferramenta criada pelo Facebook e muito utilizada com React para fazer a verificação de tipagem.

Flow

Ferramenta criada pelo Facebook, normalmente usada com React, para se trabalhar com tipagem no JavaScript.

Instalação do Flow

Execute:

$ npm install --save-dev flow-bin

Inclua o comando "flow" : "flow" nos scripts do "package.json"
Crie o arquivo de configuração ".flowconfig" executando o comando:

$ npm run flow init

Adicione a notação "// @flow" no início dos arquivos que quer que o Flow analise
Execute o Flow com o comando:

$ npm run flow

Tipando Dados

Declare um "type" e indique o tipo do dado após ":". Caso seja um objeto ou classe, utilize generics (<>).

type Props = {
  name?: string,
  age: number,
  isActive: boolean,
  nameList: Array<string>
}
class App extends Component <Props>  {

}

Testes Automatizados

Automatização de testes de software são basicamente funções que escrevemos que tem como objetivo executar funcionalidades do nosso código e verificar se ocorre um resultado esperado. Do contrário, provavelmente alguma função não foi bem escrita e pode gerar algum erro no nosso software.

Automatizamos os testes porque um código executando testes é bem mais rápido do que uma pessoa testando.

O maior motivo é que quando alteramos qualquer detalhe em nosso código, o sistema todo deve ser testado novamente para garantir que tudo está bem. Raramente teremos um código que só é usado em um lugar. Normalmente ele é usado em uma função que é usada por outra função que é responsável por algum dado que outra função precisa, etc.

Para uma pessoa executar todos os testes do sistema a cada alteração levaria muito tempo, e cada código criado precisa de novos testes, então a pilha de testes só tende a aumentar conforme o software aumenta.

Para testar aplicações feitas com React normalmente usamos o Jest e Enzyme.

Jest é uma ferramenta de testes criada pelo Facebook, utilizada para testar seus códigos JavaScript incluindo aplicações feitas com React.

O Jest é rápido e utiliza workers para maximizar a performance, executando vários testes paralelamente.

O Enzyme é uma ferramenta criada pela Airbnb para facilitar os testes de componentes criados com React.

Sua API é intuitiva e flexível, se inspirando na API de manipulação de DOM do jQuery.

Jest

Ferramenta criada pelo Facebook para testar código JavaScript.

Enzyme

Ferramenta criada pela Airbnb para testar componentes criados com React.

Preparando o Enzyme

Instale as dependências com:

$ npm i enzyme enzyme-adapter-react-(numero da versão do react) react-test-renderer

Crie um arquivo de configuração para o Enzyme chamado "src/setupTests.js".

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

Exemplo de um arquivo de teste:

import React from 'react';
import { shallow } from 'enzyme';
import ClickCounter from './ClickCounter';

it('ClickCounter tenha o texto alterado apos o clique', () => {
    const meuComponente = shallow(<ClickCounter />);

    expect(meuComponente.find('#checkStatus').text()).toEqual('OFF');
    meuComponente.find('input').simulate('change');
    expect(meuComponente.find('#checkStatus').text()).toEqual('ON');
})

it('ClickCounter deve ter o total de cliques igual a 2', () => {
    const meuComponente = shallow(<ClickCounter />);

    meuComponente.find('input').simulate('change').simulate('change');
    expect(meuComponente.state().totalClicks).toEqual(2);
})

Internacionalização

Em informática chamamos de "Internacionalização" quando desenvolvemos ou adaptamos um software para que ele se adapte a outras culturas, países, línguas, etc.

Pense nas datas:

No Brasil usamos o formato "dia-mês-ano", como 31/12/2020;
Nos Estados Unidos usamos o formato "mês-dia-ano", como 12/31/2020;
No Japão usamos o formato "ano-mês-dia", como 2020/12/31.

Quando falamos de números, no Brasil separamos as casas decimais com vírgula. A cada três algarismos costumamos colocar um ponto para facilitar a leitura, como: "1.000,25".

Já nos Estados Unidos é ao contrário. Então o mesmo número ficaria como "1,000.25".

Caso a nossa aplicação precise ser usada em outros países, alcançando um público maior, precisamos de um modo que facilite a adaptação de itens como os dos exemplos acima. Assim, teremos apenas uma adaptação das mensagens do sistema ao invés de ter que desenvolver uma outra aplicação para um determinado país.

Chamamos a Internacionalização (internationalization) de i18n, pois são as primeiras e últimas letras da palavra com o número de letras entre elas.

Language Tags e Localização

"Language Tags" é o nome que damos às marcações que usamos para identificar uma língua. Muitas também permitem que você especifique o país ou região que usa essa língua.

Um exemplo é a famosa "en-US", que indica o inglês usado nos Estados Unidos.

Outro que você provavelmente pode ter visto por aí é o "pt-BR", que indica o português do Brasil, diferente do "pt-PT", que indica o português de Portugal.

React Intl

Biblioteca criada pelo Yahoo! para se trabalhar com internacionalização no React.

Instale executando:

$ npm install --save react-intl

Importe uma língua de "react-intl/locale-data/{tag language}" e registre-a com a função "addLocaleData()".

Utilize como container o componente <IntlProvider> , que recebe as propriedades "locale" e "messages".

Formatações com o React Intl

<FormattedNumber 
            value={123456789.12} 
            minimumFractionDigits={2}
            maximumFractionDigits={2} 
/>
<FormattedDate value={new Date()} />
<FormattedTime value={new Date()} />
<FormattedRelative value={new Date()} />
<FormattedMessage id="app.hi" description="hi message" defaultMessage="Hello web developers!" />
<FormattedMessage
            id='app.clicks'
            description='quantidade de cliques'
            defaultMessage='Olá, você tem {totalClicks, plural,
                =0 {nenhum clique}
                one {# clique}
                other {# cliques}
            }.'
            values={this.state}
        />
<FormattedMessage values={this.state} id="app.select" description="selecao de palavras" defaultMessage="
        {sexo, select,
            masculino {Ele}
            feminino {Ela}
            other {Alguém}
        } está vindo.
        " />

Exemplo:

import React, { Component } from 'react';
import './App.css';

import enLocaleData from 'react-intl/locale-data/en';
import jaLocaleData from 'react-intl/locale-data/ja';
import ptLocaleData from 'react-intl/locale-data/pt';
import { addLocaleData, IntlProvider, FormattedMessage } from 'react-intl';

import messages from './i18n/messages';

addLocaleData([...enLocaleData, ...jaLocaleData, ...ptLocaleData]);

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      currentLang: 'pt'
    }

  }

  render() {
    const { state } = this;
    return (
      <div>
        <IntlProvider locale={state.currentLang} messages={messages[state.currentLang]} >
          <div>
            <FormattedMessage 
              id="app.hi"
              description="saudacao"
              defaultMessage="Hi"
            />
            <br />
            <FormattedMessage 
              id="app.bye"
              description="despedida"
              defaultMessage="Bye"
            />
          </div>
        </IntlProvider>
      </div>
    );
  }
}

export default App;

Renderização no Servidor

Quando as aplicações web começaram a ser feitas, era comum a produção do HTML no servidor. Isso porque o JavaScript ainda era complicado e com poucas funcionalidades. E para piorar, as funcionalidades que o JavaScript tinha não funcionavam exatamente da mesma maneira em todos os navegadores.

Então, era muito melhor produzir o HTML no servidor e enviá-lo ao cliente. Caso o cliente fizesse alguma ação, esta ação era enviada ao servidor e o servidor enviava uma tela nova para o cliente.

Mas isso também não é muito prático, e é bem desconfortável ter a tela inteira sendo atualizada e baixada a cada pequena ação.

Então surgiu o AJAX, onde fazemos requisições assíncronas com JavaScript e atualizamos apenas uma pequena parte da aplicação.

Com a evolução do JavaScript foram surgindo bibliotecas e frameworks para desenvolvermos aplicações inteiras no lado do cliente. Isso revolucionou o desenvolvimento web.

Porém, nem tudo são flores com essas aplicações feitas inteiramente com JavaScript. Pense nos motores de busca como Google ou redes sociais como Facebook. Eles possuem códigos que entram em nossas páginas e fazem uma leitura do HTML.

As aplicações modernas geram o HTML pelo JavaScript assim que chegam no cliente, então certos serviços que não executam JavaScript enxergam nossas aplicações assim:

Isso mesmo! Um HTML vazio. Essa é a aparência de uma aplicação React. Caso a gente precise que serviços como motores de busca ou redes sociais enxerguem o conteúdo de nossas aplicações, precisamos que o servidor já envie o HTML pronto. Isso ajuda o SEO e, como o HTML já estará pronto, o usuário não precisa que a aplicação seja carregada e iniciada para enxergar os primeiros elementos na tela, passando a impressão de que a página carregou mais rapidamente.

Mas não queremos voltar a fazer nossas aplicações inteiramente no servidor. Então a solução seria poder iniciar a criação do HTML que seria feito pelo nosso framework/biblioteca no cliente já no servidor. Ao carregar tudo no navegador, a aplicação continua com o seu comportamento comum. Essa é a ideia do que chamamos de Aplicações Universais!

Então, entre as vantagens temos:

Performance - a aplicação já virá com o HTML preparado, fazendo parecer que ela iniciou mais rapidamente;
SEO - os motores de busca poderão ler o conteúdo do HTML ao invés de ver um arquivo vazio;
Crawlers de Redes Sociais - redes sociais poderão ler as meta tags com informações das nossas páginas.

Resumindo: aprenderemos a renderizar nossa aplicação React no servidor. Assim que a aplicação terminar de carregar, ela se torna uma aplicação React comum como conhecemos, com as views sendo geradas no próprio cliente.

Aplicação Universal

Aplicação que tem seu código gerado tanto no cliente quanto no servidor.

Electrode

Ferramenta para criar aplicações universais com React desenvolvida pelo Walmart.

Instale com o comando:

$ npm install -g electrode-ignite xclap-cli

E gere uma nova aplicação com:

$ ignite generate-app

Inicie um servidor com:

$ clap dev

E faça build com:

$ clap build

A Saideira

Esses conteúdo é fruto de algumas aulas do curso de React da TreinaWeb, conteúdo muito interessante!

E o React? Parte 2

Cristian Araujo — Sat, 10 Apr 2021 04:34:07 +0000

Essa série de posts é resumo sobre o que é React que fiz durante as aulas da TreinaWeb em 2020.

A primeira parte desse tutorial pode ser encontrada aqui: E o React? Parte 1

Continuando a nossa saga sobre React do curso da TreinaWeb, vamos desmistificar os componentes.

O que são Componentes?

Os componentes são elementos de interface, assim como inputs e buttons. Eles têm uma aparência e comportamento próprios. Podemos configurá-los, passar valores e o que mais precisarmos.

Mas, para criar aplicações, temos que criar elementos de interface mais complexos, como menus, modais, sliders, etc.

E se pudéssemos criar nossos próprios elementos para poder reutilizá-los em qualquer lugar?

Imagine que queremos um componente que seja uma simples caixa de texto, mas que logo abaixo ela exiba o total de caracteres digitados. Podemos, por exemplo, criar este componente, e então reutilizá-lo em qualquer parte da nossa aplicação e até em outras aplicações.

Poderíamos chamá-lo de TextCounter. Para utilizá-lo, bastaria escrever o simples código:

<TextCounter />

Bem simples não? Dentro dele já está todo o seu comportamento, então a partir do momento em que um componente está pronto, não precisamos mais nos preocupar em como ele funciona. Apenas o chamamos.

Criando componentes com funções

Crie uma função com o nome do componente e retorne os elementos.

function FunctionComponent(){
   return <h1>Ola Web Developers!</h1>;
}

Criando componentes com classes

Crie uma classe estendendo a classe Component fornecida pelo React. Retorne os elementos no método "render()".

class ClassComponent extends React.Component {
  render() {
    return <h1>Ola web developers!</h1>;
  }
}

Utilizando componentes

Chame o componente pelo nome como se fosse uma tag. Todas as tags devem ser fechadas.

<ClassComponent></ClassComponent>

<ClassComponent />

Acessando componentes de Objetos

Podemos ter componentes dentro de objetos:

const MeusComponentes = {
   FunctionComponent: function(){
      return <h1>Ola web developers!</h1>
   }
}

Para acessar:

<MeusComponentes.FunctionComponent />

Ou:

const nome = "FunctionComponent";
const ComponenteEscolhido = MeusComponentes[nome];

<ComponenteEscolhido />

Propriedades

Dados que passamos aos componentes pela tag (<Component nome="Akira" />).

Eles não podem ser alterados. São acessados pela propriedade "props".

Propriedades e o Operador Spread

Você pode passar várias propriedades de uma só vez passando um objeto com o operador spread.

<User {...dados}  />

Estados

Dados internos de cada componente que podem ter seu valor alterado. São acessados pela propriedade "state".

Alterando Estados

Utilize o método "setState()" para alterar os estados de um componente. Este método reexecuta o "render()" para atualizar a view, então não execute "setState()" dentro de "render()" para não causar um looping infinito.

this.setState({
    time: 5
})

this.setState(function(state, props){
    return {
        time: state.time + 1
    }
}

Lista de Elementos

A maneira mais comum de se criar uma lista de elementos é usando o ".map()".

<ul>
    {minhaLista.map( pessoa => 
        <li>
          {pessoa .nome} - {pessoa .idade} anos
        </li> 
    )}
</ul>

Keys

Devemos criar chaves únicas para identificar cada elemento de uma lista.

<ul>
    {minhaLista.map( pessoa => 
        <li key={pessoa.id}>
          {pessoa .nome} - {pessoa .idade} anos
        </li> 
    )}
</ul>

Parâmetros de Funções

Podemos usar o ".bind()" para passar parâmetros para as funções

<ul>
    {minhaLista.map( pessoa => 
        <li 
          onClick={this.sayMyName.bind(this, pessoa)} 
          key={pessoa.id} 
        >
          {pessoa .nome} - {pessoa .idade} anos
        </li> 
    )}
</ul>

Fragmentos

Podemos utilizar Fragmentos para retornar vários elementos de uma só vez sem precisar criar Arrays ou elementos adicionais que servirão de containers.

return <React.Fragment>
    <li key="0" >Karen</li>
    <li key="1" >Maria</li>
    <li key="2" >João</li>
</React.Fragment>

Também podemos escrever da forma simplificada:

return <>
    <li key="0" >Karen</li>
    <li key="1" >Maria</li>
    <li key="2" >João</li>
</>

O que são Elementos Filhos?

Até o momento nós só criamos componentes e os utilizamos na raiz da aplicação. Mas podemos ir além disso, pois o React permite que a gente trabalhe facilmente com elementos filhos.

Elementos filhos são os elementos que vão dentro das tags de outro elemento.

<MeuComponente>
   <MeuTitulo />
</MeuComponente>

Até mesmo se você escrever um texto, esse texto será considerado filho do elemento no qual escrevemos.

<MeuComponente>
   Texto
</MeuComponente>

Isso é muito útil quando queremos, por exemplo, permitir que parte de um componente tenha uma estrutura customizada. Ao invés de passar a estrutura do JSX por propriedade, passamos como elementos filhos entre as tags, deixando a aparência do código mais legível e similar ao HTML.

Acessando Elementos Filhos

Para acessar os elementos filhos de um componente acessamos "this.props.children".

Ao acessar um elemento filho podemos pegar o seu tipo pelo "type" e utilizar isso como se fosse uma tag. Assim poderemos modificar e adicionar propriedades.

{
   this.props.children.map(element => <element.type {...element.props} ></element.type>)
}

Referências - Refs

Referências servem para acessarmos elementos ou componentes. Criamos referências com "React.createRef()" e passamos na propriedade "ref" de um elemento ou componente.

this.myRef = React.createRef();
<div ref={this.myRef} ></div>

Utilize refs apenas quando indispensável.

Event Emitter

Podemos permitir a comunicação entre componentes com Event Emitters.

import Events from 'events'; // importa o "events" do Node.js
const Channel = new Events.EventEmitter(); // instancia um emissor de eventos

Comece a ouvir eventos com "Channel.on(‘nomeDoEvento’, função)". Inicie os eventos no "componentDidMount()".

Pare de ouvir os eventos com "Channel.removeListener(‘nomeDoEvento’, função)". Faça isso no "componentWillUnmount ()".

Capturando Erros dos Filhos

Podemos capturar erros vindos dos componentes filhos com o método "componentDidCatch(error, info)" e com a função estática:

    static getDerivedStateFromError(error) {
        return {
            hasError: true
        }
    }

Use static getDerivedStateFromError()para renderizar uma UI alternativa após o erro ter sido lançado. Use componentDidCatch()para registrar informações do erro.

Portais

Portais (Portals) nos permitem renderizar um elemento no lugar que quisermos, mesmo que este local esteja fora da nossa árvore de elementos ou fora da nossa aplicação React.

Um bom exemplo são os vídeos do Facebook. Quando estamos assistindo a um vídeo de um post e rolamos a página, um player flutuante com o nosso vídeo aparece, nos permitindo continuar assistindo o vídeo enquanto navegamos. O vídeo continua de onde parou.

Poderíamos fazer isso com os Portais do React.

Em qualquer situação em que você precise renderizar um componente em qualquer outro lugar, seja dentro ou fora da sua aplicação, criar um Portal é uma boa solução.

Criando Portais

Execute "ReactDOM.createPortal(element, container)".

O primeiro parâmetro é o componente a ser renderizado e o segundo é o elemento que receberá o componente.

Contexto (Context)

Quando aprendemos a criar elementos filhos, vimos que podemos passar propriedades ao elementos para compartilhar dados. Porém, isso pode ser trabalhoso caso a gente precise compartilhar um certo grupo de dados entre vários componentes ao redor de toda a nossa aplicação.

Contextos (context) nos permitem passar dados aos componentes sem precisar passá-los manualmente pelas propriedades de cada componente.

Usando Contextos

Crie um contexto com "React.createContext()". Você pode passar como parâmetro um valor inicial padrão.

const MyContext = React.createContext();

A raiz da árvore de componentes que utilizarão esse contexto devem estar dentro de <MyContext.Provider>, o qual recebe uma propriedade "value" com os valores que serão passados aos componentes.

Os componentes que utilizarão o contexto devem receber este contexto em sua propriedade estática "contextType". Assim, em uma árvore com vários contextos, seu componente saberá de qual contexto pegar os dados.

React DevTools

Ferramenta que nos permite analisar os componentes, suas propriedades e estados, facilitando debugar as aplicações feitas com React ou React Native.

Instalação da Extensão para Navegadores

Você pode instalar a extensão para Chrome ou Firefox:

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/

Instalação do pacote do NPM

Você também pode usar a React DevTools diretamente do Node.js. Para instalar, basta executar o comando "$ npm install -g react-devtools"

Execute no terminal o comando "$ react-devtools" e insira no <head> da sua aplicação a seguinte tag:

<script src="http://localhost:8097"></script>

A Saideira

Esses conteúdo é fruto de algumas aulas do curso de React da TreinaWeb, conteúdo muito interessante! E essa série continua!

E o React? Parte 1

Cristian Araujo — Sat, 10 Apr 2021 04:28:13 +0000

Essa série de posts é resumo sobre o que é React que fiz durante as aulas da TreinaWeb em 2020.

O React é uma biblioteca desenvolvida pelo time do Facebook com o intuito de se aplicar o conceito de componentização durante o desenvolvimento de uma aplicação web. Isso quer dizer que, com o auxílio do React e do JavaScript, você poderá desenvolver componentes reutilizáveis na interface de sua aplicação web. Isso certamente acelera e facilita o trabalho que o desenvolvedor teria normalmente para desenvolver a interface da aplicação web.

Essa ideia de componentização na verdade não é nova. Ela já era usada há muitos anos no desenvolvimento de aplicações Desktop. Porém, no começo da Internet, o desenvolvimento Web era totalmente voltado a sites simples, criados para exibir informações estáticas.

O próprio Facebook define o React como sendo "uma biblioteca declarativa, eficiente e flexível baseada em JavaScript para construção de interfaces".

Como você pode reparar, o React se baseia na ideia de criarmos componentes que podem ser reutilizados em toda a aplicação e até em outras aplicações.

Veja a imagem acima. Ela apresenta um menu de navegação. Imagine criar um componente que contenha todo o código necessário para esse menu e, quando quisermos utilizá-lo, bastaria chamá-lo por uma tag criada por nós mesmos como <MeuMenu />. Assim fica fácil reutilizá-lo onde quisermos, além da nossa View ficar mais limpa ao invés de várias <div> para todos os lados.

O React tem boa performance, pois evita acessar diretamente o DOM.

Como o objetivo do React é focar na criação de componentes, muitas funcionalidades ficam por conta dos desenvolvedores como: requisições, roteamento, internacionalização, etc.

Isso pode até parecer ruim, mas na verdade nos dá flexibilidade para integrar com qualquer biblioteca que quisermos.

Quem usa React?

Várias startups e gigantes do mundo todo usam React, pois sua versatilidade está revolucionando o modo como criamos nossas aplicações tanto web quanto mobile.

Isso mesmo! Com React também podemos desenvolver aplicações nativas para dispositivos móveis, como é o caso do Instagram. Isso nós veremos no curso de React Native.

O que é DOM e Virtual DOM?

O DOM (Document Object Model) é uma interface gerida pelos navegadores entre o HTML e o JavaScript. Quando você manipula um elemento HTML através de código JavaScript, ele acessa este elemento justamente através do DOM. É como se cada nó do DOM apontasse para o seu respectivo elemento HTML e o JavaScript, para evitar ficar realizando parse do HTML toda hora em que for necessária a manipulação de HTML, o representasse através desta estrutura virtual.

Repare no exemplo abaixo. Na ilustração, nós temos uma representação básica do que seria uma árvore DOM montada por um navegador qualquer.

Sendo assim, toda vez que um código JavaScript precisar acessar um elemento HTML, quer seja para realizar uma modificação ou mesmo somente verificar como está o estado atual do elemento, ele "navega" através da árvore DOM para encontrar o elemento e, após encontrá-lo na árvore DOM, ele consegue encontrar sua correspondência dentro do HTML.

Se quisermos deixar o HTML dinâmico, teremos que utilizar a árvore DOM para realizar as modificações necessárias nos elementos HTML. O problema é que o acesso e navegação dentro do DOM é muito lenta.

Para melhorar este aspecto, o React mantém uma cópia do DOM em memória, chamada de Virtual DOM. Quando algum dado é alterado e é necessária uma alteração na view (ou seja, no seu HTML), o React verifica pelo Virtual DOM quais as partes que devem ser alteradas. Com isso, ele acessa o DOM o menor número possível de vezes, alterando unicamente onde é necessário. Isso garante uma ótima velocidade às aplicações que utilizam a estratégia do Virtual DOM, como React e Vue.js.

Principais funções

Podemos criar elementos com "React.createElement()", onde passamos o nome do elemento, um objeto com propriedades e o conteúdo do elemento.

React.createElement('h1', {id: "meuTitulo"}, "Hello World!"),

Iniciamos o React executando "ReactDOM.render()", passando primeiro um elemento a ser renderizado e um elemento onde iremos inserir tal elemento.

ReactDOM.render(
    React.createElement('h1', {id: "meuTitulo"}, "Hello World!"),
    document.querySelector("#minhaDiv")
);

O que é JSX?

O JSX nos permite escrever algo como HTML (ou XML) no meio do nosso código JavaScript, que após transpilado produz elementos do React.

Sintaxe do JSX

Para dar um "escape" para executar JavaScript, basta usar chaves:

const myTitle = "TreinaWeb";
<div>{ myTitle }</div>

Condições precisam ser escritas com operadores ternários:

<button>
    {
        isOpen ? "Fechar" : "Abrir"
    }
</button>

Por ser JavaScript, comentários devem ser escritos como comentários de JavaScript, e não HTML.

{/* comentário */}

Outros pontos que não podemos esquecer:

A palavra "class" e "for" são reservadas no JavaScript. Para se criar uma classe, em sua tag utilize a palavra "className", e para "for", "htmlFor".
Style deve ser um objeto e o nome dos atributos, ao invés de serem separados por traço, devem estar em camelCase:

var meuEstilo = {"fontSize": "15px", "marginTop": "1em"};
<span style={meuEstilo} ></span>

No HTML5 algumas tags não precisam ser fechadas. No JSX todas precisam
Os atributos são escritos em camelCase, como o onclick:
<button onClick={minhaFuncao} >Clique Aqui</button>

As ferramentas necessárias

Primeiro, precisamos ter o Node.js instalado em nossa máquina.

Para obter o Node.js, acessehttps://nodejs.org

As ferramentas mais comuns para se trabalhar com transpilação do JSX são Babel e WebPack.

Babel

A ferramenta mais comum para fazer transpilação de JavaScript hoje em dia é o Babel. Ele nasceu com o nome "6to5".

Sua principal função era permitir que a gente escrevesse JavaScript com as sintaxes inseridas no EcmaScript 6, posteriormente renomeado para ES2015. Como os navegadores da época não davam suporte ainda ao ES6, o 6to5 convertia nosso código em JavaScript que os navegadores entendiam, o EcmaScript 5.

Como foi anunciado que o JavaScript agora teria atualizações menores e com mais frequência, não fazia sentido manter o nome da ferramenta como 6to5. Então rebatizaram a ferramenta para Babel.

Hoje em dia ele não é apenas utilizado para transpilar ES2015, ES2018, etc, mas também é usado para transpilar JSX.

Para conhecer melhor, acesse:https://babeljs.io/

WebPack

O WebPack é um construtor de módulos. Isso significa que ao invés de ficarmos importando nossos scripts no HTML, podemos criar arquivos bem separados, como módulos, e importá-los, assim como faríamos no Back End.

Ok, isso o Browserify já fazia. O WebPack vai além. Ele também aceita que a gente importe HTML, CSS, Sass, Imagens, CoffeeScript, etc.

Em conjunto com o Babel nós podemos fazer com que o WebPack transpile o JSX antes dele arrumar as dependências do projeto para poder formar o pacote que será entregue ao usuário.

Além disso, o WebPack também é capaz de subir um servidor com LiveReload para podermos acessar nossas páginas.

Para conhecer melhor, acesse:https://webpack.js.org/

O que é Transpilação?

Na aula passada vimos sobre o JSX, mas ele não é suportado pelos navegadores. Temos que fazer uma transpilação do nosso código para JavaScript, permitindo que o navegador entenda nosso código.

Essa transpilação seria como uma "conversão". Lembre-se que foi mostrado um JSX e depois foi dito que ele será transformado em JavaScript.

Seria como uma compilação. Compilação é um termo genérico usado para indicar quando temos um código e transformamos ele em uma outra linguagem, como é o caso do C++ ser compilado para linguagem de máquina.

A Transpilação é um termo usado para indicar quando transformamos um código de uma linguagem para uma outra linguagem com um nível similar de abstração. No caso, estamos apenas transformando um "JavaScript com XML" para um JavaScript puro.

Outros exemplos de transpilação é o CoffeeScript para JavaScript, Sass para CSS ou até mesmo C++ para C.

Create React App

Instale o Create React App executando:

$ npm install -g create-react-app

Crie uma nova aplicação executando:

$ create-react-app nome-do-app

Inicie uma aplicação executando:

$ npm start

Ela será fornecida em "http://localhost:3000"

O que são Componentes?

Elementos de interface com aparência e comportamento próprios que podem ser reutilizados.

Criação de Componentes

Crie uma classe estendendo a classe Component do React.

import React, {Component} from 'react';
class MyDiv extends Component{
    render(){
        return(<div>TreinaWeb</div>);
    }
}
export default MyDiv;

Propriedades

Propriedades são valores que passamos para um componente e ficam dentro do objeto "props". O componente não pode modificá-las.

Estado

Estado indica as variáveis internas do componente, as quais podem ser modificadas. Essas variáveis ficam dentro do objeto "state" e são modificadas pela função "setState()".

Para se aprofundar na criação de componentes, veja nosso curso "React: Dominando Componentes".

Componentes Controlados

Elementos que possuem seu valor controlados pelo React.

Podemos executar o "setState()" para manter o estado do componente atualizado com o valor do elemento. Sem isso o elemento não permitirá alterações.

Componentes Não Controlados

Elementos que seu valor não é controlado pelo React.

Criando Referências

Para criar uma referência, execute "React.createRef()". Guarde o retorno em uma variável e passe-a para um elemento pela propriedade "ref".

A Saideira

Esses conteúdo é fruto de algumas aulas do curso de React da TreinaWeb, conteúdo muito interessante! E essa série continua!

Códigos de status de respostas HTTP

Cristian Araujo — Sat, 10 Apr 2021 04:17:57 +0000

Talvez não seja de vital importância ser o Google dos códigos de status de resposta do protocolo HTTP, mas é muito importante conhecer os principais e as diferenças sutis entre eles.

É muito importante ser coerente no uso dos códigos para que o cliente não se enrole na mensageiria e consiga gerenciar erros de uma forma fácil e padronizada.

Nesse artigo vamos tratar apenas de alguns dos muitos códigos das 5 classes, esses são os mais utilizados nos sistemas atuais. É recomendado sempre que você use o mais adequado para situação. Nada de colar 400 e 500 em tudo, ok?

1xx: Informacional

Vai ser muito raro encontrar um código desse. Eles são usados para informação.

100 Continue: Uma resposta provisória para indicar que tudo ocorreu bem até então e que o cliente pode continuar com a requisição.

101 Switching Protocol: Esse código é enviado em resposta a um cabeçalho de solicitação Upgrade pelo cliente, e indica o protocolo a que o servidor está alternando.

102 Processing (WebDAV): Este código indica que o servidor recebeu e está processando a requisição, mas nenhuma resposta está disponível ainda.

103 Early Hints: Este código tem principalmente o objetivo de ser utilizado com o cabeçalho Link, indicando que o agente deve pré-carregar recursos enquanto o servidor prepara uma resposta.

2xx: Sucesso

Esse é o que sempre esperamos receber! Significa que deu tudo certo com sua solicitação.

200 OK: Requisição foi bem sucedida. O significado do sucesso varia de acordo com o método HTTP.

201 Created: A requisição foi bem sucedida e um novo recurso foi criado como resultado. Esta é uma típica resposta enviada após uma requisição POST.

204 No Content: Não há conteúdo para enviar para esta solicitação, mas os cabeçalhos podem ser úteis. O user-agent pode atualizar seus cabeçalhos em cache para este recurso com os novos.

206 Partial Content: Esta resposta é usada por causa do cabeçalho de intervalo enviado pelo cliente para separar o download em vários fluxos.

3xx: Redirecionamento

Aqui o cliente vai precisar fazer ações extras para completar o pedido e redirecionar a requisição.

301 Moved Permanently: Esse código de resposta significa que a URI do recurso requerido mudou. Provavelmente, a nova URI será especificada na resposta.

302 Found: Esse código de resposta significa que a URI do recurso requerido foi mudada temporariamente. Novas mudanças na URI poderão ser feitas no futuro. Portanto, a mesma URI deve ser usada pelo cliente em requisições futuras.

304 Not Modified: Essa resposta é usada para questões da cache. Diz ao cliente que a resposta não foi modificada. Portanto, o cliente pode usar a mesma versão em cache de resposta.

4xx: Erro do Cliente

Essa classe é provavelmente BIOS rsrs. Os códigos devem ser apresentados quando o cliente parecer ter cometido um erro.

400 Bad Request: Essa resposta significa que o servidor não entendeu a requisição pois está com uma sintaxe inválida.

401 Unauthorized: Embora o padrão HTTP especifique "unauthorized", semanticamente, essa resposta significa "unauthenticated". Ou seja, o cliente deve se autenticar para obter a resposta solicitada.

403 Forbidden: O cliente não tem direitos de acesso ao conteúdo portanto o servidor esta rejeitando dar a resposta. Diferente do código 401, aqui a identidade do cliente é conhecida.

404 Not Found: O recurso requisitado não foi encontrado, mas pode ser disponibilizado novamente no futuro.

406 Not Acceptable: O recurso solicitado é apenas capaz de gerar conteúdo não aceitáveis de acordo com os cabeçalhos Accept enviados na solicitação.

5xx: Erro do Cliente

Aqui deu BO, bateu fofo. Essa classe informa que o erro aconteceu do lado do servidor.

500 Internal Server Error: Indica um erro do servidor ao processar a solicitação.

501 Not Implemented: O método da requisição não é suportado pelo servidor e não pode ser manipulado. Os únicos métodos exigidos que servidores suportem (e portanto não devem retornar este código) são GET e HEAD.

502 Bad Gateway: Esta resposta de erro significa que o servidor, ao trabalhar como um gateway a fim de obter uma resposta necessária para manipular a requisição, obteve uma resposta inválida.

503 Service Unavailable: O servidor não está pronto para manipular a requisição. Causas comuns são um servidor em manutenção ou sobrecarregado.

A Saideira

Essa publicação foi inspirada numa publicação do pessoal da Codar.me. Gosto muito do conteúdo deles, podem acompanhar!