Crear un componente Card

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

Crear un componente Card

Cómo crear un componente Card reutilizable con React JS

 

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 tiene descargable

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 97 veces | Publicado hace 3 semanas

Curso VUE.JS CRUD en PHP y MYSQL

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021