Introdução ao React

Como funciona o React, para que ele serve, por que foi criado e quais problemas essa biblioteca resolve. vou abordar os principais conceitos do React, como JSX, componentes, props, eventos, estado, formulários, renderização condicional, listas e muito mais!

O que aprender

• Como funciona o React e sua filosofia
• Por que o React foi criado e quais problemas ele resolve
• Os principais conceitos e funcionalidades do React:
  • JSX
  • Componentes
  • Props
  • Eventos
  • Estado
  • Formulários
  • Renderização condicional
  • Listas
  • E muitos outros!

Requisitos

Ter conhecimentos sólidos em:

• HTML e CSS: utilizar JSX (parecido com HTML) e CSS em alguns exercícios
• Javascript: React é basicamente Javascript, então é essencial dominar bem JS antes de começar. Em especial:
  • Funções
  • Objetos
  • Arrays

O que é React e por que utilizá-lo

React é uma biblioteca Javascript open-source criada pelo Facebook para construção de interfaces de usuário. É utilizada para desenvolver aplicações web e mobile de alta performance e escalabilidade.

Mas por que utilizar React ao invés de apenas Javascript, HTML e CSS?

Problemas que o React resolve

O React surgiu da necessidade de resolver alguns problemas comuns no desenvolvimento web:

• Complexidade crescente das aplicações web, que ficam cada vez maiores e mais complexas. O React ajuda a manter essa complexidade organizada.

• Atualização de dados na interface. O React facilita fazer essas atualizações de forma performática através do conceito de "estado".

• Organização. O React permite quebrar a interface em componentes reutilizáveis, facilitando a manutenção do código.

• Testabilidade. A natureza modular do React permite testar os componentes de forma isolada.

Em resumo, o React surgiu da necessidade de uma arquitetura que desse conta de aplicações web cada vez mais complexas e escaláveis.

Benefícios do React

Utilizar React traz diversos benefícios, como:

• Código mais organizado e fácil de dar manutenção
• Interface construída com componentes reutilizáveis
• Fácil integração com outras bibliotecas Javascript
• Ecossistema enorme e comunidade muito ativa
• Alta performance
• Sites responsivos de forma facilitada
• Entre muitos outros benefícios

Por tudo isso e mais, React se tornou uma das bibliotecas Javascript mais populares nos últimos anos. Vale muito a pena aprender!

JSX: Javascript + XML

Um dos principais conceitos do React é o JSX.

JSX permite escrever código que lembra muito HTML, mas com toda a funcionalidade do Javascript.

É uma extensão de sintaxe para Javascript que permite descrever como a interface deve ser renderizada.

Exemplo:

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

Este código JSX será "convertido" para Javascript puro e renderizará um h1 com o texto "Hello World".

O JSX é apenas "açúcar sintático" para chamar funções Javascript que renderizam os elementos na tela.

No fundo é tudo Javascript, mas de uma forma que facilita muito criar interfaces complexas com facilidade de manipulação de dados.

Componentes

Outro conceito chave no React são os componentes.

Componentes permitem dividir a interface em partes menores, independentes e reutilizáveis.

São pequenos pedaços isolados de código que retornam trechos de interface.

Exemplo de componente:

function Botao() {  return <button>Clique aqui</button>; }

Este componente renderiza um botão com o texto "Clique aqui".

Podemos reutilizar este componente em qualquer lugar da aplicação:

function Pagina() {  return (    <div>      <Botao /> // Renderizando o componente      <Botao /> // Renderizando novamente    </div>  );}

Os componentes são a base para criar interfaces complexas no React. Permite dividir em partes menores, testáveis e reaproveitáveis.

Props

As props (ou propriedades) permitem customizar componentes na hora de utilizá-los.

São dados que podemos passar para o componente personalizar seu funcionamento.

Exemplo:

function Botao(props) {  return <button>{props.text}</button>;}function Pagina() {  return (    <div>      <Botao text="Comprar" />      <Botao text="Vender" />    </div>  );  }

Neste exemplo, passamos a prop text para customizar o texto do botão em cada caso.

As props permitem reutilizar o mesmo componente de diferentes maneiras.

Estado

O estado é um objeto Javascript que contém dados que podem influenciar na renderização da interface.

Quando os dados do estado são atualizados, o React redesenha os componentes de forma inteligente, renderizando apenas o necessário.

Exemplo de estado:

const [contador, setContador] = useState(0); 

Este código define um estado chamado contador com valor inicial 0.

Podemos atualizar este estado chamando a função setContador().

Quando isso ocorre, o React redesenha os componentes, fazendo com que a interface reflita o novo valor.

O estado é uma funcionalidade muito importante para criar interfaces dinâmicas e interativas.

Eventos

Para criar interfaces interativas, precisamos lidar com eventos do usuário, como cliques, submissão de formulários, etc.

No React, lidamos com eventos de forma muito similar ao DOM do browser:

function Botao() {  function clicou() {    console.log("Botão clicado!");  }  return (    <button onClick={clicou}> // Adicionando listener de evento      Clique aqui    </button>  )}

Basta adicionar listeners de eventos aos elementos JSX, passando funções Javascript para serem executadas quando o evento ocorrer.

Dessa forma conseguimos responder às interações do usuário.

Formulários

Formulários têm alguns comportamentos específicos no React.

Geralmente guardamos os dados do formulário no estado do componente, pois aí fica fácil de acessar para envio ou validação.

Exemplo:

function Formulario() {  const [email, setEmail] = useState("");  function aoDigitarEmail(evento) {    setEmail(evento.target.value);   }  return (    <form>      <input         type="email"        value={email}        onChange={aoDigitarEmail} />      <button type="submit">Enviar</button>    </form>  );}

Alguns detalhes importantes:

• Guardamos o valor do input no estado com useState
• Sincronizamos esse valor no atributo value do input
• Capturamos a digitação com o evento onChange, atualizando o estado

Dessa forma o React controla o formulário de ponta a ponta.

Renderização condicional

Podemos renderizar componentes condicionalmente baseado em valores do estado com as estruturas if/else ou operador ternário.

Exemplo:

function Pagina() {  const [mostrarTexto, setMostrarTexto] = useState(true);  return (    <div>      {mostrarTexto ? ( // Renderiza se verdadeiro        <p>Texto para mostrar</p>        ) : (        <p>Texto para esconder</p>      )}      <button onClick={() => setMostrarTexto(!mostrarTexto)}>        Alterar texto      </button>    </div>  );}

Desta forma podemos renderizar diferentes interfaces baseado no estado da aplicação.

Listas e chaves

Para renderizar listas de itens no React, utilizamos a função map():

function Lista() {  const itens = ["Item 1", "Item 2", "Item 3"];    return (    <ul>      {itens.map(item => (         <li key={item}>{item}</li>      ))}    </ul>  );}

O key é importante para o React identificar quais itens são adicionados/alterados/removidos.

Desta forma podemos renderizar listas de qualquer tipo de dados de forma fácil.