LojaVirtualReact

Prévia do material em texto

PÚBLICA 
Exemplo de uma loja virtual usando React, e adicionarei explicações em comentários no código para 
facilitar a compreensão. Vamos lá: 
 
import React from 'react'; 
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; 
import './App.css'; // Importação do arquivo de estilos CSS 
import products from './products'; // Importação dos dados fictícios dos produtos 
 
// Componente para a página inicial da loja 
function Home() { 
 return ( 
 <div> 
 <h2>Produtos</h2> 
 <div className="product-list"> 
 {/* Mapeamento dos produtos para exibição na lista */} 
 {products.map(product => ( 
 <div key={product.id} className="product-card"> 
 <img src={product.image} alt={product.name} /> 
 <h3>{product.name}</h3> 
 <p>R${product.price.toFixed(2)}</p> 
 {/* Link para os detalhes do produto */} 
 <Link to={`/product/${product.id}`}>Ver Detalhes</Link> 
 </div> 
 ))} 
 </div> 
 </div> 
 ); 
} 
 
// Componente para exibir os detalhes de um produto específico 
function ProductDetail({ match }) { 
 // Encontrar o produto correspondente ao ID na rota 
 const product = products.find(p => p.id === parseInt(match.params.id)); 
 
 // Se o produto não existir, exibir uma mensagem de erro 
 if (!product) { 
 return <div>Produto não encontrado.</div>; 
 } 
 
 // Renderizar os detalhes do produto 
 return ( 
 <div> 
 <h2>{product.name}</h2> 
 <img src={product.image} alt={product.name} /> 
 <p>{product.description}</p> 
 <p>R${product.price.toFixed(2)}</p> 
 </div> 
 ); 
 
PÚBLICA 
} 
 
// Componente principal da aplicação 
function App() { 
 return ( 
 <Router> {/* Início do roteador */} 
 <div className="App"> 
 <header className="App-header"> 
 <h1>Minha Loja Virtual</h1> 
 </header> 
 <Switch> {/* Início do componente de rota */} 
 {/* Rota para a página inicial */} 
 <Route path="/" exact component={Home} /> 
 {/* Rota para os detalhes do produto */} 
 <Route path="/product/:id" component={ProductDetail} /> 
 </Switch> {/* Fim do componente de rota */} 
 </div> 
 </Router> {/* Fim do roteador */} 
 ); 
} 
 
export default App; 
 
 
Neste exemplo, criamos uma loja virtual simples com uma página inicial que lista alguns produtos e uma página de 
detalhes de produto que exibe informações sobre um produto específico. Utilizamos a biblioteca react-router-dom 
para gerenciar as rotas da aplicação. 
Agora você pode expandir este exemplo adicionando mais funcionalidades, como um carrinho de compras, páginas 
de checkout, autenticação de usuários, entre outros.