使用React和Vite构建一个AirBnb Experiences克隆网站

这一篇文章中,我会教你如何做一个AirBnb Experiences的克隆网站。主要涵盖React中Props的使用。

克隆网站最终呈现的效果:

1. 使用vite构建基础框架

bash 复制代码
npm create vite@latest

cd airbnb-project
npm install
npm run dev

2. 构建网站的3个部分

网站从上至下主要分为导航栏、简介和活动栏三个部分。

我们在public文件夹之下建立components文件夹,然后分别建立Navbar.jsx,Hero.jsx和Card.jsx这三个文件,分别对应网站的三个部分。

另外,在public文件夹之下建立images文件夹,包含网站要用的所有图片。

photo-grid.png

wedding-photography.png

mountain-bike.png

airbnb-logo.png

katie-zaferes.png

star.png

3. 删除index.css中的所有内容

index.css

css 复制代码
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

4. 导航栏

Navbar.jsx

javascript 复制代码
export default function Navbar() {
    return (
        <nav>
            <img src="/images/airbnb-logo.png" className="nav--logo"/>
        </nav>
    )
}

对应的index.css中的内容。

css 复制代码
nav {
  height: 70px;
  display: flex;
  padding: 20px 36px;
  box-shadow: 0px 2.98256px 7.4564px rgba(0, 0, 0, 0.1);
}

.nav--logo {
  max-width: 100px;
}

5. 简介栏

Hero.jsx

javascript 复制代码
export default function Hero() {
    return (
        <section className="hero">
            <img src="/images/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>
    )
}

对应的index.css中的内容。

css 复制代码
section {
  padding: 20px;
}

.hero {
  display: flex;
  flex-direction: column;
}

.hero--photo {
  max-width: 400px;
  align-self: center;
}

.hero--header {
  margin-bottom: 16px;
}

.hero--text {
  margin-top: 0;
}

6. 活动栏

Card.jsx

javascript 复制代码
export default function Card(props) {
    let badgeText
    if (props.item.openSpots === 0){
        badgeText = "SOLD OUT"
    } else if (props.item.location === "Online"){
        badgeText = "ONLINE"
    }

    return (
        <div className="card">
            {badgeText && <div className="card--badge">{badgeText}</div>}
            <img 
                src={`/images/${props.item.coverImg}` }
                className="card--image"
                alt="Image of Katie Zaferes."
            />
            <div className="card--stats">
                <img 
                    src="/images/star.png" 
                    className="card--star"
                    alt="Star icon."    
                />
                <span>{props.item.stats.rating}</span>
                <span className="gray">({props.item.stats.reviewCount}) · </span>
                <span className="gray">{props.item.location}</span>
            </div>
            <h2>{props.item.title}</h2>
            <p><span className="bold">From ${props.item.price}</span> / person</p>
        </div>
    )
}

对应的index.css中的内容。

css 复制代码
.card {
  width: 175px;
  font-size: 0.75rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  position: relative
}

.card--image {
  width: 100%;
  border-radius: 9px;
  margin-bottom: 9px;
}

.card--title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.card--stats {
  display: flex;
  align-items: center;
}

.card--star {
  height: 14px;
}

.card--price {
  margin-top: auto;
}

.card--badge{
  position: absolute;
  top: 6px;
  left: 6px;
  background-color: white;
  padding: 5px 7px;
  border-radius: 2px;
  font-weight: bold;
}

h2 {
  font-size: 0.75rem;
  font-weight: normal;
}

.gray {
  color: #918E9B;
}

.bold {
  font-weight: bold;
}

7. 删除App.css中的所有内容

8. 准备需要的数据

在src文件夹之下建立data.jsx文件,准备在活动栏中需要呈现的内容。

data.jsx

javascript 复制代码
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: "katie-zaferes.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: "wedding-photography.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: "mountain-bike.png",
        stats: {
            rating: 4.8,
            reviewCount: 2
        },
        location: "Norway",
        openSpots: 3,
    }
]

9. 更新App.jsx中的内容

App.jsx

javascript 复制代码
import Navbar from "../public/components/Navbar"
import Hero from "../public/components/Hero"
import Card from "../public/components/Card"
import data from "./data"

export default function App() {
  const cards = data.map(item => {
    return (
      <Card
        key = {item.id}
        item = {item}
      />
    )
  })
  return (
      <div>
          <Navbar />
          <Hero />
          <section className="cards--list">
            {cards}
          </section>
          
      </div>
  )
}

对应的index.css中的内容。

css 复制代码
.cards--list {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
}

10. 完整的index.css

css 复制代码
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

nav {
  height: 70px;
  display: flex;
  padding: 20px 36px;
  box-shadow: 0px 2.98256px 7.4564px rgba(0, 0, 0, 0.1);
}

h2 {
  font-size: 0.75rem;
  font-weight: normal;
}

.gray {
  color: #918E9B;
}

.bold {
  font-weight: bold;
}

.nav--logo {
  max-width: 100px;
}

section {
  padding: 20px;
}

.hero {
  display: flex;
  flex-direction: column;
}

.hero--photo {
  max-width: 400px;
  align-self: center;
}

.hero--header {
  margin-bottom: 16px;
}

.hero--text {
  margin-top: 0;
}

.cards--list {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
}

.card {
  width: 175px;
  font-size: 0.75rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  position: relative
}

.card--image {
  width: 100%;
  border-radius: 9px;
  margin-bottom: 9px;
}

.card--title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.card--stats {
  display: flex;
  align-items: center;
}

.card--star {
  height: 14px;
}

.card--price {
  margin-top: auto;
}

.card--badge{
  position: absolute;
  top: 6px;
  left: 6px;
  background-color: white;
  padding: 5px 7px;
  border-radius: 2px;
  font-weight: bold;
}

11. 上传到github

12. 上传到netlify

相关推荐
li35745 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj5 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel5 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel5 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵7 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld7 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷8 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军8 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离9 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库