Tutorial do React: Como começar e como comparar

Front-end e JavaScript em particular são um mundo estranho. A quantidade de coisas novas sendo lançadas diariamente é muitas vezes ridicularizada por pessoas que não trabalham com elas, e muitas que o fazem. Ainda assim, às vezes ficamos um pouco sobrecarregados com novas informações, bibliotecas e discussões, e gostaríamos de algo estável, como um porto seguro para navios onde possamos ficar um pouco mais. Ultimamente, o React parece ser esse porto dócil em um mar de evolução dinâmica do JavaScript.

Com isso em mente, decidimos produzir este tutorial React em várias partes, para mostrar seus recursos e ver como ele se compara ao Angular e ao VueJS.

Claro, React não é o único porto que podemos usar, mas no momento, é uma das soluções mais populares, estáveis ​​e inovadoras e, embora ainda receba muitas atualizações, elas são mais uma opção de melhoria do que do que uma necessidade para a função.

O estado do React em 2019

React é uma biblioteca de visualização que podemos rastrear desde 2011, quando seu primeiro protótipo, chamado FaxJs, apareceu em sua página no Facebook, o próprio React foi apresentado por Jordan Walke (que também é autor do protótipo mencionado) no JSConfUS em 29 de maio de 2013, e foi disponibilizado abertamente no GitHub em 2 de julho de 2013.

O React continuou a ganhar popularidade em 2014, quando as conferências começaram a aparecer para expandir a comunidade e popularizar o React. Do meu ponto de vista, porém, 2015 foi um ano marcante para o React – grandes empresas (por exemplo, Airbnb e Netflix) começaram a gostar e adotar as soluções React. Além disso, React Native apareceu naquele ano. A ideia por trás do React Native não era algo absolutamente novo, mas era interessante de assistir, especialmente porque era apoiado pelo Facebook.

Outra grande mudança foi o Redux, uma implementação do Flux. Isso tornou o gerenciamento de estado muito mais acessível e fácil, tornando esta a implementação mais bem-sucedida até o momento.

Entre então e agora, muitas outras coisas ficaram disponíveis, incluindo ferramentas React, uma reescrita de algoritmo central, Fiber, uma mudança no versionamento semântico e assim por diante. Avançando para hoje, estamos no 16.6.3, provavelmente algumas semanas antes da nova versão com Hooks estar disponível (era para ser 16.7.0, mas essa já foi lançada devido a algumas correções para o React.lazy). O React é bem conhecido e estável e está recebendo ótimas opiniões.

Mas o que é reagir?

Bem, se você é desenvolvedor front-end e ainda não ouviu falar sobre isso, então preciso dizer que estão de parabéns, pois isso é um feito e tanto.

Brincadeiras à parte, o React é uma biblioteca de visualização baseada em componente declarativa que ajuda você a construir a interface do usuário. É uma biblioteca, não uma estrutura, embora a princípio muitas pessoas a descrevessem como o último.

Obviamente, se vamos adicionar Redux, React Router e assim por diante, ele começa a ter todas as coisas necessárias para fazer um aplicativo regular de página única, o que pode ser uma razão pela qual às vezes é descaracterizado como um framework em vez de uma biblioteca . De qualquer forma, pode-se argumentar que, com todos os componentes desse ambiente juntos, o termo “framework” é um pouco adequado, mas por si só, o React é apenas uma biblioteca.

Vamos parar com a nomenclatura e focar no que é diferente no React, nas coisas que não tínhamos antes do seu início. Em primeiro lugar, quando você pensa em React, você pensa em JSX, pois é a primeira coisa que vem à sua vista quando você olha para o código. JSX é uma extensão de sintaxe JavaScript que se assemelha um pouco a HTML/XML. Quando se trata de React e JSX, temos algumas diferenças do HTML, por exemplo, uma classe em React é className , não existe tabindex e sim tabIndex , o estilo aceita objetos JavaScript que possuem propriedades camelCased e assim por diante.

Existem algumas pequenas diferenças, mas qualquer um deve pegá-las rapidamente. A manipulação de eventos é feita, por exemplo, pelos atributos onChange e onClick que podem ser usados ​​para anexar alguma função para manipular eventos. Além disso, os componentes mais tarde podem ser reutilizados e personalizados livremente usando props, então não há razão para escrever o mesmo código algumas vezes.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

No entanto, o JSX não é absolutamente necessário no React. Você pode escrever funções regulares para criar elementos sem usar JSX. O mesmo código que está acima, pode ser usado como abaixo.

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

Obviamente, não estou sugerindo que você use essa sintaxe, embora haja casos em que possa ser útil (por exemplo, você deseja introduzir uma coisa muito pequena e não deseja alterar o ambiente de compilação).

Na verdade, tenho outra razão pela qual mostrei o trecho acima. Muitas vezes, os desenvolvedores não entendem por que precisamos fazer o seguinte:

 import React from 'react';

O trecho deve ser autoexplicativo. Mesmo que estejamos extraindo Component , ainda precisamos de React, porque o Babel transpila acima de JSX para abaixo de React.createElement . Então, se não importarmos o React, ele simplesmente falhará para nós. Mencionei o Babel, que é uma ferramenta que nos ajuda a introduzir coisas que ainda não estão em JavaScript (ou melhor, em navegadores) ou são de alguma forma extensões dele (ou linguagens diferentes como TypeScript, que o Babel suporta a partir do Babel 7). Agradecimentos a Babel:

• JSX será transformado em funções que são compreendidas pelo navegador.
• Podemos usar novos recursos que ainda não estão nos navegadores (por exemplo, propriedades de classe).
• Podemos adicionar recursos que estão em navegadores mais recentes, mas não existem em navegadores mais antigos, mantendo o suporte a navegadores mais antigos.

Resumindo, amanhã é hoje em JavaScript; isso é provavelmente algo que exigiria seu próprio artigo. Vale a pena mencionar que a importação do React também pode ser contornada por algumas outras técnicas (como introduzir ProvidePlugin através do Webpack e assim por diante), mas devido ao espaço limitado aqui, vamos evitá-lo e assumir que o usuário usará Create React App ( CRA) (mais sobre esta ferramenta será mencionado posteriormente).

A segunda coisa importante, e muito mais importante que o próprio JSX, é que o React é baseado no DOM virtual. Em suma, o DOM virtual é a memória de uma árvore ideal que é representada pelo JavaScript que o desenvolvedor escreve, que é comparado posteriormente com o DOM real e sincronizado com ele em um processo chamado reconciliação.

Como o React se compara ao Angular e ao Vue?

Eu não gosto de comparar bibliotecas, especialmente quando somos forçados a comparar peras com maçãs (bibliotecas vs. frameworks e assim por diante).

Portanto, tentarei comparar React com Angular e Vue usando uma série de perguntas e respostas curtas que não têm muito a ver com coisas técnicas, em vez de dizer algo como “X é melhor que Y porque usa JSX e não templates. ” Pontos como esses geralmente são preferências pessoais, escolhas subjetivas de alguém. Também velocidade, alocação de memória, etc., são bastante semelhantes no React e em todos os seus principais concorrentes (Angular e Vue vêm à mente). Há um relatório muito bom sobre o assunto, mas lembre-se disso: A grande maioria dos aplicativos não se parece com tabelas realmente grandes que trocam linhas em uma tabela de 10k. Portanto, esses resultados também são um experimento de velocidade pura. No mundo real, você não faria tal coisa em primeiro lugar.

Então, vamos dar uma olhada em algumas questões relacionadas ao React e como ele se compara à concorrência:

Quero ter muitas oportunidades de trabalho. Quão popular é o React?

Bem, isso é fácil de responder – escolha React. Na verdade, eu diria que o React tem cerca de 6-10 vezes (um spread bastante grande, mas existem alguns portais onde é 1:50 e outros onde é 1:6) mais vagas de emprego que o Vue e 2-4 vezes mais do que angular. A demanda por especialistas em React é forte, então por que o Vue é tão popular no GitHub (ele tem mais estrelas do que o React na verdade), mas tem menos vagas de emprego? Eu não faço ideia.

Quero uma grande comunidade, muitas bibliotecas, soluções rápidas para os problemas que possam surgir.

Reagir. Não procure mais.

É fácil de usar e torna o desenvolvimento agradável?

Mais uma vez, de acordo com os relatórios do State of JS para 2018 e 2017, tanto o React quanto o Vue desfrutam de uma reputação muito boa e a maioria dos desenvolvedores diz que os usaria novamente. Angular, por outro lado, tem uma tendência, ano após ano, de enviar cada vez mais pessoas dizendo que não o usariam novamente.

Desejo criar um novo aplicativo de página única, mas não quero pesquisar bibliotecas.

Esse é provavelmente o único lugar onde eu diria que Angular é a melhor escolha.

Nada de grandes corporações. Quero ser o mais independente possível, qual devo escolher?

Vue—é o único independente do nosso grande trio. (O Facebook está apoiando o React, enquanto o Google está por trás do Angular.)

Início mais fácil e curva de aprendizado mais rápida?

Ver/Reagir. Estou inclinado para o Vue aqui, mas essa é apenas minha opinião pessoal.

Por quê? Porque você não precisa nem saber JSX (é opcional) e é basicamente apenas HTML + CSS + JavaScript.

Tutorial do React: Introdução ao seu primeiro aplicativo

A maneira mais fácil de começar com o React hoje em dia é usar o CRA, uma ferramenta CLI que cria um projeto para você e ajuda a evitar todas as configurações necessárias para Webpack/Babel e muito mais. Em vez disso, você confia em como ele é configurado por padrão e no que foi incluído nele ao longo do tempo. Graças a isso, você não precisa se preocupar com grandes atualizações para algumas bibliotecas críticas.

É claro que, mais tarde, você pode “ejetar” a si mesmo e lidar com todos os aspectos por conta própria executando npm run eject . Essa abordagem tem seus próprios pontos fortes, pois você pode aprimorar seu aplicativo com coisas que de outra forma não estariam disponíveis (por exemplo, decoradores), mas também pode ser uma fonte de dores de cabeça, pois requer muitos arquivos extras e muito mais tempo.

Então, a primeira coisa a fazer é:

 npx create-react-app {app-name}

Então npm run start e você está pronto para começar.

Componentes de classe vs. função

Devemos começar explicando como esses componentes diferem. Basicamente, cada componente pode ser uma função ou classe . A principal diferença entre eles é que a classe um tem alguns recursos que não estão disponíveis no componente de função: eles podem ter um estado e usar refs, ciclo de vida, etc. ser chamado devido às mudanças já mencionadas), teremos hooks também, então state e refs serão possíveis com hooks.

Existem dois tipos de componentes de classe: Component e PureComponent . A única diferença entre os dois é que PureComponent está fazendo uma comparação superficial de props e state - ele tem seus próprios benefícios em uma situação em que você não deseja fazer renderizações "desperdiçadas", onde um componente e seus filhos estão exatamente no mesmo estado após uma renderização. Ainda assim, é apenas uma comparação superficial; se você quiser implementar sua própria comparação (por exemplo, porque você está passando adereços complexos), basta usar Component e substituir shouldComponentUpdate (que por padrão retorna true). Desde 16.6+, algo semelhante também está disponível com componentes de função - graças ao React.memo que é um componente de ordem superior e, por padrão, se comporta como PureComponent (comparação superficial), mas é necessário um segundo argumento onde você pode passar sua própria comparação de props personalizada .

Como regra geral, se você pode usar o componente de função (você não precisa de recursos de classe), use-o. Em breve, a partir de 16.7.0, o uso de componentes de classe só será necessário devido aos métodos do ciclo de vida. Eu tendo a acreditar que os componentes da função são mais transparentes, mais fáceis de raciocinar e entender.

Métodos de ciclo de vida do React

Construtor (adereços)

• Opcional, especialmente com o CRA sendo tão popular, onde as declarações de campo de classe para JavaScript são incluídas como padrão. É inútil declarar se você está vinculando seus métodos pela função de seta dentro do corpo da classe. Um estado semelhante também pode ser inicializado como uma propriedade de classe.
• Deve ser usado apenas para inicializar o estado local para objetos e métodos de ligação em classes ES6.

componentDidMount()

• Faça chamadas Ajax aqui.
• Se você precisar de ouvintes de eventos, assinaturas e outros, adicione-os aqui.
• Você pode usar setState aqui (mas fará o componente renderizar novamente).

componentWillUnmount()

• Limpa todas as coisas que ainda estão em andamento – por exemplo, Ajax deve ser interrompido, assinatura cancelada, temporizadores limpos e assim por diante.
• Não chame setState , pois é inútil porque o componente será desmontado (e você receberá um aviso).

componentDidUpdate(prevProps, prevState, instantâneo)

• Acontece quando o componente acabou de atualizar (não acontece na renderização inicial).
• Possui três parâmetros que são opcionais de usar (props anteriores, estado anterior e um snapshot que aparecerá apenas se seu componente implementar getSnapshotBeforeUpdate ).
• Só acontece se shouldComponentUpdate retornar true.
• Se você usar setState aqui, você deve protegê-lo ou cairá em um loop infinito.

shouldComponentUpdate(nextProps, nextState)

• Apenas para otimização de desempenho.
• Se retornar false, então um render NÃO será invocado.
• PureComponent pode ser usado se o SCO substituído for apenas uma comparação superficial de props/state.

getSnapshotBeforeUpdate()

• Pode ser usado para manter algumas informações sobre o DOM atual, por exemplo, a posição de rolagem atual que mais tarde pode ser reutilizada dentro do componentDidUpdate para restaurar a posição da rolagem.

componentDidCatch(erro, informação)

• Um lugar onde os erros de registro devem acontecer.
• Pode chamar setState , mas em versões futuras, ele será descartado em favor do método estático getDerivedStateFromError(error) , que atualizará o estado retornando um valor para atualizar o estado.

Existem dois métodos extras que são estáticos e foram mencionados em outras explicações

estático getDerivedStateFromError(erro)

• As informações de erro estão disponíveis aqui.
• Deve retornar um valor de objeto que atualizará o estado que pode ser usado para lidar com erros (exibindo algo).
• Como é estático, não tem acesso à própria instância do componente.

estático getSnapshotBeforeUpdate(props, state)

• Deve ser usado nos casos em que as props mudam ao longo do tempo - como exemplo, de acordo com os documentos do React, pode ser útil para um componente de transição.
• Como é estático, não tem acesso à própria instância do componente.

Observe que existem mais alguns métodos disponíveis a partir de hoje, mas eles devem ser removidos no React 17.0, então é por isso que eles não foram mencionados aqui.

Estado vs. Adereços

Vamos começar com Props , pois eles são mais fáceis e rápidos de explicar. Props são propriedades que são passadas para o componente que posteriormente podem ser reutilizadas dentro dele para exibir informações/lógica de negócios e tal.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

No exemplo acima, name é um prop. Props são elementos somente leitura e não podem ser alterados diretamente em componentes filhos. Além disso, há uma prática ruim que as pessoas costumam fazer, que é copiar adereços para o estado e operar no estado depois. É claro que há casos em que você deseja fazer algo como “estado inicial que atualizará o componente pai após o envio”, mas isso é mais raro — nesse cenário, a alimentação do estado inicial pode fazer sentido. Além disso, não apenas propriedades como strings podem ser passadas para componentes filhos, mas também números, objetos, funções, etc.

Props também tem mais uma coisa útil que é chamada defaultProps , um campo estático que pode dizer quais são as props padrão para um componente (quando elas não são passadas para o componente, por exemplo).

No caso de “levantar estado”, onde um componente (o pai) tem um estado que é posteriormente reutilizado por seus filhos (por exemplo, um filho o exibe e outro permite a edição), então precisamos passar a função para filho de parent, que nos permite atualizar o estado local do pai.

State , por outro lado, é um estado local que pode ser modificado, mas indiretamente usando this.setState . Se alguém alterar o estado diretamente, o componente não estará ciente da alteração e não será renderizado novamente para refletir as alterações mencionadas no estado.

SetState é um método para alterar o objeto de estado local (fazendo uma mesclagem superficial) e, depois disso, o componente responde se renderizando novamente. Esteja ciente de que depois que setState for usado, a propriedade this.state não refletirá as alterações mencionadas na função imediatamente (ela tem uma natureza assíncrona), pois algumas instâncias de setState podem ser agrupadas em lote devido à otimização. Ele tem algumas maneiras de ser invocado onde uma dessas possibilidades nos permite fazer algo com o componente logo após atualizar o estado:

• setState({value: '5'})
• setState((state, props) => ({value: state.name + “'s”}))
• setState([object / function like above], () => {}) – este formulário nos permite anexar callback , que será invocado quando o estado refletir os dados que queríamos ter (no primeiro argumento).

 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

Reagir Contexto

React recentemente estabilizou a Context API (que estava no React por algum tempo, mas era um recurso experimental apesar de ser amplamente usado por algumas das bibliotecas mais populares como Redux), o que nos ajuda a resolver um problema: perfuração de props. Resumindo, o detalhamento de adereços é uma maneira de passar adereços profundamente dentro da estrutura - por exemplo, pode ser algum tipo de tema para componentes, localização para idioma específico, informações do usuário e assim por diante. Antes do Contexto (ou melhor, antes de se tornar não experimental), ele foi detalhado passando de forma recursiva de pai para filho até a última folha (obviamente havia Redux que também poderia resolver o problema). Esteja ciente de que esse recurso resolve SOMENTE a perfuração de adereços e não substitui coisas como Redux ou Mobx. Obviamente, se você estiver usando uma biblioteca de gerenciamento de estado apenas para isso, poderá substituí-la livremente.

Empacotando

Isso conclui a primeira parte do nosso tutorial React. Nos próximos artigos, esperamos abordar tópicos mais avançados, desde estilos e tipos de verificação até implantação de produção e otimização de desempenho.