React - Versão 19.2

1 - Introdução 2 - Conceitos 3 - Configurar ambiente 4 - Criar e executar projeto 5 - Componente 6 - Fragment 7 - Imagens 8 - CSS 9 - Condicional 10 - Escolha 11 - Repetição 12 - Eventos 13 - Funções 14 - Hook useState 15 - Activity 16 - Manipular formulários (1ª parte) 17 - Manipular formulários (2ª parte) 18 - Props 19 - User Interface 20 - Considerações

5 - Componente

Olá pessoal, na quinta aula do treinamento de React, iremos trabalhar com componentes.

Componentes são partes de um site/sistema. A grande vantagem de adotarmos o uso de componentes é a reutilização e uma estrutura mais organizada e modular.

Para criarmos um componente no React, não é necessário parar o projeto. Basta criar o arquivo dentro da pasta src do seu projeto.

Agora podemos criar um componente. Existem duas formas comuns:

  • Criar um componente funcional manualmente, por exemplo: MeuComponente.jsx (para JavaScript) ou MeuComponente.tsx (para TypeScript)
  • Usar snippets do VSCode para gerar a estrutura básica do componente

Fique à vontade para escolher o método que preferir. Agora vamos compreender a estrutura de um componente React:

  • JSX: Arquivo que combina HTML com lógica JavaScript
  • CSS: Arquivo ou módulo para estilização do componente
  • Opcional: Testes: Arquivo para testes unitários (por exemplo MeuComponente.test.jsx)

Acompanhe nossa aula no YouTube e aprenda a criar seu primeiro componente React: