DEV Community

Cover image for React para devs Angular
Ricardo Mello
Ricardo Mello

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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.
Bola de feno no deserto

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>;
Enter fullscreen mode Exit fullscreen mode

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

const element = React.createElement('h1',  'Hello, world!');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 :)

Top comments (6)

Collapse
 
guiworks profile image
Guilherme Macedo

Essa visão de quem vem do Angular facilita essa transição pra quem quer aprender React. Vai adiantar muito minha curva de aprendizado, mandou bem demais!!

Collapse
 
lucasargate profile image
Lucas Argate • Edited

Joseph Climber só quem começou a codar antes do stackoverflow! Cara parabéns pelo artigo! Incrível! Faça mais isso!
Eu amo angular e amo react. Mas nos últimos meses o react tem sido muito mais prático e sustentável... Projetos angulares custam muito mais caros pra chegar no mesmo resultado. Fora que a comunidade do react é muito mais "reativa" que a do angular.

Collapse
 
ricmello profile image
Ricardo Mello

Obrigado Lucas! E sim cara, sempre me perguntam se eu prefiro React ou Angular e a resposta é sempre o famoso "depende". Existem alguns projetos que eu iria de Angular sem pensar duas vezes, outros de React. Acho que no fim das contas é tudo sobre aquela velha máxima de saber usar a ferramenta certa pro trabalho certo.

Collapse
 
cesarhfborges profile image
Cesar Henrique • Edited

Parabéns gostei muito, mas sinceramente react só me interessa o native, ainda não domino essa lib mas a verdade é que nem estou gostando, muito bagunçado, hooks não podem ser chamados em qualquer lugar do tsx, usa muitas constantes ou equivalente na classe e o pior, muito método dentro de componentes, vira uma bagunça, e falta uma documentação melhor, as coisas são muito abstratas na documentação, não tem uma padronização que facilite o entendimento, toda aplicação é totalmente diferente e quando eu olho me desanima.

Collapse
 
ricmello profile image
Ricardo Mello

Dá uma olhada no Flutter. Eu não curto o React Native por achar bem zoneado também. Mas quando eu testei o flutter pra mobile foi meio que amor à primeira vista. O Dart, embora seja uma linguagem diferente, tem mtos traços do TypeScript então eu recomendo fortemente

Collapse
 
alamo_vinicius profile image
Alamo Vinicius • Edited

Eu sou dev react full time, e é Mt bom quando vc chega em um nível de maturidade na tecnologia onde tudo é possível e flexível. Já recusei ofertas de outras staks não pq sou engessado em uma tecnologia, mas pq n vejo necessidades de mudar uma stack q tá cada vez mais promissora e dominando o mercado, seria na minha opinião um retrocesso no meu nível de especialização