3월 27일 (TIL React)

어려워서 5시간짜리를 보고 있다.

https://www.youtube.com/watch?v=DLX62G4lc44&t=939s

import React from "react";
import ContactCard from "./ContactCard";

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

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

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

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

export default App;

import React from "react";

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

export default ContactCard;