ReactJS

React: Conheça o Poder dos Hooks

Olá Web Developers! Vamos conhecer o poder dos Hooks do React.

O que são React Hooks?

Até a versão 16.7 era necessário criar classes para utilizar todas as funcionalidades do React em um componente, como estado e lifecycle.

Era possível criar componentes a partir de funções, mas esses componentes apenas recebiam propriedades, não possuindo lifecycles, estados e outras funcionalidades do React.

Os Hooks foram introduzidos na versão 16.8, e nos permitem utilizar vários recursos do React dentro de funções de forma bem simples.

Por que usar Hooks?

Os Hooks nos ajudam a organizar a lógica que será usada em um componente. Podemos até criar nossos próprios Hooks para reutilizar a lógica em vários componentes. A própria comunidade está criando Hooks muito interessantes que podemos utilizar em nossos projetos.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

Hooks

Vamos conhecer os dois principais Hooks, useState e useEffect.

useState

O useState nos permite criar estados em um componente criado a partir de uma função, assim como o state presente em componentes criados a partir de classes.

Veja o exemplo da seguinte classe:

class Treinaweb extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            nome: 'TreinaWeb'
        }
    }

    render(){
        return {
            <div>
                <p>{this.state.nome}</p>
                <button onClick={() => this.setState({nome: 'React'})} >CLICK</button>
            </div>
        }
    }
}

Com os Hooks nós teremos o seguinte código:

function Treinaweb (props){
    const [nome, setNome] = useState('TreinaWeb');

    render(){
        return {
            <div>
                <p>{nome}</p>
                <button onClick={() => setNome('React')} >CLICK</button>
            </div>
        }
    }
}

Bem menos código, não é mesmo? Vamos entender o que o useState() está fazendo.

O useState() cria uma variável que controlará o estado do componente. Se quiser outra variável execute outro useState().

Para este Hook nós passamos o valor inicial do estado, em nosso exemplo, a String “TreinaWeb”. Como retorno temos a variável com o valor do estado, que demos o nome de nome, e uma função que serve unicamente para atualizar o valor desta variável, que demos o nome de setNome.

Veja que no clique do botão apenas chamamos esta função setNome(), passando o novo valor.

Por estar tudo declarado dentro da própria função, não temos mais a necessidade de utilizar o this, que pode ser complicado de ser compreendido no JavaScript para iniciantes, causando erros no código.

useEffect

O useEffect é um Hook que serve para lidar com os efeitos. Podemos usá-los como os lifeCycles componentDidMount, componentDidUpdate e componentWillUnmount.

Imagine que a gente tenha uma API que nos retorna uma lista de produtos baseado no nome que passarmos.

function Treinaweb (props){
    const [produto, setProduto] = useState('Leite');

    useEffect(() => {
        Produtos.buscar(produto);
    })

    render(){
        return {
            <div>
                <p>{produto}</p>
                <button onClick={() => setProduto('Chocolate')} >CLICK</button>
            </div>
        }
    }
}

O useEffect() recebe como primeiro parâmetro uma função que será executada assim que o componente renderizar. Então é um ótimo lugar para fazer requisições.

Dessa maneira como escrevemos, a função passada ao useEffect() será executada sempre que o componente for atualizado.

React - Dominando Componentes
Curso de React - Dominando Componentes
CONHEÇA O CURSO

A beleza deste Hook é que podemos definir facilmente quando queremos que esta função seja executada novamente. Basta passar como segundo parâmetro ao useEffect() um Array com as variáveis que controlarão esse Hook.

Vamos supor que queremos que a função seja executada apenas quando a variável produto for alterada. Ficaria assim:

    useEffect(() => {
        Produtos.buscar(produto);
    }, [produto])

E se quisermos que a função seja executada apenas uma vez, que é quando o componente é inserido na tela, basta passar um Array vazio.

    useEffect(() => {
        Produtos.buscar(produto);
    }, [])

Você pode executar quantos useEffects() quiser, o que nos dá mais controle sobre o que e quando algo deve ser executado.

Reutilização de Hooks

Podemos criar nossos próprios Hooks. Basta criar uma função que utilize outros Hooks e retorne algum valor. Assim poderemos ter uma lógica fora dos componentes e reutilizá-la onde quisermos. Essas funções também devem ter seu nome iniciado com use.

O site https://usehooks.com/ possui vários exemplos de Hooks interessantes que podem ser muito úteis em seu projeto, como carregar imagens apenas se estiverem visíveis na tela, criar funcionalidade de desfazer, criar atalhos de teclado, etc. Também é uma ótima fonte para entender melhor os Hooks na prática, vendo os códigos disponíveis.

Os Hooks nos permitem trabalhar de forma limpa e simples no React, nos dando um grande poder. Com ajuda da comunidade estamos vendo várias possibilidades interessantes.

Já criou um Hook? Compartilhe aqui com a gente pelos comentários!

O que há de novo no React 16?

Olá, Web Developers!

O React, agora na sua 16ª versão, foi totalmente reescrito, mas tenha calma que não haverá grandes quebras. Caso sua aplicação esteja usando a versão 15.6, pode migrar sem se preocupar.

O Twitter Lite já está usando a versão 16 e perceberam uma redução no tamanho dos arquivo e melhora na performance.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

As principais novidades

Dentre as novidades, destacamos:

Licença MIT

Houve muita discussão sobre o React ter adotado a licença BSD+Patents. Agora você pode usar o React sem se preocupar com patentes, pois agora ele está sob a Licença MIT.

Ainda mais leve!

Mesmo com novas funcionalidades, o tamanho agora da biblioteca diminuiu cerca de 32%.

Versão 15

  • react – 20.7kb (6.9kb com gzip)
  • react-dom – 141kb (42.9kb com gzip)

Versão 16

  • react – 5.3kb (2.2kb com gzip)
  • react-dom – 103.7kb (32.6kb com gzip)

Tratamento de Erros

Antes um erro em um componente poderia quebrar a aplicação. Agora podemos colocar em nossos componentes o método componentDidCatch() para tratar erros.

Render com Arrays, Strings e Numbers

Quem trabalha com React sabe que o método render() sempre deve retornar um único elemento. Caso você queira retonar uma lista de elementos, você deve criar um container para eles.

Agora você pode retornar um Array de elementos. Por ser um Array, você ainda precisará adicionar o atributo key aos elementos.

render() {
  return [
    <li key="A">item 1</li>,
    <li key="B">item 2</li>,
    <li key="C">item 3</li>,
  ];
}

E também pode-se retornar uma simples String:

render() {
  return 'Hello TreinaWeb!';
}

Suporte para atributos personalizados

Antes os atributos que a gente passava para o HTML ou SVG que não fossem reconhecidos eram ignorados. Agora o React os mantém.

<!-- nosso código -->
<div mycustomattribute="something" />

<!-- React 15 -->
<div />

<!-- React 16 -->
<div mycustomattribute="something" />

Portals

O React 16 te permite inserir um elemento filho em um local diferente no DOM, fora da sua árvore principal.

React - Dominando Componentes
Curso de React - Dominando Componentes
CONHEÇA O CURSO

Imagine o seguinte cenário:

<body>
  <div id="root"></div>
  <div id="my-portal"></div>
<body>

Agora imagine que você tenha um componente na div “root”. Com Portals você pode pegar este componente e mandar renderizá-lo na div my-portal.

Um exemplo de uso: se tiver um elemento que deva aparecer na página e reaparecer ao abrir uma modal, teríamos que chamar nosso componente em dois lugares (na página e na modal) e passar as propriedades para ele.

Com Portals bastaria indicar o elemento que se quer pegar e onde quer exibí-lo. Precisa alterar alguma propriedade passada para o componente? Altere apenas em um lugar.

No Facebook, quando você inicia um vídeo e começa a navegar, o vídeo aparece em uma modal para te permitir navegar e continuar vendo o vídeo. Isso poderia ser feito facilmente com Portals.

Retornando null em setState()

Antes a função setState() apenas atualizava um valor do estado do componente.

Agora podemos colocar uma função dentro de setState(). Se esta função retornar null, o estado não é atualizado.

const newNumber = 7;

this.setState(state => {
   if(state.myNumber === newNumber){
      return null;
   }else{
      return {myNumber: newNumber};
   }
});

No código acima verificamos se o newNumber é igual ao número que temos no estado do componente. Caso sim, retornamos null, o que evitará mudança no estado do componente.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

O que ficou obsoleto?

Algumas alterações que podem causar quebras em relação às versões anteriores:

  • Descontinuação do suporte aos React-Add-ons
  • Chamar setState() com null não dispara mais atualizações
  • Chamar setState() diretamente dentro de render() sempre causa atualizações.
  • Callbacks de setState() agora são disparados após componentDidMount() ou componentDidUpdate().
  • ReactDOM.render() e ReactDOM.unstable_renderIntoContainer() agora retornam null se forem chamados de dentro de um método do lifecycle.

Ah, não deixe de conhecer o nosso curso de React:

Um abraço e até a próxima! 😉

Perdendo o preconceito com o novo Angular

Olá, Web Developers! Quem aqui também já desanimou com tantas notícias sobre a nova versão do Angular? (Eu mesmo já tinha desanimado).

Com tantas pessoas mais experientes que eu listando coisas boas e ruins, eu realmente desanimei. Mesmo assim, por saber da demanda no mercado, eu continuei seguindo a evolução dele, pensando que as coisas iriam melhorar. Muitas coisas que vejo ainda me desanimam, mas mudei alguns pensamentos e até vejo o novo Angular como um aliado.

Vou listar aqui alguns itens que me desanimavam e o motivo de eu ter mudado de ideia. Quem sabe você se inspire e considere utilizá-lo para o seu próximo projeto? É sempre bom manter a mente aberta, não? 😉

Angular - Criação de interfaces web
Curso de Angular - Criação de interfaces web
CONHEÇA O CURSO

Major version a cada 6 meses

O novo Angular não tem nada a ver com o Angular 1. Ele foi criado do zero. No final de 2016 foi anunciado que uma nova versão seria lançada a cada 6 meses, ou seja, logo logo teremos o Angular 4.

Por causa desse versionamento “agressivo”, não há mais razão para chamarmos de Angular 2. O recomendado é chamar o antigo de AngularJS e o novo simplesmente de Angular. Você pode entender melhor a razão lendo esse post. O medo de muitas pessoas é: “Major Versions a cada 6 meses? Meu deus, muita coisa vai quebrar!”

Lembro do AngularJS em sua versão 1.2. Após um tempo eu precisei muito de algumas funcionalidades lançadas no 1.4, mas isso quebrou muitas coisas de bibliotecas de terceiros. Tive que me contentar com algumas coisas que já haviam na 1.3 mesmo.

Até mesmo quem quis sair na frente e escreveu livros e criou cursos na fase alpha ou na fase de lançamento do novo Angular teve que arrumar muita coisa. Várias coisas mudaram de um dia para o outro.

Estão dizendo que agora todas as versões serão compatíveis com versões mais antigas. Já ouvi essa história antes no AngularJS, e não aconteceu. Mas eu aceitei, porque realmente há momentos em que temos que evoluir algumas funcionalidades, e outras acabam se tornando obsoletas. Faz parte do desenvolvimento e, com o tempo, algumas funcionalidades acabam sendo removidas. Seria muito pior uma ferramenta que não evolui ou que fica carregando código legado o “resto da vida”.

Será que o seu sistema realmente vai precisar ficar migrando para cada versão nova que sair? Se for o caso, será que você escolheu bem a ferramenta ou modo de desenvolver?

Sintaxe completamente diferente

Se tanta gente já estava acostumada com o modo de desenvolver do AngularJS, por que criar uma sintaxe tão diferente?

AngularJS:

<input type="text" ng-model="name" ng-click="doSomething()" />

<ul>
   <li ng-for="item in list" ></li>
</ul>

Angular:

<input type="text" [(ngModel)]="name" (click)="doSomething()" />

<ul>
   <li *ngFor="let item of list" ></li>
</ul>

Esse foi um tapa na cara de quem veio do AngularJS e achou que poderia reaproveitar algumas coisas no Angular. Mesmo as partes mais simples e conhecidas do AngularJS são bem diferentes das do Angular, como podemos ver no exemplo acima, ao utilizar o famoso ng-model, fazer loopings ou chamar eventos.

Quem conhece o novo Angular sabe o motivo por trás da sintaxe [()], conhecida como “banana in a box”, ou o * do *ngFor. Mas dava muito bem para tentar deixar algumas coisas com a sintaxe igual, né? Facilitaria muito, pois aprenderíamos intuitivamente, só de lembrar da sintaxe do AngularJS, sem ter que procurar como fazer algo.

Hoje eu tenho outra opinião. Por ser uma ferramenta totalmente diferente, funcionar diferente, é importante que saibamos conscientemente o que estamos fazendo.

Trabalhar com um serrote levando em conta a sua experiência com um martelo pode fazer com que você não faça um bom códigão.

Hanashiro, Akira

A mudança até nos detalhes que já conhecíamos nos força a estudar do zero. O nome da ferramenta pesou bastante por seu legado. Por ser algo feito do zero, talvez teria sido bom (ou essencial) criar um novo nome. Chamar de Angular 2 foi puro marketing.

Lembre-se: Angular é uma ferramenta totalmente diferente do AngularJS.

Início de projeto muito complicado

Nossa, essa no começo era indiscutível. Tínhamos que configurar o transpilador para o TypeScript, pegar as dependências do Angular como o zone.js, pegar o SystemJS, angular2-polyfills, etc.

Depois o arquivo principal. Tem que saber o que importar. Tem coisas que vêm do @angular/core, outras do @angular/forms, @angular/platform-browser, etc. Com o tempo você se acostuma.

E então criamos uma classe e passamos algumas (muitas!) informações para a anottation @ngModule. Várias das coisas que importamos temos que passar para a anottations. E isso, após um tempo, começa a cansar, concorda?

E depois de várias linhas, estamos prontos para nosso primeiro Hello World! Para quem está iniciando na profissão, a sensação é tipo essa:

Este aqui não é para principiantes

Sendo que no AngularJS, bastava importar o código, colocar um ng-app no container da aplicação e pronto! Até mesmo o React, que necessita transpilar o JSX, o que nos faz ir em busca de ferramentas como Babel, é bem mais simples para quem está iniciando.

Hoje em dia podemos iniciar facilmente uma aplicação com o @ang/cli, ferramenta feita em cima do ember-cli, que serve para estruturar a aplicação automaticamente a partir de comandos. Até os imports são colocados automaticamente.

Eu não gosto muito de ferramentas assim, pois muitas vezes produzem muito código que não iremos utilizar, e se precisarmos apagar alguma coisa, teremos que conhecer bem o que foi criado, pois teremos que apagar na mão.

Outros podem dizer: “Estruturar automaticamente sem nem saber o que está acontecendo? Isso é loucura. Não dá certo!”.

Bem, já foi provado que aprendemos mais rápido se formos logo de “cabeça” em algo ao invés de ficar estudando a teoria primeiro. É como dizem: “Aprendemos a andar caindo, não observando.”

Muitos cursos modernos de línguas estimulam a prática do idioma já no início, ao invés de ficar primeiro te ensinando pronomes, depois verbos, e só depois formar frases. Esse é um dos motivos por trás do sucesso de aplicativos como o Duolingo, que para muitos é só uma brincadeira mas para outros é uma ferramenta muito bem elaborada.

Tenho que admitir que depois que parei de me preocupar com o que cada linha fazia, e mergulhei de cabeça na criação de código, aprendi mais rápido. Agora que já conheço melhor a ferramenta, entender o que cada uma daquelas linhas faziam ficou mais fácil.

Mais uma vez: É uma ferramenta diferente e com propósitos diferentes. Esteja aberto à mudanças ao invés de ignorá-las e ficar comparando com outras soluções.

TypeScript

Muita gente reclama do TypeScript, mas eu sou neutro neste item. Realmente não me incomoda. Muitas das funcionalidades que utilizamos no Angular faz parte da nova versão do EcmaScript.

Fora isso, o que o TypeScript tem de diferente mesmo é a tipagem, mas você pode muito bem continuar declarando variáveis sem declarar o tipo.

Complica o que o React facilita

Criar componentes no AngularJS era chatinho. Tinha muita coisa que não era tão simples ou intuitiva, e tentar explicar para os outros da equipe só fazia eles desejarem não chegar mais perto do front-end.

Não há como negar que criar componentes no Angular agora é mais simples, mas nem tão simples quanto no React. Há muitas reclamações contra o React e sobre o uso do JSX, mas também há reclamações do Angular por termos que importar os módulos e declararmos mais umas duas vezes no @decorator .

Tem gente que defenderia o Angular simplesmente por dizer que código no React fica feio por “misturar HTML e JS”. Não adianta dizer: “É JSX! Você pode escrever JS se quiser!” para os outros. Essas pessoas não estão abertas a testar algo novo só porque já foi considerado ruim há muitos anos.

Só digo que é pouco JSX que vai nos componentes. Se você tem muito código no seu componente, pode ser que você esteja fazendo errado, pois, praticamente você está criando uma View.

Saindo do React, outros podem acabar dizendo: O Aurelia faz o mesmo de maneira bem mais simples! Sim! Quem já testou o Aurelia vai concordar que nem parece que temos um framework lá. Escrevemos um HTML no arquivo HTML e no arquivo JavaScript criamos uma classe comum, tornando tudo muito intuitivo! Fim.

Para quem tem seguido a evolução do Angular, muitas funcionalidades têm sido simplificadas. Quem sabe esse monte de código que repetimos uma hora saia?

Não sei como defender esse ponto. Só decidi aceitar que é uma ferramenta diferente e torço para que as partes ruins sejam melhoradas o quanto antes.

Documentação ruim

Não tem desculpa. Se formos comparar a qualidade da documentação do Angular com outras, como React ou Vue.js, ela é bem complicada para quem está começando.

Quando decidi estudar Vue.js, apenas umas 2 horas lendo a documentação já foi suficiente para aprender como trabalhar com ele, discutir com minha equipe sobre as vantagens e desvantagens e porque deveríamos considerá-lo para nosso próximo projeto.

Uma das razões que me desanimavam no Angular é que no começo a documentação era nossa única fonte de estudo, quando ele ainda estava em fase alpha.

Hoje em dia isso não me incomoda mais, pois já temos muitos cursos, livros e posts sobre o assunto (esse foi fácil defender :p).

Concluindo

Bom, a ideia desse post não foi falar mal ou bem de Angular, Vue, React, Ember, Aurelia, etc. Foi mais para apontar os principais motivos de eu (e várias pessoas) evitarmos tanto ele e a razão de eu ter dado mais uma chance.

Como eu disse muitas vezes, é uma ferramenta nova com ideias novas para projetos novos. Pense bem nas suas necessidades, estude ferramentas diferentes, analise a melhor para a necessidade do seu projeto, pois não existe ferramenta perfeita que se encaixa em tudo, e mesmo se existir, um dia ficará ultrapassada.

Somos maduros e profissionais o bastante para experimentar coisas novas, e não crianças discutindo o que é melhor: Pokémon ou Digimon. Espero que este texto tenha te inspirado a refletir sobre o assunto, não só sobre Angular, mas também sobre outras ferramentas.

E você, o que acha do front-end moderno e sua enorme quantidade de ferramentas? Compartilhe com a gente aí nos comentários!

Ah, aqui no TreinaWeb temos cursos sobre AngularJS, React e Vue.

Angular - Criação de interfaces web
Curso de Angular - Criação de interfaces web
CONHEÇA O CURSO
React.JS - Criação de interfaces web
Curso de React.JS - Criação de interfaces web
CONHEÇA O CURSO
Vue.js - Criação de interfaces web
Curso de Vue.js - Criação de interfaces web
CONHEÇA O CURSO

Em breve lançaremos os cursos de Angular 2 e Aurelia. o/

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200