使用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

相关推荐
江号软件分享43 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js