React para devs Angular

Já dizia o narrador em Joseph Climber, a vida de dev é uma caixinha de surpresas. Um dia você é dev Angular, no outro você acha uma oportunidade em uma empresa que você sempre quis trabalhar e quando vê a stack: React 🤦

Em outro você é contratado pra uma consultoria para trabalhar com Angular, o seu projeto é cancelado na primeira semana e os caras perguntam "rola react?" 🤦 de novo.

Pois é, os dois cenários aconteceram comigo em menos de um ano. Se adaptar à mudanças é uma skill importante, e isso não significa que você é um profissional ornitorrinco não. Só começa a ficar preocupante se você tiver um conhecimento superficial da stack mas o mais importante, independentemente do framework, são os fundamentos. E é sobre isso que eu pretendo escrever hoje: Como aprender React sendo um dev Angular.

Cada tópico possui links para a documentação oficial para que você possa se aprofundar nos conceitos, mas é super importante saber que a curva de aprendizado é bem menor do que parece.

O que é o React

React é uma biblioteca JavaScript para a construção de interfaces. E aqui começa a primeira diferença: o Angular é um framework.

Por ser uma biblioteca, o React fornece uma série de funções para a construção de interfaces, mas deixa a cargo do desenvolvedor como usá-las em sua aplicação.

Parte do sucesso do React vem dessa flexibilidade de ser relativamente não opinativo. Isso resultou em um ecossistema gigante de ferramentas em torno da lib, porém, ao mesmo tempo, você pode precisar de um pouco mais de esforço pra desenvolver uma aplicação do zero, porque precisamos passar um pouco mais de tempo configurando a estrutura do projeto e definindo/escolhendo os padrões.

Isso pode ser bem esquisito pra quem vem do Angular já que o framework te dá uma série de guidelines a serem seguidos, mas é algo que se acostuma. Você também vai perceber que dá pra utilizar alguns padrões do Angular em um app React como rxjs, nx, etc. e a comunidade tem uma série de padrões próprios do React também.

Eu sempre lembro de quando eu estava procurando referências sobre como criar a estrutura do projeto e caí num post do Dan Abramov dizendo que essa é a estrutura ideal: http://react-file-structure.surge.sh. Isso mostra o quão livre nós estamos para criar nossos próprios padrões. Só não se esqueça: com grandes poderes vêm grandes responsabilidades.

Criação de um projeto

Diferente do Angular onde o ng new é quase um mantra, nós temos uma série de possibilidades diferentes ao criar um projeto react. Uma delas, inclusive, se resume em adicionar duas tags <script> em um arquivo HTML qualquer.

A forma recomendada pela documentação mais próxima da nossa realidade é o create-react-app, que gera um projeto configurado com scripts para executar a aplicação, rodar o build, etc. Pra isso, basta rodar o seguinte comando:

npx create-react-app my-app --template typescript

O comando acima gera o projeto React configurado, e o flag --template typescript adiciona a nossa linguagem do coração. Sem ele, o create-react-app gera um projeto javascript.

Vite

Uma opção ainda melhor do que o create-react-app e que a comunidade já considera um novo padrão é o Vite.

A proposta dos dois é parecida, mas enquanto o create-react-app usa o webpack, o vite usa o esbuild que é significativamente mais rápido, e essa diferença de velocidade vai crescendo junto com a aplicação.

Pra criar um projeto com o Vite, é só rodar o comando abaixo e seguir as instruções:

npm create vite@latest

Componentes

Provavelmente o conceito mais importante do desenvolvimento front-end, a boa notícia é que a estrutura básica de um componente não muda de um framework pro outro.

O ciclo de vida e os nomes das propriedades são diferentes, então você provavelmente vai ficar com a documentação debaixo do braço por algum tempo, mas não vai demorar muito pra acostumar. Dá uma olhada nessa comparação de um componente básico:

Componente React

import React from 'react';
import './App.module.scss';

function App() {
  return <div className='App'>Hello World</div>;
}

export default App;

Componente Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div class="app">Hello World</div>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

Enquanto a sintaxe é bem diferente, você pode perceber elementos muito similares. Ambos importam um arquivo scss, ambos possuem seus templates e ambos exportam seus componentes. Sendo assim, é possível usar o conhecimento que você já tem sempre que for criar um componente novo.

Ciclo de Vida

As funções do ciclo de vida eram amplamente utilizadas pelos componentes de classe, mas como os componentes de função ganharam o gosto da galera, os Hooks tomaram a cena e você pode pular direto pra estudar a utilização deles, principalmente o Effect Hook, que é o cara que substitui os métodos do ciclo de vida em componentes de função.

Services

Já sobre services, diretivas, pipes... eles não existem.

Nesse caso nós voltamos ao bom e velho JavaScript e criamos funções que serão utilizadas.

Existem os React Hooks, que você pode usar pra centralizar grande parte da sua lógica que iria para os services, mas eles são bem diferentes. Enquanto os services são injetáveis e possuem um conceito completamente diferente dos componentes, os hooks são uma forma de adicionar funcionalidades aos componentes, e são executados pelos próprios componentes.

JSX

Embora seja possível usar React sem JSX via React.createElement(), na minha opinião não faz o mínimo sentido porque o código fica muito mais verboso.

O JSX (JavaScript XML) é uma extensão do JavaScript que te permite usar uma sintaxe similar à do HTML dentro do código JavaScript. Quando o código JSX for convertido pra JavaScript, ele é transformado em chamadas da função React.createElement(). Isso significa que esse código:

const element = <h1>Hello, world!</h1>;

Será convertido pra esse código durante o build:

const element = React.createElement('h1',  'Hello, world!');

O JSX é o formato recomendado e torna muito mais fácil a escrita dos templates. Há algumas pequenas diferenças em relação ao HTML como a classe CSS, em que você usa a propriedade className ao invés de class que é uma palavra reservada do JS, mas o fato de poder utilizar funções JS enquanto monta o template ajuda muito. Na minha opinião um list.map(item =>{}) é bem mais fácil de se fazer e entender do que um *ngFor="let item of list".

Props e State

As props são equivalentes aos @Input do Angular, onde nós passamos as propriedades do componente. Cada prop estará disponível como um atributo do objeto props da função do componente.

// Passando a prop title para o componente hello world
<Header title="Hey!" />

// Utilizando a prop na função
const Header = ({ title }) => <h1>{title}</h1>

O React não possui um equivalente ao @Output, mas nós podemos passar uma função de callback que será utilizada:

// Passando o callback de click para o componente de call to action
<CtaButton label="Click me" onClick={() => alert('Hello World')} />

// Utilizando o callback no evento de clique do botão
const CtaButton = ({ label, onClick }) =>
  <button onClick={onClick}>{label}</button>

State

Além das props, cada componente possui o seu estado interno. Uma vez que esse estado é alterado, o componente renderiza novamente e o estado é mantido. Nós precisamos do hook useState() para acessar o estado de um componente de função.

function App() {
  // Declarando uma nova variável de estado, que chamaremos de "count" e definimos como 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Ao clicar no botão, chamamos a função setCount com o novo valor */}
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Conclusão

Embora eu tenha lutado com todas as minhas forças nos últimos anos, o React me levou pro time e eu tenho gostado bastante de trabalhar com ele.

O React é mais simples que o Angular, isso é fato e a prova é que o Angular vem se tornando mais simples a cada release pra competir. Ter o conhecimento de Angular vai te fazer estar um passo à frente no quesito estrutura de projeto e padrões então o exercício maior é se aprofundar nos conceitos da lib enquanto põe alguns conceitos do Angular na geladeira.

Somando isso a uma comunidade hypada cheia de ferramentas pra agilizar o desenvolvimento, nós temos uma facilidade muito grande de desenvolver projetos rapidamente sem comprometer a qualidade.

Eu espero de verdade que você goste do framework e desse artigo, e se você chegou até aqui, tenta deixar um comentário com o que você gostaria de ver nos próximos posts e o que você achou do texto. Com isso, você me ajuda a definir os próximos temas :)