Bem-vindo ao dia 4 do desafio "30 dias de ReactJS"! Hoje, vamos explorar Components and Props — os blocos de construção de qualquer aplicativo React. A compreensão desses conceitos permitirá que você divida sua IU em partes independentes e reutilizáveis.

O que são componentes?

Os componentes do React são como os ingredientes de uma receita. Assim como você combina diferentes ingredientes para criar um prato, você combina componentes para construir um aplicativo React. Um componente é uma função ou classe JavaScript que opcionalmente aceita entradas (conhecidas como props) e retorna um elemento React que descreve o que deve aparecer na tela.

Existem dois tipos principais de componentes no React:

Componentes funcionais: Estas são funções JavaScript que retornam JSX. Eles são mais simples e fáceis de ler.

Componentes de classe: Estas são classes ES6 que se estendem de React.Component. Eles têm mais recursos como métodos de estado e ciclo de vida, mas são menos comuns no desenvolvimento moderno do React.

Exemplo: um componente de botão

Vamos criar um componente de botão simples:

function Button() {
  return (
    Click me!
  );
}

Este componente Button é um componente funcional que retorna um elemento de botão com o texto "Click me!".

Por que os componentes são importantes

Os componentes permitem que você divida sua IU em partes menores e gerenciáveis. Isso torna seu código mais organizado e fácil de manter. Imagine tentar cozinhar um prato complexo sem dividi-lo em etapas. Seria caótico! Da mesma forma, construir uma UI sem componentes pode ser uma tarefa árdua.

Exemplo da vida real: blocos de Lego
Pense em componentes como blocos de Lego. Cada bloco (componente) é uma parte do seu aplicativo e você pode combiná-los para criar algo maior. Assim como os blocos de Lego, os componentes podem ser reutilizados em diferentes partes da sua aplicação.

O que são acessórios?
Props (abreviação de "propriedades") são a forma como você passa dados de um componente para outro. Eles são semelhantes aos argumentos de função e podem ser usados ​​para personalizar um componente.

Por exemplo, digamos que queremos criar um componente Button que possa exibir textos diferentes com base nos adereços que recebe:

function Button(props) {
  return (
    {props.label}
  );
}

Agora, ao usar o componente Button, você pode passar um rótulo para personalizar seu texto:

function App() {
  return (
    

      
      
    
  );
}

Aqui, o componente Button é usado duas vezes, mas com rótulos diferentes: "Enviar" e "Cancelar".

A importância dos adereços

Os adereços tornam seus componentes mais flexíveis e reutilizáveis. Em vez de codificar valores dentro de seus componentes, você pode passar dados dinâmicos por meio de adereços, permitindo usar o mesmo componente em contextos diferentes.

Configurando componentes e acessórios com Vite

Como estamos usando o Vite em nosso ambiente de desenvolvimento, configurar componentes e acessórios é simples. Se você está acompanhando, seu projeto Vite já está configurado. Você pode começar a criar componentes em arquivos separados e importá-los para seu aplicativo principal.

Veja como você pode estruturar seu projeto:

1. Crie um novo componente: Crie um novo arquivo, Button.jsx, em sua pasta src e defina seu componente Button lá.
2. Use o componente em seu aplicativo: Em seu arquivo App.jsx, importe o componente Button e use-o com diferentes adereços.

Juntando tudo

Componentes e adereços estão no centro da arquitetura baseada em componentes do React. Ao dividir sua UI em componentes menores e passar dados entre eles usando props, você pode construir aplicativos escaláveis ​​e de fácil manutenção.

Amanhã, nos aprofundaremos nos métodos de estado e ciclo de vida, que permitirão que seus componentes gerenciem dados dinâmicos e respondam às mudanças ao longo do tempo.