vicradon/index.html

## index.html
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>

## props in react.md

      
    Raw
  

              props in react.md
            
          
    Props in React

React has stuff called props, just like the attriutes in HTML. These props, like attributes pass data to the element.
So, the props is gotten from the custom component and sent to the function where it is read as a props object.
With object destructurung, we can distribute these props.
technically, it's possible to use an object im the JSX redintion instead of normal, HTML like properties. This object would be wrapped in curly braces to notify react that it's JS. You'd have to account for the object in the compomemt function

  
## propsInreact.js
// contactCard code
import React from "react"

function ContactCard(props) {
    console.log(props)
    const {name, imgUrl, phone, email} = props;
    return (
        <div className="contact-card">
            <img src={imgUrl}/>
            <h3>{name}</h3>
            <p>Phone: {phone}</p>
            <p>Email: {email}</p>
        </div>
    )
}

export default ContactCard

//App.js code
import React from "react"
import ContactCard from "./ContactCard"

function App() {
    return (
        <div className="contacts">
            <ContactCard
                name="Mr. Whiskerson"
                imgUrl="http://placekitten.com/300/200"
                phone="(212) 555-1234"
                email="mr.whiskaz@catnap.meow"
            />

            <ContactCard
                name="Fluffykins"
                imgUrl="http://placekitten.com/400/200"
                phone="(212) 555-2345"
                email="fluff@me.com"
            />

            <ContactCard
                name="Destroyer"
                imgUrl="http://placekitten.com/400/300"
                phone="(212) 555-3456"
                email="ofworlds@yahoo.com"
            />

            <ContactCard
                name="Felix"
                imgUrl="http://placekitten.com/200/100"
                phone="(212) 555-4567"
                email="thecat@hotmail.com"
            />

        </div>
    )
}

export default App

//index.js code

import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

## style.css
body {
    margin: 0;
}

.contacts {
    display: flex;
    flex-wrap: wrap;
}

.contact-card {
    flex-basis: 250px;
    margin: 20px;
}

.contact-card > img {
    width: 100%;
    height: auto;
}

.contact-card > h3 {
    text-align: center;
}

.contact-card > p {
    font-size: 12px;
}
	<html>
	<head>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="root"></div>
	<script src="index.pack.js"></script>
	</body>
	</html>
	// contactCard code
	import React from "react"

	function ContactCard(props) {
	console.log(props)
	const {name, imgUrl, phone, email} = props;
	return (
	<div className="contact-card">
	<img src={imgUrl}/>
	<h3>{name}</h3>
	<p>Phone: {phone}</p>
	<p>Email: {email}</p>
	</div>
	)
	}

	export default ContactCard

	//App.js code
	import React from "react"
	import ContactCard from "./ContactCard"

	function App() {
	return (
	<div className="contacts">
	<ContactCard
	name="Mr. Whiskerson"
	imgUrl="http://placekitten.com/300/200"
	phone="(212) 555-1234"
	email="mr.whiskaz@catnap.meow"
	/>

	<ContactCard
	name="Fluffykins"
	imgUrl="http://placekitten.com/400/200"
	phone="(212) 555-2345"
	email="fluff@me.com"
	/>

	<ContactCard
	name="Destroyer"
	imgUrl="http://placekitten.com/400/300"
	phone="(212) 555-3456"
	email="ofworlds@yahoo.com"
	/>

	<ContactCard
	name="Felix"
	imgUrl="http://placekitten.com/200/100"
	phone="(212) 555-4567"
	email="thecat@hotmail.com"
	/>

	</div>
	)
	}

	export default App

	//index.js code

	import React from "react"
	import ReactDOM from "react-dom"

	import App from "./App"

	ReactDOM.render(<App />, document.getElementById("root"))
	body {
	margin: 0;
	}

	.contacts {
	display: flex;
	flex-wrap: wrap;
	}

	.contact-card {
	flex-basis: 250px;
	margin: 20px;
	}

	.contact-card > img {
	width: 100%;
	height: auto;
	}

	.contact-card > h3 {
	text-align: center;
	}

	.contact-card > p {
	font-size: 12px;
	}