React.js Card

2021-02-18T00:27:04.000Z

I’ve been learning React so that I can build my web applications for others and myself. React is component based. You create reusable components and render them with data. Here I created a card component that lets me insert cards. They can even contain other cards and are easy to understand from the App.js.

To create a new component I just create a new file called Card.js and import it at the top of App.js.

import Card from './Card.js';

Then inside Card.js I can create my Card. At the top I import my styles and return the JSX Card object.

import './Card.css';

function Card(props) {
	return (
		<div className="Card">
			<h2 className="CardTitle">{props.cardTitle}</h2>
			<p className="CardContent">{props.children}</p>
		</div>
	);
}

export default Card;

At the bottom I set the default export to Card so that we can import it properly in App.js.

My styles are fairly simple, they just create a nice looking card.

.Card {
	text-align: center;
	background-color: lightgrey;
	border: 1px solid grey;
	border-radius: 0.5em;
	margin: 1em;
	height: 20em;
	overflow: hidden;
}

.CardTitle {
	font-size: 1em;
}

.CardContent {
	background-color: white;
	height: 100%;
	border-radius: 0.5em;
	border-top-left-radius: 0em;
	border-top-right-radius: 0em;
	padding: 1em;
}

That’s great but we still have to insert our card in App.js. Now that we’ve created a component and imported it all I have to do in App.js to create a card is this.

<Card cardTitle="Example Card Title">Hello World</Card>

Finally we can see that this builds a card.

This can be used for building any kind of component, such as dialog boxes, forms, or anything you can imagine in HTML/CSS.