Migrando seu aplicativo de jQuery para React

jQuery e React são bibliotecas JavaScript populares para desenvolvimento front-end. Enquanto jQuery é uma biblioteca de manipulação de DOM, React é uma biblioteca JavaScript para construir interfaces de usuário.

Descubra como migrar um aplicativo existente de jQuery para React.

jQuery vs. Reagir?

Quando se trata de escolher entre jQuery e React, depende de suas necessidades e preferências. Se você está procurando uma biblioteca que seja fácil de usar e tenha uma grande comunidade, o jQuery é uma boa escolha. Mas se você está procurando uma biblioteca mais adequada para desenvolvimento em larga escala, o React é a melhor opção.

Por que migrar do jQuery para o React?

Existem vários motivos pelos quais você pode querer migrar seu aplicativo de jQuery para React.

• React é mais rápido que jQuery: Se estamos falando de desempenho bruto, o React é mais rápido que o jQuery. Isso ocorre porque o React usa um DOM virtual, que é uma representação JavaScript do DOM real. Isso significa que quando um usuário interage com um aplicativo React, apenas as partes do DOM que mudam serão atualizadas. Isso é mais eficiente do que a manipulação completa do DOM do jQuery.
  instagram viewer
• React é mais sustentável: Outro motivo para migrar para o React é que ele é mais fácil de manter do que o jQuery. Isso ocorre porque os componentes do React são autocontidos para que você possa reutilizá-los facilmente. Isso significa que, se você precisar fazer uma alteração em um componente React, poderá fazê-lo sem afetar o restante da base de código.
• React é mais escalável: Finalmente, o React é mais escalável que o jQuery. Ele usa uma arquitetura baseada em componentes, que é mais escalável do que a abordagem monolítica do jQuery. Isso significa que você pode facilmente estender e modificar um aplicativo React conforme necessário.
• React tem melhor suporte para testes de unidade: Quando se trata de teste de unidade, o React tem melhor suporte do que o jQuery. Como você pode isolar facilmente os componentes do React, é mais fácil escrever testes de unidade para eles.

Como migrar seu aplicativo de jQuery para React

Se você planeja migrar seu aplicativo de jQuery para React, há algumas coisas que você precisa ter em mente. É importante saber o que você precisa para começar e ter uma boa ideia de como migrar partes individuais de seu aplicativo.

Pré-requisitos

Antes de iniciar o processo de migração, há algumas coisas que você precisa fazer para configurar as coisas. Primeiro, você precisa criar um aplicativo React usando o aplicativo create-react.

Depois de instalar essas dependências, você precisa criar um arquivo chamado index.js na tua origem diretório. Este arquivo será o ponto de entrada para seu aplicativo React.

Por fim, você pode passar para partes individuais de sua base de código e atualizá-las de acordo.

1. Manipulando Eventos

No jQuery, você pode anexar eventos a elementos. Por exemplo, se você tiver um botão, poderá anexar um evento de clique a ele. Quando alguém clicar no botão, o manipulador de eventos será executado.

$("botão").clique(função() {
// faça alguma coisa
});

React lida com eventos de forma diferente. Em vez de anexar eventos a elementos, você os define em componentes. Por exemplo, se você tiver um botão, defina o evento click no componente:

aulaBotãoestendeReagir.Componente{
 handleClick() {
// faça alguma coisa
 }
 render() {
retornar (
<botão onClick={this.handleClick}>
 Clique em mim!
</button>
 );
 }
}

Aqui, o componente Button contém a definição do método handleClick(). Quando alguém clicar no botão, esse método será executado.

Cada método tem seus prós e contras. No jQuery, os eventos são fáceis de anexar e remover. No entanto, pode ser difícil acompanhá-los se você tiver muitos eventos. No React, você define eventos em componentes, o que pode torná-los mais fáceis de rastrear. Mas eles não são tão fáceis de anexar e remover.

Se você estiver usando o React, precisará atualizar seu código para usar o novo método de manipulação de eventos. Para cada evento que você deseja manipular, você precisará definir um método no componente. Este método será executado quando o evento for acionado.

2. efeitos

Em jQuery, você pode usar os métodos .show() ou .hide() para mostrar ou ocultar um elemento. Por exemplo:

$("#elemento").mostrar();

No React, você pode usar o gancho useState() para gerenciar o estado. Por exemplo, se você deseja mostrar ou ocultar um elemento, defina o estado no componente:

importar { useState } de "reagir";
funçãoComponente() {
const [isShown, setIsShown] = useState(falso);
retornar (
<div>
 {é mostrado &&<div>Olá!</div>}
<botão onClick={() => setIsShown(!isShown)}>
 Alternar
</button>
</div>
 );
}

Esse código define a variável de estado isShown e a função setIsShown(). Reagir tem diferentes tipos de ganchos que você pode usar em seu aplicativo, do qual useState é um. Quando um usuário clica no botão, a variável de estado isShown é atualizada e o elemento é exibido somente quando apropriado.

No jQuery, os efeitos são fáceis de usar e funcionam bem. No entanto, eles podem ser difíceis de gerenciar se você tiver muitos deles. No React, os efeitos vivem dentro de componentes que podem torná-los mais fáceis de gerenciar, se não tão fáceis de usar.

3. Busca de dados

No jQuery, você pode usar o método $.ajax() para buscar dados. Por exemplo, se você deseja buscar alguns dados JSON, pode fazer assim:

$.ajax({
 url: "https://example.com/data.json",
 tipo de dados: "json",
 sucesso: função(dados) {
 // fazer algo com o dados
 }
});

No React, você pode usar o método fetch() para buscar dados. Veja como você pode buscar dados JSON usando este método:

buscar("https://example.com/data.json")
 .então (resposta => resposta.json())
 .então (dados => {
 // fazer algo com o dados
 });

Em jQuery, o método $.ajax() é fácil de usar. No entanto, pode ser difícil lidar com erros. No React, o método fetch() é mais detalhado, mas é mais fácil lidar com erros.

4. CSS

No jQuery, você pode especificar CSS por página. Por exemplo, se você deseja estilizar todos os botões em uma página, pode fazê-lo segmentando o elemento de botão:

botão {
 cor de fundo: vermelho;
 cor branca;
}

No React, você pode usar CSS de diferentes maneiras. Uma maneira é usar estilos embutidos. Por exemplo, se você deseja estilizar um botão, pode fazê-lo adicionando o atributo style ao elemento:

<estilo do botão={{backgroundColor: 'vermelho', cor: 'branco'}}>
 Clique em mim!
</button>

Outra maneira de estilizar os componentes do React é usar estilos globais. Estilos globais são regras CSS definidas fora de um componente e aplicadas a todos os componentes do aplicativo. Para fazer isso, você pode usar uma biblioteca CSS-in-JS como styled-components:

importar estilizado de 'componentes de estilo';
const Button = style.button`
 cor de fundo: vermelho;
 cor branca;
`;

Não há escolha certa ou errada entre estilos embutidos e estilos globais. Isso realmente depende de suas necessidades. Em geral, os estilos embutidos são mais fáceis de usar para pequenos projetos. Para projetos maiores, estilos globais são uma opção melhor.

Implante facilmente seu aplicativo React

Uma das vantagens mais significativas do React é que é muito fácil implantar seu React App. Você pode implantar React em qualquer servidor web estático. Você só precisa compilar seu código usando uma ferramenta como Webpack e, em seguida, colocar o arquivo bundle.js resultante em seu servidor web.

Você também pode hospedar seu aplicativo React gratuitamente nas páginas do GitHub.