A indústria de desenvolvimento web tem visto um crescimento constante nos últimos anos; e à medida que este crescimento continua, novas tecnologias estão constantemente emergindo para ajudar os desenvolvedores na criação de sites e aplicativos web de fácil utilização.

Ao longo dos anos, temos visto linguagens de programação web produzindo recursos adicionais, mais linguagens de programação sendo usadas na criação de tecnologias web, e até mesmo frameworks e bibliotecas sendo construídas com base nas estruturas das tecnologias existentes.

Neste tutorial, vamos falar sobre React — a biblioteca JavaScript baseada em componentes mais populares usada para a criação de interfaces de usuário. Embora este tutorial seja completamente amigável para iniciantes, também pode servir como um guia de referência para desenvolvedores experientes em React.

Vamos falar sobre as funcionalidades do React, os prós e contras, porque você deve usá-lo, e como instalar e usar o React. Também veremos algumas das principais características do React usando exemplos práticos de código.

No final deste tutorial, você saberá o que é React, como ele funciona e como usá-lo na construção de projetos incríveis.

O que é React?

React.js, frequentemente chamado apenas de React, é uma biblioteca JavaScript usada para construir interfaces de usuário. Cada aplicativo web React é composto de componentes reutilizáveis que compõem partes da interface do usuário — podemos ter um componente separado para nossa barra de navegação, um para o rodapé, outro para o conteúdo principal, e assim por diante. Você entenderá isso melhor mais a frente.

O uso de componentes reutilizáveis facilita o desenvolvimento, uma vez que não é preciso repetir código recorrente. Basta criar a lógica do componente e importá-lo em qualquer parte do código em que for necessário.

React também é um aplicativo de uma única página. Assim, ao invés de enviar uma solicitação ao servidor toda vez que uma nova página é renderizada, o conteúdo da página é carregado diretamente dos componentes do React. Isso leva a uma renderização mais rápida sem recarregamentos de página.

Geralmente, a sintaxe usada para construir aplicativos React é chamado de JSX (JavaScript XML), que é uma extensão de sintaxe para JavaScript. Isso nos permite combinar tanto a lógica JavaScript quanto a lógica da interface do usuário de uma maneira única. Com o JSX, eliminamos a necessidade de interagir com o DOM usando métodos como document.getElementById, querySelector, e outros métodos de manipulação de DOM.

Embora o uso do JSX não seja obrigatório, ele torna o desenvolvimento de aplicativos React mais fácil.

Aqui está um exemplo de como podemos usar o JSX no React:

function App() {
    const greetings = "Hello World";
        return (
            <div className="App">
            <h1> {greetings} </h1>
            </div>
        );
    }
}

No código acima, usamos um componente funcional React para renderizar uma parte de texto para o navegador. O nome do componente é App. Criamos uma variável antes da função render().

Em seguida, passamos essa variável para a marcação usando colchetes. Isso não é HTML, mas a sintaxe para escrever código usando JSX.

Na próxima seção, discutiremos algumas das razões pelas quais você deveria usar o React.

Por que React?

Muitos desenvolvedores e organizações escolheram React em vez de outras bibliotecas/frameworks; aqui estão os motivos:

  • Fácil de aprender: React é fácil de aprender e entender, desde que você tenha um bom entendimento dos pré-requisitos. React tem uma sólida documentação e muitos recursos gratuitos criados por outros desenvolvedores on-line através da comunidade ativa do React.
  • Componentes reutilizáveis: Cada componente do React tem sua própria lógica que pode ser reutilizada em qualquer lugar do aplicativo. Isso reduz a necessidade de reescrever a mesma parte de código várias vezes.
  • Oportunidades de emprego: Uma porcentagem maior de oportunidades de desenvolvimento web no momento tem o React como uma das habilidades necessárias. Assim, ter um entendimento de como o React funciona e ser capaz de trabalhar com ele aumenta suas chances de conseguir um emprego.
  • Melhoria do desempenho: Com o DOM virtual do React, o processo de renderização de páginas pode ser feito mais rapidamente. Ao utilizar uma biblioteca de roteamento como o React Router, é possível renderizar diferentes páginas sem a necessidade de recarregar a página inteira.
  • Amplamente extensível: React é uma biblioteca que só renderiza a interface de usuário de nosso aplicativo. Cabe ao desenvolvedor escolher quais ferramentas trabalhar, como bibliotecas para renderizar páginas diferentes, bibliotecas de design, e assim por diante.

Quem usa React?

O React tem sido usado por muitos engenheiros de frontend tanto em startups quanto em empresas estabelecidas como Facebook, Netflix, Instagram, Yahoo, Uber, The New York Times e outras.

Embora nem todas as empresas listadas acima tenham construído todo o seu produto usando React, algumas de suas páginas foram construídas usando React. Isso se deve ao alto desempenho, facilidade de uso e escalabilidade do React.

Casos de uso do React

React é geralmente usado para construir a interface do usuário (frontend) dos aplicativos web. Ele possui renderização rápida de páginas e aumento de desempenho. O React pode ser usado para construir qualquer produto que funcione na web.

Aqui estão apenas algumas das coisas que o React é comumente usado para construir:

  • Aplicativos de reprodução de música
  • Aplicativos de redes sociais
  • Aplicativos de chat em tempo real
  • Aplicativos web full-stack
  • Aplicativos de eCommerce
  • Aplicativos meteorológicos
  • Aplicativos de lista de afazeres

Funcionalidades do React

O React tem uma infinidade de recursos incríveis que continuam a torná-lo uma opção popular para desenvolvedores.

Aqui estão algumas das principais funcionalidades do React:

  • JSX: Esta é uma extensão de sintaxe JavaScript que estende as funcionalidades do ES6 (ECMAScript 2015). Isso nos permite combinar a lógica JavaScript e a marcação em um componente.
  • DOM Virtual: Esta é uma cópia do objeto DOM que primeiro atualiza e re-renderiza nossas páginas quando são feitas alterações; ele então compara o estado atual com o DOM original para mantê-lo em sincronia com as mudanças. Isso leva a uma renderização mais rápida da página.
  • Componentes: Aplicativos React são feitos de diferentes componentes reutilizáveis que possuem sua própria lógica e interface de usuário. Isso o torna eficiente para escalar aplicativos e manter o desempenho alto, pois o código não é duplicado com tanta frequência como em outros frameworks.

Prós e contras do React

React pode ser uma ferramenta popular para construir nossa interface do usuário (UI), mas ainda existem razões pelas quais alguns desenvolvedores ou iniciantes optam por não usá-la.

Nesta seção, falaremos sobre os prós e contras do React.

Aqui estão os prós do uso do React:

  1. React é fácil de aprender e entender.
  2. React tem uma comunidade muito ativa onde você pode contribuir e obter ajuda quando necessário.
  3. Há muitas oportunidades de trabalho para os desenvolvedores do React.
  4. React oferece um aumento de desempenho do aplicativo.

Aqui estão alguns dos contras de usar o React:

  1. Iniciantes que não têm uma compreensão sólida de JavaScript (especialmente ES6) podem achar difícil entender o React.
  2. O React não inclui algumas funcionalidades comuns, como gerenciamento de estado único e roteamento; você precisaria instalar e aprender a usar bibliotecas externas para elas.

Começando com o React

Nesta seção, primeiro falaremos sobre os pré-requisitos para usar o React e depois entraremos em detalhes sobre a configuração de um aplicativo React, criando componentes, lidando com eventos e trabalhando com estados, hooks e props no React.

Pré-requisitos para usar o React

Antes de usar o React, você deve ter uma boa compreensão e experiência do JavaScript. Aqui estão alguns dos tópicos de JavaScript que recomendamos que você aprofunde antes de usar o React:

  • Funções de setas
  • Operador Rest
  • Operador Spread
  • Módulos
  • Desestruturação
  • Métodos de Array
  • Templates literais
  • Promises
  • Palavras-chave let e const

A maioria desses tópicos acima faz parte do ES6. Você também deve ter experiência em HTML, já que a marcação faz parte da sintaxe JSX.

Como instalar o React

Antes de instalar o React, certifique-se de que você tem o Node.js instalado em seu computador.

Uma vez que você o tenha instalado com sucesso, execute o comando abaixo em seu terminal:

node -v

Se tudo der certo, o comando acima deve lhe dizer qual versão do Node.js está atualmente instalada no seu computador.

A seguir, executaremos outro comando para começar a instalar o React.

Primeiro, crie uma pasta ou navegue até o local onde você deseja que o aplicativo React seja instalado, depois execute o comando abaixo em seu terminal:

npx create-react-app react-kit

O comando acima instalará o React em uma pasta chamada react-kit.

Uma vez concluída a instalação, abra sua pasta React recentemente instalada no editor de código da sua escolha. Estaremos usando o Visual Studio Code neste tutorial. O Visual Studio Code vem com um terminal integrado. Caso você use um terminal diferente como Git Bash ou CMD, navegue para o seu diretório de aplicativos React e execute o comando abaixo:

npm run start

Esse comando inicia o seu servidor de desenvolvimento. Após algum tempo, você deverá ter esta página abaixo sendo exibida em localhost:3000 no seu navegador:

Servidor de desenvolvimento React após instalação.
Servidor de desenvolvimento React após instalação.

Se você seguiu até este aqui, então você instalou com sucesso seu primeiro aplicativo React. Parabéns!

Quando você olhar para a estrutura da sua pasta, você verá uma pasta chamada public. Esta pasta tem um arquivo index.html onde nosso código será injetado e servido para o navegador.

A pasta src é onde toda à nossa lógica, estilo e marcação vão ficar; essa é à nossa pasta de desenvolvimento, onde o arquivo App.js atua como o componente raiz. O código deste arquivo é o que temos na imagem acima.

Abra o arquivo App.js e faça algumas alterações no arquivo e, em seguida, salve para ver as alterações refletidas automaticamente no navegador.

Tudo pronto? Agora vamos escrever algum código!

Componentes React

Existem dois tipos principais de componentes no React: componentes de classe e componentes funcionais. A documentação do React está atualmente sendo reescrita usando Hooks, que é um recurso encontrado em componentes funcionais. Também usaremos componentes funcionais neste tutorial, pois eles se tornaram os componentes mais amplamente usados para aplicativos React.

Geralmente, os componentes retornam algum código HTML com uma mistura de valores dinâmicos criados usando JavaScript. Os componentes são criados como funções em JavaScript.

Criando um componente da classe React

Veremos um exemplo de um componente de classe em React.

Cada componente de classe deve incluir a declaração React.Component e render() subclass.

class Student extends React.Component {
    constructor() {
        super();
        this.state = {language: "JavaScript"};
    }
    render() {
        return <p>I am learning {this.state.language} </p>;
    }
}

No componente acima, criamos uma variável de estado chamada language com um valor de string de “JavaScript”. Usaremos esta variável em nosso markup. Este exemplo mostra como podemos misturar JavaScript e HTML sem fazer referência a nenhum método DOM.

Quando isso for renderizado para o navegador, veremos “Estou aprendendo JavaScript” renderizado na página.

Criando um componente funcional React

Nesta seção, recriaremos o exemplo da última seção usando um componente funcional.

Adicione esta função ao seu arquivo:

function Student() {
    const language = "JavaScript";
    return (
        <div>
        <p>I am learning { language } </p>
        </div>
    );
}

O nome do nosso componente é o mesmo: Student. Sempre comece o nome de seus componentes com uma letra maiúscula. Essa variável também foi passada para a marcação como fizemos na última seção, sem manipular o DOM usando métodos DOM do JavaScript puro.

Esse componente também possui uma variável Student que foi renderizada, mas à medida que avançamos no tutorial, usaremos um Hook chamado useState Hook para criar nossas variáveis de estado.

Trabalhando com eventos no React

Os eventos usados em React são similares aos que fazemos em HTML. A única diferença aqui é que os eventos React são escritos em sintaxe camelCase. Então “onclick” seria “onClick” no React, “onchange” seria “onChange”, e assim por diante.

Ao passar um evento como um atributo em uma tag HTML, usamos colchetes: onClick={changeName} ao invés de aspas onClick=”changeName”

Aqui está um exemplo (no arquivo App.js):

import { useState } from "react";
function App() {
    const [name, setName] = useState("John");
    const changeName = () => {
        setName("James");
    };
    return (
        <div className=”App”>
        <p>His name is {name}</p>
        <button onClick={changeName}> Click me </button>
        </div>
    );
}
export default App;

No código acima, criamos uma função que alerta uma mensagem no navegador. Também criamos um botão que chama esta função quando clicada. O manipulador de eventos usado aqui é o manipulador de eventos onClick.

Você notaria que o nome da função estava envolto em colchetes e não em aspas. Isso é como passar em valores dinâmicos como nomes de variáveis e funções para a marcação quando se usa JSX.

Além disso, ao invés de usar “class” como faríamos quando usamos HTML, estamos usando “className”. Isso porque “class” é uma palavra reservada em JavaScript.

Exportamos nosso componente na última linha. Isso nos permite importá-lo para outros componentes.

Trabalhando com estados no React

Ao gerenciar o estado de nosso aplicativo em React, usamos um Hook chamado useState Hook. Os hooks nos permitem acessar recursos adicionais do React sem escrever uma classe.

Com Hooks, podemos gerenciar o estado de nossos componentes e realizar certos efeitos quando nossas variáveis de estado são renderizadas pela primeira vez ou alteradas.

Sem o useState Hook em um componente funcional, quaisquer alterações feitas em nossas variáveis de estado não refletirão no DOM, portanto o estado permanecerá inalterado.

Vamos dar uma olhada em um exemplo:

import { useState } from "react";
function App() {
    const [name, setName] = useState("John");
    const changeName = () => {
        setName("James");
    };
    return (
        <div className=”App”>
        <p>His name is {name}</p>
        <button onClick={changeName}> Click me </button>
        </div>
    );
}
export default App;

Agora, analisaremos o que acabamos de fazer.

Primeiro importamos o Hook useState do React. Então criamos uma variável de estado chamado name e uma função — setName — que será utilizada para atualizar o valor da variável name. O valor inicial da variável name é armazenado no useState Hook como “John”.

A seguir, criamos uma função chamada changeName, que usa a função setName para atualizar o valor da variável name.

Em nossa marcação, uma vez que o botão é clicado, “John” é mudado para “James”.

Na próxima seção, veremos como usar outro Hook em React.

Trabalhando com Hooks no React

Na última seção, vimos como gerenciar o estado do nosso aplicativo usando o hook useStatet. Nesta seção, veremos como usar o hook useEffect.

O useEffect hook realiza um efeito cada vez que uma alteração ocorre em um estado. Por padrão, este hook é executado na primeira renderização e sempre que o estado é atualizado, mas podemos configurar e vincular um efeito a uma variável de estado respectiva.

Vejamos alguns exemplos:

import { useState, useEffect } from "react";
function App() {
    const [day, setDay] = useState(1);
    useEffect(() => {
        console.log(`You are in day ${day} of the year`);
    });
    return (
        <div>
        <button onClick={() => setDay(day + 1)}>Click to increase day</button>
        </div>
    );
}
export default App;

A primeira coisa que fizemos aqui foi importar o hook useEffect.

Toda vez que clicamos no botão, a variável name é aumentada em um, esta alteração no valor de name então faz com que o hook useEffect registre uma mensagem no console — isso acontece toda vez que a variável do name muda.

Na próxima seção, falaremos sobre Props e o fluxo de dados entre componentes.

Trabalhando com Props no React

Props permitem que passemos dados de um componente para outro. Isso torna o fluxo de dados em nosso aplicativo dinâmico e sustentável. Props é uma abreviação de propriedades.

Vejamos um exemplo de como podemos usar os props.

Esse é o aspecto do nosso arquivo App.js:

function App() {
    return (
        <div>
        </div>
    );
}
export default App;

Criamos outro componente chamado Bio.js que tem essa aparência:

function Bio() {
    return (
        <div>
        <p>My name is John</p>
        <p>I am a JavaScript developer</p>
        </div>
    );
}
export default Bio;

A seguir, importaremos o componente Bio para o nosso componente App dessa forma:

import Bio from "./Bio";
function App() {
    return (
        <div className="App">
        <Bio/>
        </div>
    );
}
export default App;

A primeira linha é onde importamos o componente Bio. Em seguida, colocamos o componente entre as tags div em nosso componente App. Quando você visualiza isso no navegador, você verá o código que criamos no componente Bio sendo renderizado.

Agora você entende como o código pode ser reutilizável no React. Mas esse código é estático; será o mesmo em qualquer componente em que for usado. Isso não será eficiente nos casos em que gostaríamos de usar o mesmo componente, mas com informações diferentes.

Corrigiremos isso usando os adereços.

No componente Bio.js, faça isso:

function Bio({name, language}) {
    return (
        <div>
        <p>My name is { name }</p>
        <p>I am a { language } developer</p>
        </div>
    );

}
export default Bio;

Primeiro desestruturamos e passamos em name e language como parâmetros. Estes parâmetros foram então usados dinamicamente em nossa marcação.

Exportamos o componente na última linha de código: export default Bio; para que possamos importá-lo para qualquer outro componente que necessita da sua lógica.

No momento, não podemos ver nenhum valor sendo exibidos para eles. Faremos isso no componente App; 

import Bio from "./Bio";
function App() {
    return (
        <div className="App">
        <Bio name="James" language="Python"/>
        </div>
    );
}
export default App;

Adicionamos atributos à nossa Bio tag correspondentes com as props que criamos anteriormente. Qualquer valor que passarmos nesses atributos será renderizado no navegador. Isso é importante para componentes que serão usados em múltiplos componentes, mas que requerem seus próprios dados diferentes.

Onde aprender mais

Este tutorial deu a você o conhecimento fundamental necessário para começar a construir aplicativos web com o React, mas não tudo o que há para saber sobre o React. Ainda existem outras funcionalidades necessárias para construir um aplicativo eficiente com o React como o roteamento em aplicativos que possuem mais de uma página e gerenciamento de estado único usando ferramentas como Redux.

O melhor lugar para começar a explorar mais sobre o React é a documentação do React. Você também pode conferir a documentação beta que está sendo reescrita usando Hooks.

Resumo

O React, como uma biblioteca frontend, tem crescido muito em comparação a outras bibliotecas/frameworks na comunidade de desenvolvedores e não mostra sinais de parar. Você pode encontrar React em todo roadmap moderno de desenvolvedores web.

Com a adoção atual da tecnologia web3 por mais e mais desenvolvedores, React permanece sendo a ferramenta favorita para construir o frontend de aplicativos descentralizadas (DApps).

Você pode construir uma variedade de aplicativos com o React, desde aplicativos web simples de lista de tarefas até marketplaces, painéis de controle e muito mais.

O React pode ser usado com muitas tecnologias como Bootstrap, Tailwind CSS, Axios, Redux, Firebase, e muito mais. Também podemos usar React com Node.js e outras linguagens backend para construir aplicativos full-stack e aplicativos web de alta velocidade.