Programar un componente Card React
Cómo crear un componente Card reutilizable con React JS
Para crear un componente Card con React JS y usarlo como items listados verticalmente dentro de un contenedor Checkout aplicando CSS para el diseño UI
Arrancando index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import './App.css';
import Checkout from './components/Checkout'
function App() {
return( <div>
<Checkout />
</div> );
}
export default App;
components/Checkout,js
import React from 'react'
import Card from './Card'
import './Checkout.css'
export default class Checkout extends React.Component{
render(){
return (
<div className="checkout">
<div className="checkout-items">
<Card />
<Card />
<Card />
</div>
<p className="textCantidad">Total <span>$340</span></p>
<a href="" className="btnCheckout">Checkout</a>
</div>
)
}
}
components/Checkout.css
.checkout{
margin: 0 auto;
width: 400px;
}
.textCantidad{
text-align: center;
font-weight: 500;
}
.btnCheckout{
text-align: center;
background-color: black;
width: 100%;
color: white;
font-weight: 500;
display: block;
padding: 20px;
margin-top: 20px;
text-decoration: none;
}
components/Card,js
import React from 'react'
import './Card.css'
export default class Card extends React.Component{
render(){
return (
<div className="card">
<div className="card-logo">
<img src='./img/logo_1.png' width='100' />
</div>
<div className="card-content">
<h1>Titulo</h1>
<p>Descripcion</p>
</div>
</div>
)
}
}
components/Card.css
.card{
width: 100%;
border-radius: 10px;
background-color: peru;
display: inline-flex;
margin: 10px;
box-shadow: rgba(0, 0, 0, 0.295) 0px 0px 10px ;
}
.card-logo{
padding: 10px;
}
.card-content{
color:white
}
No hay descargable
Redactado por: , Leido 4934 veces
© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022