REACT – INFORMAÇÕES DE RELEVÂNCIA

Por Ricardo Costa Val do Rosario

Adaptado como material de apoio para o curso "Curso de Dash: 
construindo dashboards 	para modelos de Machine Learning". 

Também inclui um fluxograma visual descritivo ao final.

1. Introdução ao React

O que é o React?

• Biblioteca JavaScript para construção de interfaces de usuário (UI).

• Foco em componentes reutilizáveis e discretos.

• Utiliza JSX, que mistura HTML com JavaScript.

Por que React é relevante?

• Facilita a criação, manutenção e atualização de UIs complexas.

• Permite atualizações incrementais ou altamente interativas.

2. Componentes em React

Conceito de Componente

• Funções JavaScript (ou classes) que recebem props e retornam JSX.

• Envolvem lógica de renderização e comportamento da UI.

function Video({ video }) {
  return (
    <div>
      <Thumbnail video={video} />
      <a href={video.url}>
        <h3>{video.title}</h3>
        <p>{video.description}</p>
      </a>
      <LikeButton video={video} />
    </div>
  );
}

• Video usa Thumbnail e LikeButton como subcomponentes.

3. Estado e Interatividade

Hooks: useState

• Permite gerenciar estados dentro dos componentes funcionais.

• Re-renderiza a UI dinamicamente em resposta a eventos (cliques, entradas de texto).

Renderização Condicional e Iterações

• Métodos como map() para gerar listas.

• Exibição dinâmica baseada em condições lógicas.

4. Composição de Interfaces

Composição Modular

• Componentes pequenos são combinados para formar UIs completas.

• Exemplo: VideoList que renderiza múltiplos Video a partir de um array.

Benefícios da Arquitetura por Componentes

• Redução de complexidade.

• Permite trabalho colaborativo e divisão de responsabilidades.

5. Integração e Escalabilidade

Uso Flexível

• Pode ser inserido em projetos HTML existentes.

• Base para frameworks como Next.js e Remix.

Escalabilidade para Aplicações Completas

• Suporte à renderização no servidor (SSR) e busca assíncrona de dados.

6. React em Plataformas Móveis

React Native e Expo

• Criação de apps móveis nativos com os mesmos conceitos de React Web.

• Interface de verdade, não apenas webviews.

Desenvolvimento Cross-Platform

• Compartilhamento de lógica e componentes entre Web e Mobile.

7. Ecossistema e Comunidade

• Comunidade ativa e global.

• Atualizações frequentes e eventos (conferências, workshops).

• Amplo suporte, documentação e bibliotecas complementares.

Início

↓

Definição de Componentes

↓

Uso de Props e JSX para Renderização

↓

Gerenciamento de Estado
(Hooks como useState)

↓

Composição Modular (UI)

→ Uso de múltiplos componentes

↓

Interatividade e Atualizações Dinâmicas

↓

Integração com HTML ou Frameworks
(Next.js, Remix, etc.)

↓

Desenvolvimento Nativo com React Native

↓

Compartilhamento entre Web e Mobile

↓

Suporte e Evolução via Comunidade

↓

Fim