DEV Community: Pri

dev.study #02 - React.js: Fundamentos, Componentes, Props e Hooks ⚛️

Pri — Sat, 17 Oct 2026 13:34:25 +0000

React é uma biblioteca JavaScript de código aberto utilizada para construir interfaces de usuário interativas, reutilizáveis e baseadas em componentes.

Desenvolvido originalmente pelo Facebook (atual Meta), o React introduz uma abordagem declarativa para a criação de interfaces, permitindo que a aplicação atualize sua apresentação conforme os dados e estados são modificados.

Neste estudo, vamos explorar seus principais fundamentos e entender como aplicá-los na prática.

01. O que é React?

O React permite dividir uma interface em partes independentes chamadas componentes.

Cada componente representa um elemento da aplicação, como um botão, formulário, menu ou card.

Essa abordagem oferece algumas vantagens:

Reutilização: o mesmo componente pode ser utilizado em diferentes partes da aplicação.
Manutenção: alterações podem ser realizadas de forma isolada.
Organização: a interface é dividida em estruturas menores.
Interatividade: componentes podem reagir às ações do usuário e às mudanças de dados.

React é uma biblioteca, não um framework completo. Funcionalidades como roteamento e determinadas estratégias de carregamento de dados dependem da arquitetura e das ferramentas escolhidas.

02. JSX — JavaScript XML

JSX é uma extensão de sintaxe que permite escrever marcação semelhante ao HTML dentro do JavaScript.

function Welcome() {
  const name = "Developer";

  return <h1>Hello, {name}! 👋</h1>;
}

As chaves {} permitem inserir expressões JavaScript no JSX.

Algumas regras importantes:

Retornar um único elemento raiz ou utilizar fragments (<>...</>).
Utilizar className no lugar de class.
Fechar todas as tags.
Utilizar camelCase em propriedades como onClick.

O JSX é transformado pelas ferramentas de compilação para que o React possa utilizá-lo.

03. Components — Componentes

Componentes são funções JavaScript que retornam elementos React.

function Button() {
  return (
    <button className="btn">
      Click me
    </button>
  );
}

export default Button;

Para utilizar esse componente:

import Button from "./Button";

function App() {
  return (
    <main>
      <h1>React Study</h1>
      <Button />
    </main>
  );
}

Conceito principal: componentes devem possuir responsabilidades bem definidas e podem ser combinados para construir interfaces mais complexas.

04. Props — Propriedades

Props permitem passar informações de um componente pai para um componente filho.

function UserCard({ name, role }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

Utilização:

<UserCard
  name="Pricila"
  role="Software Developer"
/>

Os valores recebidos são utilizados para personalizar o componente.

Importante: props são imutáveis do ponto de vista do componente que as recebe. Para modificar informações ao longo do tempo, podemos utilizar estados.

05. State — Gerenciamento de estado

O estado representa informações que podem ser alteradas durante a execução da aplicação.

Para gerenciar um estado local, podemos utilizar o Hook useState.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(previous => previous + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>
        Increment
      </button>
    </div>
  );
}

Nesse exemplo:

count: valor atual do estado.
setCount: função responsável por solicitar a atualização.
useState(0): inicializa o estado com zero.
onClick: registra o evento de clique.

Quando o estado muda, o React agenda uma nova renderização do componente.

06. Conditional Rendering

Renderização condicional significa apresentar elementos diferentes dependendo de determinada condição.

function Dashboard({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h2>Welcome back!</h2>
      ) : (
        <h2>Please log in.</h2>
      )}
    </div>
  );
}

O operador ternário permite escolher qual conteúdo será renderizado.

Esse recurso é muito utilizado em autenticação, carregamento de dados, permissões e estados vazios.

07. Lists and Keys

O React permite renderizar listas utilizando métodos JavaScript como map().

const technologies = [
  { id: 1, name: "React" },
  { id: 2, name: "JavaScript" },
  { id: 3, name: "TypeScript" }
];

function TechnologyList() {
  return (
    <ul>
      {technologies.map(tech => (
        <li key={tech.id}>
          {tech.name}
        </li>
      ))}
    </ul>
  );
}

A propriedade key ajuda o React a identificar os elementos de uma lista entre renderizações.

Prefira identificadores estáveis e únicos entre os elementos irmãos, principalmente quando a lista pode sofrer alterações.

08. useEffect — Sincronização com sistemas externos

O Hook useEffect é utilizado para sincronizar um componente com sistemas externos, como eventos do navegador, conexões e APIs externas.

import { useEffect, useState } from "react";

function WindowWidth() {
  const [width, setWidth] = useState(
    window.innerWidth
  );

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener(
        "resize",
        handleResize
      );
    };
  }, []);

  return <p>Width: {width}px</p>;
}

Nesse exemplo, useEffect registra um listener para acompanhar o redimensionamento da janela.

A função retornada realiza a limpeza do listener quando necessário.

Observação: nem toda transformação de dados exige useEffect. Cálculos que dependem apenas de props e estados geralmente podem ser realizados diretamente durante a renderização.

09. Virtual DOM e Renderização

O React utiliza uma representação dos elementos da interface em memória, frequentemente associada ao conceito de Virtual DOM.

Quando ocorre uma atualização:

O React renderiza novamente os componentes necessários.
Compara a nova estrutura de elementos com a anterior durante a reconciliação.
Determina quais mudanças precisam ser aplicadas.
Realiza as atualizações necessárias no ambiente de renderização.

Esse processo ajuda a organizar as atualizações da interface sem exigir manipulação manual do DOM para cada alteração.

Entretanto, o Virtual DOM não significa que toda aplicação React será automaticamente mais rápida que uma implementação em JavaScript puro.

10. Criando um projeto com Vite

O Vite é uma ferramenta que permite criar e executar projetos React com uma configuração inicial simples.

Para criar um projeto:

npm create vite@latest react-study -- --template react

Entre no diretório:

cd react-study

Instale as dependências:

npm install

Inicie o servidor de desenvolvimento:

npm run dev

A aplicação estará acessível pelo endereço informado no terminal.

Para executar esse processo, é necessário ter uma versão do Node.js compatível com os requisitos do Vite instalado.

11. React x JavaScript Vanilla

Característica	JavaScript Vanilla	React
Interface	Manipulação direta do DOM	Componentes declarativos
Reutilização	Funções e módulos	Componentes e Hooks
Estado	Gerenciamento manual	Hooks e outras soluções
Atualização visual	Controlada pelo desenvolvedor	Coordenada pelo React
Dependências	Pode funcionar sem bibliotecas	Requer React

Ambas as abordagens são válidas. A escolha depende da complexidade, dos requisitos e da arquitetura da aplicação.

12. Resumo dos conceitos

Conceito	Descrição
React	Biblioteca JavaScript para interfaces
JSX	Sintaxe de marcação utilizada com JavaScript
Component	Unidade reutilizável da interface
Props	Informações recebidas por um componente
State	Dados que podem mudar ao longo do tempo
useState	Hook para gerenciar estado
useEffect	Hook para sincronização externa
Conditional Rendering	Exibição baseada em condições
Keys	Identificadores de elementos em listas

🌷 Conclusão

Estudar React permite compreender uma abordagem moderna para a construção de interfaces web.

Os conceitos de componentização, propriedades, gerenciamento de estado e renderização declarativa são fundamentais para desenvolver aplicações organizadas e escaláveis.

Mais importante do que memorizar a sintaxe é compreender o fluxo de dados, as responsabilidades dos componentes e a maneira como o React reage às mudanças de estado.

Com esses fundamentos, é possível avançar para assuntos como roteamento, gerenciamento de estado global, custom Hooks, consumo de APIs e otimização de desempenho.

📚 Referências

dev.study — Anotações e estudos sobre desenvolvimento de software. ✨

🐧 dev.curiosity #01 - A história por trás do Ubuntu

Pri — Fri, 16 Oct 2026 22:43:59 +0000

Você já parou para pensar de onde vêm os nomes das tecnologias que usamos todos os dias?

Sempre gostei de descobrir essas pequenas histórias e foi daí que surgiu o dev.curiosity, uma série para compartilhar curiosidades, origens e detalhes do universo dev que vão além do código. 🌷

Para a primeira edição, escolhi o Ubuntu. E o mais interessante é que sua história começa muito antes da tecnologia!

Muito além de um nome

A palavra Ubuntu está ligada a uma filosofia africana que valoriza a humanidade, a coletividade e a importância das nossas conexões.

Uma das formas mais conhecidas de expressar essa ideia é:

Eu sou porque nós somos.

Achei interessante como esse conceito se aproxima do universo open source, onde desenvolvedores compartilham conhecimento e colaboram na construção de software.

E essa relação não é por acaso: a filosofia também inspirou os valores e a identidade do próprio Ubuntu.

Mas como surgiu o sistema?

Em 2004, Mark Shuttleworth e uma equipe de desenvolvedores começaram a construir uma distribuição Linux gratuita, acessível e mais simples de utilizar.

O Ubuntu nasceu a partir do Debian, aproveitando tecnologias como o formato de pacotes .deb e o APT (Advanced Package Tool), utilizado para instalar, atualizar e gerenciar softwares por meio de repositórios.

Sua primeira versão, o Ubuntu 4.10, foi anunciada em outubro de 2004 e recebeu um apelido curioso: Warty Warthog, algo como "javali verrugoso".

Desde o início, o projeto também adotou um ciclo de lançamentos aproximadamente a cada seis meses, oferecendo atualizações mais previsíveis.

Com o passar dos anos, a distribuição evoluiu, incorporando novas tecnologias e mudanças significativas na interface.

Mas uma coisa permaneceu: a ideia de comunidade presente em sua origem.

E tem um detalhe que eu não conhecia: até o símbolo do Ubuntu representa essa filosofia!

Chamado de Circle of Friends (Círculo de Amigos), ele representa três pessoas conectadas, reforçando os valores de colaboração e coletividade que inspiraram seu nome.

Fontes

dev.study #01 - Learning NumPy, Arrays & Boolean Indexing

Pri — Fri, 09 Oct 2026 01:18:28 +0000

I'm currently participating in GCI World 2026, a Data Science program offered by the University of Tokyo's Matsuo-Iwasawa Laboratory.

Coming from a PHP development background, exploring Python for Data Science has been a new and exciting experience!

What I learned this week

NumPy Arrays — Performing mathematical operations efficiently.
Indexing & Slicing — Accessing specific elements and ranges.
Multidimensional Arrays — Working with rows, columns, and matrices.
Boolean Indexing — Filtering arrays using conditions.

A little code snippet

One of our homework exercises was to filter an array and return only odd numbers divisible by 5.

def homework(a):
    return a[(a % 5 == 0) & (a % 2 == 1)]

Simple, but a great way to understand how Boolean indexing works without writing loops!

Learning beyond Python 🌎

Another challenge? The entire program is taught in English!

As a Brazilian developer, I'm not only learning Data Science but also improving my technical English and connecting with people from different countries.

Sometimes it's challenging, but that's exactly what makes this experience worthwhile.

Python, Data Science, and English — all at once.

One lecture at a time. 💗

Thank you, GCI World, for this opportunity!

dev.log #01 - Bem vindo(a) 🌸

Pri — Mon, 05 Oct 2026 22:29:46 +0000

Oi! Sou a Pricila, do Rio de Janeiro. 💖

Estou tentando melhorar meu inglês e aprofundar meus conhecimentos em programação. Atualmente, trabalho com PHP, mas quero construir uma base sólida em Python para alçar voos maiores, hahaha.

Não vejo tanto futuro no PHP, mas nunca diga nunca, né? Continuo estudando o coitado em paralelo. 😅

Com tanta IA fazendo praticamente tudo, confesso que às vezes fico perdida sobre o que estudar e até um pouco desanimada.

Resolvi documentar meus aprendizados por aqui, misturando português e inglês, porque ainda estou aprendendo. #sad

organizando minhas postagens:

dev.log — Registros de projetos, experiências práticas, desenvolvimento de funcionalidades e aprendizados do dia a dia como dev.
dev.study — Anotações de estudos, resumos de aulas, conceitos técnicos e conteúdos que estou aprendendo ou revisando.
dev.til — Pequenas descobertas, comandos úteis, atalhos e coisas que aprendi por acaso. (Today I Learned)
dev.thoughts — Reflexões, opiniões e questionamentos sobre programação, tecnologia e carreira.
dev.unfiltered — Desabafos sinceros, frustrações e pensamentos sem muito filtro sobre a vida de dev.
dev.reality — Desafios reais do desenvolvimento, dificuldades técnicas, mercado de trabalho e situações que nem sempre aparecem nos tutoriais.
dev.diary — Relatos mais pessoais sobre minha evolução, conquistas, inseguranças e experiências ao longo da jornada.
dev.offtopic — Assuntos aleatórios, interesses pessoais e conversas que não precisam necessariamente envolver programação.
dev.curiosity — Assuntos intrigantes e curiosidades da área tech.