Crear un componente Card

Programar un componente Card React

Crear un componente Card

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

Aprende más sobre React JS

Codea App
Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022