Projeto desenvolvido para praticar o conceito de Props em React. O objetivo é entender como passar informações do componente pai para o componente filho, criando componentes reutilizáveis.

Este exercício demonstra a criação de um componente Card que recebe props e renderiza diferentes conteúdos baseados nos dados recebidos.

• React - Biblioteca JavaScript para construção de interfaces
• Vite - Build tool moderna e rápida
• CSS Inline - Estilização com gradientes preto e roxo

• ✅ Criação de componentes reutilizáveis
• ✅ Passagem de props do componente pai para filho
• ✅ Desestruturação de props
• ✅ Renderização dinâmica de conteúdo
• ✅ Comunicação unidirecional (one-way data flow)

• Node.js instalado (versão 16 ou superior)
• npm ou yarn

1. Clone o repositório:

git clone https://github.com/DevAlex-full/exercicio-props-react.git

2. Acesse a pasta do projeto:

cd exercicio-props-react

3. Instale as dependências:

npm install

4. Execute o projeto:

npm run dev

5. Abra o navegador em http://localhost:5173

src/ ├── components/ │ └── Card.jsx # Componente que recebe props ├── App.jsx # Componente principal └── main.jsx # Arquivo de entrada 

function Card({ titulo, descricao }) { return ( <div style={{ /* estilos */ }}> <h2>{titulo}</h2> <p>{descricao}</p> </div> ); }

<Card titulo="React Props" descricao="Props são argumentos passados para componentes React." />

O componente Card é reutilizado múltiplas vezes com diferentes valores de props, demonstrando a flexibilidade e reusabilidade dos componentes React.

Props (propriedades) são argumentos passados para componentes React, similar a parâmetros de função. Elas permitem:

• Passar dados do componente pai para o filho
• Criar componentes dinâmicos e reutilizáveis
• Manter o fluxo de dados unidirecional
• Tornar o código mais organizado e manutenível

Este projeto está disponível online em: https://recebendo-e-renderizando-props-react.netlify.app/

Alex - DevAlex-full

• Portfolio: portifoliodevalex.netlify.app
• GitHub: @DevAlex-full

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

⭐ Se este projeto foi útil para você, deixe uma estrela!

#React #JavaScript #Props #Frontend #WebDevelopment