Introdução ao React

O que é React?

React é uma biblioteca JavaScript para construir interfaces de usuário. Pense nele como uma caixa de ferramentas para criar os elementos visuais de um site ou aplicativo, como botões, menus e formulários. A grande ideia do React é dividir a interface em pequenas partes independentes e reutilizáveis, chamadas de componentes.

Components are the fundamental building blocks of any React application.

Em vez de lidar com uma página inteira como um único bloco de código, você constrói pequenas peças, como um botão de perfil ou uma barra de busca, e depois as junta para formar telas complexas. Essa abordagem torna o desenvolvimento mais organizado, rápido e fácil de manter.

Escrevendo com JSX

Ao trabalhar com React, você encontrará uma sintaxe chamada JSX. Ela parece HTML, mas na verdade é uma extensão do JavaScript. O JSX permite que você descreva como a sua interface deve parecer de uma forma familiar e declarativa, diretamente no seu código JavaScript.

const elemento = <h1>Olá, mundo!</h1>;

Embora pareça HTML, existem algumas diferenças importantes. Por exemplo, como class é uma palavra reservada em JavaScript, usamos className para adicionar classes CSS. Além disso, o JSX permite incorporar expressões JavaScript diretamente na sua marcação, envolvendo-as em chaves {}. Isso é extremamente poderoso.

const nome = 'Ana';
const elemento = <h1>Olá, {nome}!</h1>;

Componentes, Props e State

Componentes são o coração do React. Eles são como funções JavaScript que aceitam entradas (chamadas de "props") e retornam elementos React que descrevem o que deve aparecer na tela. Existem dois tipos principais de dados que um componente gerencia: props e state.

Props (propriedades) são usadas para passar dados de um componente pai para um componente filho. Elas são somente leitura, o que significa que um componente filho não pode alterar as props que recebeu.

Imagine um componente Botao que precisa exibir um texto diferente dependendo de onde é usado. Podemos passar esse texto como uma prop.

// Componente filho que recebe a prop 'texto'
function Botao(props) {
  return <button>{props.texto}</button>;
}

// Componente pai que usa o Botao
function App() {
  return (
    <div>
      <Botao texto="Confirmar" />
      <Botao texto="Cancelar" />
    </div>
  );
}

State (estado), por outro lado, é um conjunto de dados gerenciado dentro de um componente. Ele é usado para informações que podem mudar ao longo do tempo, como a entrada de um usuário em um formulário ou se um menu está aberto ou fechado. Quando o estado de um componente muda, o React o renderiza novamente para refletir essa mudança.

O state é o que torna as interfaces do React dinâmicas e interativas.

Vamos ver um exemplo simples de um contador. Cada vez que o botão é clicado, o estado do componente é atualizado e o novo valor é exibido na tela.

import { useState } from 'react';

function Contador() {
  // Declara uma variável de estado chamada 'contagem'
  const [contagem, setContagem] = useState(0);

  return (
    <div>
      <p>Você clicou {contagem} vezes</p>
      <button onClick={() => setContagem(contagem + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

O Ciclo de Vida de um Componente

Cada componente em React passa por um ciclo de vida, que podemos dividir em três fases principais: montagem, atualização e desmontagem.

Montagem (Mounting): É quando o componente é criado e inserido na página pela primeira vez. É o nascimento do componente.
Atualização (Updating): Ocorre sempre que as props ou o state do componente mudam. O React detecta a mudança e renderiza o componente novamente para exibir as informações atualizadas.
Desmontagem (Unmounting): Acontece quando o componente é removido da página. Isso pode ocorrer, por exemplo, quando o usuário navega para uma página diferente. É a morte do componente.

Entender esse ciclo é fundamental para executar ações em momentos específicos, como buscar dados de uma API quando o componente é montado ou limpar recursos quando ele é desmontado. Nos componentes de função modernos, gerenciamos esses efeitos colaterais do ciclo de vida com o useEffect Hook.

Quiz Questions 1/4

Qual é a principal filosofia por trás da construção de interfaces de usuário com React?

Quiz Questions 2/4

Ao escrever JSX, que se assemelha a HTML, por que usamos className em vez de class para atribuir classes CSS a um elemento?

Esses são os pilares do React. Dominar componentes, JSX, props e state é o primeiro grande passo para construir aplicações web modernas e reativas.

Componentes de Header Reutilizáveis em React