today we make airbnb site

airbnb 클론코딩 코드

App.js

import "./styles.css";
import Navbar from "./components/Navber";
import Hero from "./components/Hero";
import Card from "./components/Card";
import Data from "./components/data";
//component Navbar
//nav img
//img / nav--logo
const Cars = Data.map((bnb) => (
  <Card
    img={bnb.coverImg}
    title={bnb.title}
    price={bnb.price}
    rating={bnb.stats.rating}
    location={bnb.location}
    reviewCount={bnb.stats.reviewCount}
    id={bnb.id}
    description={bnb.description}
    openSpots={bnb.openSpots}
  />
  //<Card {...bnb}/> //이런식으로 하면 data에 있는 key값을 써야함함
));
export default function App() {
  return (
    <>
      <Navbar />
      <Hero />
      <section className="cards-list">{Cars}</section>
    </>
    //props일일히 다 넣기 차이
    //bnb = {bnb}넣기 차이(Card에서 props.bnb.state.raviewCount)
    //{...bnb}넣기기
  );
}
//Card 컴포넌트 수정
//props받기
//종류 img / rating / reviewCount / country
// title/ price

App.js에서 data.js에 있는 데이터를 bnb로 선언하여 map()으로 각각 요소를 가지고 온 후 안에 있는 각각의 요소를 Card.js로 props로 전달한다.

conponents/data.js

export default [
  {
    id: 1,
    title: "Life Lessons with Katie Zaferes",
    description:
      'I will share with you what I call "Positively Impactful Moments of Disappointment." Throughout my career, many of my highest moments only came after setbacks and losses. But learning from those difficult moments is what gave me the ability to rise above them and reach my goals.',
    price: 136,
    coverImg: "image12.png",
    stats: {
      rating: 5.0,
      reviewCount: 6
    },
    location: "Online",
    openSpots: 0
  },
  {
    id: 2,
    title: "Learn Wedding Photography",
    description:
      "Interested in becoming a wedding photographer? For beginner and experienced photographers alike, join us in learning techniques required to leave the happy couple with memories that'll last a lifetime.",
    price: 125,
    coverImg: "bikvk.png",
    stats: {
      rating: 5.0,
      reviewCount: 30
    },
    location: "Online",
    openSpots: 27
  },
  {
    id: 3,
    title: "Group Mountain Biking",
    description:
      "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
    price: 50,
    coverImg: "quein.png",
    stats: {
      rating: 4.8,
      reviewCount: 2
    },
    location: "noWay",
    openSpots: 3
  }
];

배열 형식으로 Object를 만들어 각 요소에 id, title, description, price, coverImg, stats:rating, stats:reviewCount, location, openSpots를 설정하여 각 필요한 props에서 필요한 값을 전달한다.

components/Navber.js

export default function Navbar() {
  return (
    <nav>
      <img src="../image/airbnb-logo.png" />
    </nav>
  );
}

Navber bar를 만든다. img(⬇⬇⬇⬇⬇)에 logo image넣어 바를 생성한다.

components/Hero.js

export default function here() {
  return (
    <section className="hero">
      <img src="../image/photo-grid.png" className="hero--photo" />
      <h1 className="hero--header">Online Experiences</h1>
      <p className="hero--text">
        Join unique interactive activities led by one-of-a-kind hosts—all
        without leaving home.
      </p>
    </section>
  );
}

section tag로 묶어 h1 tag로 Online Experiences라는 주제의 구역을 만든다.

text로 내용을 만든다.

img⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇