O React é uma das bibliotecas JavaScript mais populares e utilizadas atualmente para desenvolvimento front-end. Criado pelo Facebook há mais de 10 anos, o React revolucionou a forma como pensamos em construir interfaces de usuário.

O que é React?

O React é uma biblioteca JavaScript declarativa, eficiente e flexível para criar interfaces de usuário (UI).

Foi criado em 2011 pelo engenheiro de software Jordan Walke, que trabalhava no Facebook. A primeira utilização do React foi no mural de notícias do Facebook em 2011 e depois no Instagram em 2012.

Em 2013 o React foi open-sourced, permitindo que a comunidade contribuísse para sua evolução. Desde então se tornou uma das bibliotecas front-end mais populares, com uma grande comunidade por trás.

Mas o que torna o React tão especial? Alguns pontos importantes:

  • Declarativo: O React utiliza uma API declarativa, ou seja, você descreve exatamente como a UI deve parecer em qualquer estado. Isso torna o código mais previsível e fácil de depurar.
  • Baseado em components: Você constrói a interface com pequenos trechos encapsulados de código chamados components, que gerenciam seu próprio estado e são reutilizáveis. Isso te ajuda a pensar em termos de UI isolada e reaproveitável entre projetos.
  • Código simples: O design minimialista do React torna o código limpo e fácil de entender. Como não há manipulação de DOM, templates ou data-binding, fica mais simples raciocinar sobre o código.

O React é só uma biblioteca, não um framework completo. Ele é responsável apenas pela camada de visualização (view layer) da aplicação. Por isso ele pode ser combinado facilmente com outras bibliotecas e frameworks.

Conheça a nossa profissão front-end e aprenda com os melhores profissionais do mercado!

Como o React funciona?

Antes de começarmos a codificar com React, é importante entender como ele funciona por baixo dos panos.

O React foi projetado desde o início para ser declarativo, eficiente e flexível. Para isso, ele introduziu uma nova abordagem para construir UIs, diferente do que estávamos acostumados com jQuery ou JavaScript puro.

Vamos explorar os principais conceitos:

Renderização Declarativa

No React, você descreve como a UI deve parecer a qualquer momento, em vez de diretamente mudá-la.

Quando os dados mudam, o React eficientemente atualiza e renderiza novamente apenas os components necessários.

Essa abordagem declarativa facilita muito a visualização da aplicação como um todo a qualquer momento.

Components e Props

O React permite decompor a UI em pequenos trechos encapsulados chamados components.

Components podem ser reutilizados por toda a aplicação e cada um gerencia seu próprio estado e ciclo de vida.

Eles também aceitam inputs chamados props que customizam seu comportamento e aparência.

Essa abordade baseada em components torna o código mais organizado, reutilizável e fácil de testar.

Unidirecional Data Flow e State

Os dados em aplicações React fluem em uma única direção: de pai para filho via props.

Isso torna fácil de entender de onde vem os dados e como eles estão sendo passados pela aplicação.

Quando precisamos gerenciar dados que mudam com o tempo, usamos state dentro de components, que são gerenciados internamente por eles.

Virtural DOM

O React utiliza um Virtual DOM para fazer as atualizações na tela de forma inteligente e performática.

Ao invés de diretamente manipular o DOM real como no jQuery, toda alteração é feita primeiro em uma cópia JavaScript do DOM, o Virtual DOM.

Então o React calcula de forma inteligente o que mudou, e faz apenas as atualizações necessárias no DOM real.

Isso evita operações de DOM lentas e desnecessárias, tornando o React rápido e performático. E como o programador não precisa se preocupar com essas otimizações, fica mais produtivo.

JSX

JSX é uma extensão de sintaxe para JavaScript que permite escrever código semelhante ao HTML dentro do JavaScript.

Ele é utilizado para descrever como a UI deve parecer, diretamente dentro dos components React.

Aqui está um exemplo básico:

const element = <h1>Hello, world!</h1>;

Internamente, expressões JSX são convertidas para chamadas de funções React, semelhante a:

const element = React.createElement('h1', null, 'Hello, world!');

O JSX foi projetado para ser familiar tanto para desenvolvedores React quanto para designers. Ele permite misturar HTML com JavaScript para construir components de forma declarativa.

Alguns benefícios do JSX:

  • Permite escrever HTML dentro do JavaScript
  • Sintaxe concisa e familiar
  • Ajuda a visualizar a UI e sua estrutura
  • Previne ataques de injeção com escape automático

O JSX é opcional, mas adotado pela maioria dos desenvolvedores porque torna o código mais legível e conciso.

Components

Components são pequenos trechos de código reutilizáveis que retornam HTML para descrever pedaços isolados da interface do usuário.

Eles tem alguns benefícios importantes:

  • Reutilizáveis – Components podem ser reusados por toda a aplicação
  • Isolados – Cada component gerencia seu próprio estado e markup
  • Customizáveis – Podem aceitar diferentes parâmetros chamados props
  • Modulares – Fáceis de mover para outros projetos
  • Testáveis – Simples de escrever testes unitários

Vejamos na prática como criar um Component React do zero:

import React from 'react';function Button(props) {  return <button>{props.text}</button>; }export default Button;

Esse component Button aceita um texto customizável via props e retorna o HTML de um botão com esse texto.

Podemos reutilizá-lo em múltiplos lugares:

<Button text="Enviar" /><Button text="Cancelar" />

E podemos estilizar e adicionar funcionalidades conforme necessário.

Components são a essência do React. Eles te permitem dividir complexas UIs em partes gerenciáveis, reutilizáveis e pensar em cada pedaço de forma isolada.

Props

Props (propriedades) são inputs customizáveis passados para components React.

Eles permitem reutilizar o mesmo component em diferentes contextos e com dados dinâmicos.

Por exemplo, podemos ter um component Button genérico que aceita um texto customizável:

function Button(props) {  return <button>{props.text}</button>;}<Button text="Enviar" /><Button text="Cancelar" />

Algumas características do props:

  • Permitem customizar components, como no exemplo acima
  • São imutáveis, ou seja, não podem ser modificadas pelo component
  • Fluem apenas de componentes pai para filho (unidirecional)

Props permite adaptar um component genérico para diferentes situações, tornando nosso código mais reutilizável.

Estado (State)

O state é um objeto JavaScript que armazena dados que podem mudar com o tempo dentro de um component.

Por exemplo, um component Counter poderia armazenar um número no state:

import { useState } from 'react';function Counter() {  const [count, setCount] = useState(0);    return (    <div>      <p>Você clicou {count} vezes</p>      <button onClick={() => setCount(count + 1)}>        Clique aqui      </button>    </div>  );}

Algumas características importantes do state:

  • É privado a um component (encapsulado)
  • Pode ser modificado pelo component através de setState()
  • Quando atualizado, faz o component rerenderizar

State é usado para dados que mudam com o tempo dentro de um component, como inputs de formulários, carrinhos de compras, etc.

Ciclo de Vida

Cada component React passa por uma série de fases que chamamos de ciclo de vida.

Conhecendo essas fases podemos executar código em momentos específicos desse ciclo:

  • Montagem: Quando um component é renderizado pela primeira vez
    • constructor()
    • getDerivedStateFromProps()
    • render()
    • componentDidMount()
  • Atualização: Quando um component já existe e é rerenderizado com novos dados
    • getDerivedStateFromProps()
    • shouldComponentUpdate()
    • render()
    • getSnapshotBeforeUpdate()
    • componentDidUpdate()
  • Desmontagem: Quando um component é removido da UI
    • componentWillUnmount()

Por exemplo, buscar dados de uma API apenas quando o component é montado pela primeira vez:

componentDidMount() {  fetchData();}

Ou limpar timers quando o component é desmontado:

componentWillUnmount() {  clearInterval(timer);}

Entender o ciclo de vida permite executar lógica nos momentos ideais.

React Hooks

Hooks são funções especiais do React que permitem usar features como state e ciclo de vida sem precisar escrever uma classe.

Alguns hooks comuns:

  • useState: para state em components funcionais:
import { useState } from 'react';function Counter() {  const [count, setCount] = useState(0);}
  • useEffect: para executar código quando o component atualiza:
useEffect(() => {  document.title = `Você clicou ${count} vezes`;}, [count]);
  • useContext: para passar dados globalmente:
const user = useContext(UserContext);

Hooks permitem reutilizar lógica entre components funcionais sem precisar de classes.

Eles tornam o código mais limpo, mais fácil de testar e reutilizar.

React com Typescript

O Typescript adiciona tipagem estática ao JavaScript, o que ajuda muito no desenvolvimento de aplicações complexas.

Junto com o React, o Typescript traz benefícios como:

  • Ajuda a encontrar erros durante o desenvolvimento
  • Torna o código mais fácil de entender
  • Permite refatoração com mais confiança
  • Documenta os tipos das props

Para usar Typescript com React, basta renomear os arquivos .js para .tsx e adicionar types quando necessário:

interface ButtonProps {  text: string;}function Button(props: ButtonProps) {  // ...}

O ecossistema React tem ótimo suporte a Typescript, então vale muito a pena usar!

Estilização no React

Existem várias formas de estilizar components React, cada uma com seus prós e contras. As principais são:

  • CSS puro: Arquivos CSS externos importados
import './Button.css';function Button() {  return <button className="button">Enviar</button>;}
  • Inline styles: Estilos JS direto no component
function Button() {  return <button style={{ padding: '10px' }}>Enviar</button>; }
  • CSS Modules: Arquivos CSS com escopo local
  • Styled Components: CSS-in-JS, estilos com sintaxe CSS em components
  • SASS/LESS: Pré-processadores CSS
  • CSS Frameworks: Bootstrap, MaterialUI, ChakraUI etc.

Cada abordagem tem seus casos de uso. O ideal é sempre escolher a mais adequada para seu projeto. Algumas permitem reutilização e encapsulamento melhor que outras.

React Router

O React Router é a biblioteca padrão para roteamento e navegação em aplicações React.

Ele permite criar Single-Page Applications com múltiplas views e URLs sem precisar recarregar toda a página.

Alguns componentes básicos do React Router:

  • <BrowserRouter>: Integra com a History API do browser
  • <Routes>: Define as rotas e mapeia para components
  • <Route>: Cada rota individual
  • <Link>: Para links que navegam entre rotas

Exemplo:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';function App() {  return (    <BrowserRouter>      <nav>        <Link to="/">Home</Link>        <Link to="/sobre">Sobre</Link>        </nav>            <Routes>        <Route path="/" element={<Home />} />        <Route path="/sobre" element={<About />} />      </Routes>    </BrowserRouter>  );}

O React Router torna muito simples adicionar navegação complexa em aplicações React.

Integração com APIs

A integração com APIs é essencial para muitas aplicações React consumirem e persistirem dados.

Algumas das principais formas de integrar são:

  • Fetch API: API nativa do browser para requests HTTP
  • Axios: Cliente HTTP baseado em promises
  • RTL: Biblioteca de testes que mocka requests
  • React Query: Busca, cache e atualização de dados
  • SWR: Fetching e cache de dados
  • Redux: Gerenciamento de estado global

Por exemplo, buscando dados com a Fetch API:

async function getUsers() {  const response = await fetch('/api/users');  return response.json();}function Users() {  const [users, setUsers] = useState(null);     useEffect(() => {    getUsers().then(setUsers);    }, []);  // renderiza usuários}

Existem ótimas bibliotecas para deixar essa integração mais simples e performática.

Deploy

Para colocar uma aplicação React no ar, precisamos fazer o build e deploy em algum serviço de hospedagem.

Algumas das principais opções são:

  • Vercel: Serviço de hospedagem focado em React e Next.js
  • Netlify: Hospedagem simplificada para projetos front-end
  • AWS Amplify: Hospedagem e integração com AWS
  • Firebase: Hospedagem estática e back-end serverless

O processo básico é:

  1. Fazer build da aplicação: npm run build
  2. Fazer deploy do build para o serviço escolhido
  3. Configurar rewrites e redirects

Por exemplo, com a Vercel podemos fazer deploy continuamente com GitHub/GitLab integrações automáticas.

Escolher um bom serviço de hospedagem pode facilitar e automatizar bastante o deploy.

Conheça a nossa profissão front-end e aprenda com os melhores profissionais do mercado!