Inicio » Blog » React JS

28 marzo, 2021

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

 

 

 


import './App.css'
import CardList from './components/CardList'

function App() {
    return (
    <>
    <h1>HOLA</h1>
    <CardList/>
    </>
  );
}

export default App

 

import React from 'react'
import Card from './Card'
import './cardList.css'

const CardList = () => {
  return (
    <>
      <div className="cardlist">
        <h2>Lista de Cursos</h2>
        <Card name="Javascript" postCount="110" linkUrl="https://codea.app/javascript" linkName="Ver Info" />   
        <Card name="NextJS"  postCount="10"/>   
        <Card name="Jquery"  postCount="1000"/>
      </div>
    </>
  )
}

export default CardList

 

.cardlist{
    max-width: 300px;
    padding: 16px;
    background: gainsboro;
    margin: 0 auto;
    border-radius: 16px;
}
.cardlist h2{
    text-align: center;
}

 

import React from 'react'
import './card.css'

const Card = (str) => {
  return (
    <div className='card'>
        <h3>{str.name}</h3>
        <p>Cantidad: {str.postCount}</p>
        <a href={str.linkUrl}>{str.linkName}</a>
    </div>
  )
}

export default Card

 

 

.card{
    margin: 20px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.358);
    padding: 16px;
    border-radius: 10px;
}
.card a{
    background-color: crimson;
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 10px;
}


Leido 7401 veces

Compartir link del tutorial con tus amigos


ReactJS Básico ReactJS Básico

ReactJS Básico

Descarga del código fuente

USD 0.00

ReactJS y Laravel Directorio de Empresas ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel desarrollo fullstack directorio empresarial

Descarga del código fuente

USD 47.00

Aprende más sobre React JS

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023