Explorando o Universo do Desenvolvimento Front-End: React vs JavaScript

Quando iniciei minha jornada no desenvolvimento front-end, termos como JavaScript, React, HTML e CSS eram recorrentes. HTML e CSS, com sua natureza descritiva, eram relativamente fáceis de entender. Contudo, JavaScript e React apresentavam um desafio maior para dominar.

No cenário do desenvolvimento de interfaces de usuário, o debate entre React e JavaScript parece interminável. Qual a distinção entre eles? Em que situações devemos priorizar React em relação a JavaScript e vice-versa? Estas são questões comuns que podem estar surgindo em sua mente agora.

Neste artigo, vamos analisar o React e o JavaScript como pilares do desenvolvimento web, comparando seus atributos e oferecendo orientações sobre quando aplicar cada um na construção de aplicações.

O que é JavaScript?

JavaScript é uma linguagem de scripting que desempenha um papel crucial em tornar páginas web interativas e dinâmicas. Muitas vezes, você verá o termo “Vanilla JavaScript” ou “Plain JavaScript” sendo usado para se referir a essa linguagem. A maioria dos desenvolvedores front-end utiliza JavaScript, juntamente com a linguagem de marcação HTML e folhas de estilo CSS, para construir interfaces de usuário.

A flexibilidade do JavaScript é notável; permite a criação de aplicações para a web, jogos e dispositivos móveis. Sua facilidade de uso e adaptabilidade o consolidaram como a linguagem de programação predileta, conforme apontado na Pesquisa StackOverflow 2023.

Fonte da imagem: stackoverflow.co

Recursos do JavaScript

O JavaScript se estabeleceu como a linguagem de programação mais utilizada por um período considerável. Os seguintes recursos justificam seu domínio e aplicação:

Uma linguagem de script que adota Programação Assíncrona

JavaScript é uma linguagem de script que permite escrever códigos que são executados em um ambiente de tempo de execução. Linguagens de script como JavaScript são ideais para prototipagem rápida, construção de aplicações web e automação de tarefas repetitivas.

O JavaScript opera de forma não bloqueante e utiliza recursos como callbacks, promessas e async/await para suportar a programação assíncrona. Isso simplifica a obtenção de dados de um servidor sem obstruir a thread principal.

Observe este trecho de código:

        function fetchData() {
           return new Promise((resolve, reject) => {
             setTimeout(() => {
                resolve("Dados obtidos com sucesso!");
                }, 2000);
             });
         }

        fetchData().then(data => {
           console.log(data);  // Saída: Dados obtidos com sucesso!
        });
     

A função fetchData retorna uma promessa, onde os parâmetros ‘resolve’ e ‘reject’ indicam o sucesso ou falha da operação assíncrona.

Manipulação do DOM

A manipulação do Document Object Model (DOM) facilita a alteração da estrutura de um documento HTML com base na interação do usuário.

Considere este exemplo de código:

        var heading = document.getElementById('myHeading');

        document.getElementById('changeTextButton').addEventListener('click', function() {
             heading.textContent="Texto alterado!";
        });

        document.getElementById('highlightButton').addEventListener('click', function() {
            heading.classList.add('highlight');
        });
    

Temos um ouvinte de eventos que monitora mudanças baseadas nas ações do usuário. Ao clicar no botão, a cor do título é alterada.

Tipagem Dinâmica

Em JavaScript, os tipos de variáveis são definidos durante a execução. Essa característica permite que os desenvolvedores escrevam seu código rapidamente, já que não precisam especificar o tipo de cada variável.

Vejamos este exemplo:

       let variable1 = 42;  // variable1 é do tipo number
        console.log(variable1);  // Saída: 42

        variable1 = "Bem-vindo ao etechpt.com!";  // Agora variable1 é do tipo string
        console.log(variable1);  // Saída: Bem-vindo ao etechpt.com!
   

Como visto, inicialmente atribuímos o valor 42 à variável1. Entretanto, podemos posteriormente atribuir um valor diferente, como “Bem-vindo ao etechpt.com!”.

Extensibilidade

É possível aumentar a funcionalidade do JavaScript utilizando diversas bibliotecas e frameworks de terceiros. Angular, por exemplo, é um framework JavaScript, enquanto React é uma biblioteca JavaScript.

O que é React?

React é uma biblioteca JavaScript popular para criar interfaces de usuário para web e dispositivos móveis. Desenvolvida inicialmente pela Meta (anteriormente Facebook) para uso interno, ela foi posteriormente disponibilizada como uma biblioteca de código aberto. O React foi concebido para mitigar os bugs que desenvolvedores encontram ao construir interfaces. Esta biblioteca permite criar componentes reutilizáveis, que são pequenos blocos de código.

O React é conhecido por sua sintaxe, JSX, que combina HTML e JavaScript. Esta sintaxe permite que desenvolvedores escrevam HTML e JavaScript em um único arquivo. É possível também integrar o React com frameworks front-end como o Bootstrap para estilizar suas aplicações.

Recursos do React

O React figura entre os frameworks e tecnologias web mais populares, conforme a Pesquisa Stackoverflow 2023.

Fonte da imagem: stackoverflow.co

Estes são alguns dos atributos que explicam sua popularidade:

Baseado em Componentes

O React adota uma arquitetura modular que facilita a criação de blocos de código pequenos e reutilizáveis. Isso significa que você pode modificar, editar, adicionar ou remover esses componentes sem precisar reescrever todo o código.

Esta biblioteca possui uma pasta ‘src’, onde são armazenados todos os componentes. Esta é a estrutura de pastas típica de uma aplicação React.

Declarativo

Esta biblioteca permite aos desenvolvedores descrever o estado da aplicação e da interface do usuário. O React, então, lida com as atualizações necessárias com base na descrição fornecida pelo desenvolvedor. Essencialmente, o desenvolvedor declara o resultado desejado e o React decide como implementá-lo.

Vejamos este exemplo:

        const numbers = [1, 2, 3, 4];

        const DoubledNumbersList = () => {
            return (
                

                {numbers.map(number => (
                 
{number * 2}
                 ))}
                
              );
         };

        // Renderizando o componente
        ReactDOM.render(, document.getElementById('root'));
    

Temos um array de ‘números’ e um componente ‘DoubledNumbersList’. Declaramos que cada número deve ser duplicado e apresentado em formato de lista. Isso demonstra como a interface do usuário deve ser definida.

Vinculação de Dados Unidirecional

O React utiliza um fluxo de dados unidirecional, que descreve como os dados se movem do componente pai para os componentes filhos. Se uma mudança ocorre no componente pai, os componentes filhos refletirão automaticamente as alterações.

No entanto, mudanças em um componente filho não serão refletidas no componente pai. Essa característica de vinculação de dados unidirecional facilita o gerenciamento do estado da aplicação de maneira mais previsível.

    import React, { useState } from 'react';

    // Componente Filho
    const ChildComponent = ({ data }) => {
        return (
        

            
Dados recebidos do pai: {data}
        
        );
    };

    // Componente Pai
    const ParentComponent = () => {
        const [parentData, setParentData] = useState('Dados Iniciais');

        const handleDataChange = () => {
            // Modificando o estado no componente pai
            setParentData('Dados Atualizados');
        };

        return (
            

            Alterar Dados
           {/* Passando os dados para o componente filho como prop */}
            
            
           );
    };

    // Componente Principal (App)
    const App = () => {
        return (
           

           
Exemplo de Vinculação de Dados Unidirecional do React
           {/* Renderizando o componente pai */}
           
           
         );
   };

    export default App;
    

O ParentComponent usa useState para gerenciar o estado de parentData. A função handleDataChange modifica esse estado.

Temos um componente funcional, ChildComponent, que exibe os dados que recebe como props.

DOM Virtual

O React cria um DOM virtual sempre que o estado de um componente é alterado. A biblioteca compara as alterações no DOM virtual com o DOM real e atualiza apenas as partes que foram modificadas.

Considere este código:

       import React, { useState } from 'react';

       const App = () => {
        // Estado para controlar um contador
         const [counter, setCounter] = useState(0);

         // Manipulador de eventos para incrementar o contador
          const incrementCounter = () => {
             setCounter(counter + 1);
          };

         return (
             

                 
Contador: {counter}
                Incrementar
             
          );
      };

       export default App;
   

Definimos uma variável com um botão que incrementa seu valor cada vez que o usuário clica. O React não atualiza todo o DOM quando o botão é clicado. Ele verifica as mudanças, compara-as com o DOM real e atualiza apenas o necessário.

React versus JavaScript

Limitações do React

Apesar de seus muitos atributos e vantagens, o React possui algumas limitações:

• Suporte limitado a navegadores antigos: O React foi projetado para funcionar com navegadores modernos como Google Chrome, Opera, Mozilla Firefox, Apple Safari e Microsoft Edge. Pode haver problemas ao usar o React em navegadores mais antigos.
• Focado no front-end: React foi desenvolvido para auxiliar desenvolvedores a criar interfaces de usuário. No entanto, ele pode ser usado com frameworks Node.js como o ExpressJS para criar aplicações full-stack.
• Curva de aprendizado mais íngreme: Aprender React pode ser um desafio para quem é novo na programação.

Limitações do JavaScript

O JavaScript é extremamente poderoso. Segundo o Statista, mais de 63% dos entrevistados utilizam JavaScript.

Apesar disso, esta linguagem de programação apresenta algumas deficiências:

• Demorado: Desenvolvedores precisam escrever o código do zero ao usar JavaScript puro/vanilla em suas aplicações.
• Não adequado para grandes aplicações: Manter grandes aplicações em JavaScript pode ser desafiador.
• Single-threaded: JavaScript processa uma operação por vez. Isso pode ser limitante para tarefas que demandam muito da CPU.

React vs JavaScript: Qual você deve escolher?

É importante ressaltar que React e JavaScript não são concorrentes diretos. React é uma das muitas bibliotecas JavaScript usadas para criar interfaces de usuário.

Há, contudo, situações em que você terá que escolher entre JavaScript e React para construir sua aplicação. Em alguns casos, React será mais apropriado que JavaScript e vice-versa. A partir da minha análise, você pode considerar o seguinte:

Quando escolher React em vez de JavaScript

• Para construir aplicações rapidamente: React oferece um código padrão que facilita a criação de aplicações. Além disso, pode ser usado com vários frameworks e bibliotecas para agilizar o desenvolvimento.
• Ao criar grandes aplicações: A arquitetura modular do React facilita a construção e manutenção de grandes aplicações. É possível atualizar, remover ou adicionar novos componentes para escalar sua aplicação sem alterar o código-fonte.
• Ao construir aplicações com conteúdo dinâmico: React pode ser utilizado com bibliotecas de terceiros como Redux para gerenciar o estado da sua aplicação. Essa biblioteca cria um DOM virtual que atualiza apenas as partes necessárias quando os usuários interagem com a aplicação.

Quando escolher JavaScript em vez de React

• Aplicações pequenas: JavaScript é adequado para aplicações pequenas que não exigem muita interação do usuário.
• Quando você quer aprender como JavaScript funciona: Vanilla JavaScript permite que você configure a maioria das coisas do zero. Isso oferece uma compreensão mais profunda de como o JavaScript opera.

Conclusão

Esperamos que este artigo tenha esclarecido as diferenças entre React e JavaScript, seus recursos e quando usar cada um. Em resumo, JavaScript é ideal para projetos pequenos quando o objetivo é entender os bastidores do JavaScript.

Por outro lado, React é mais adequado para projetos grandes onde o foco é a interface do usuário. Tanto React quanto JavaScript permitem o uso de diversas estruturas e bibliotecas JavaScript.

Se você busca uma alternativa direta ao React, explore nosso artigo comparando React e Angular.