Creating a clone of Airbnb Experiences
page using ReactJS
A clone of Airbnb Experiences
page, created to practice ReactJS
. It comprises of some static images and a list of Experiences
created dynamically from data in an array
. While creating this project I learned about React Props
, Creating Components from an Array
, using Mapping Components
, etc. After creating the project, deployed it to github-pages
🐦 Feel free to reach me at Twitter 🌊
- NPM
- ReactJS
- Custom Components
- create-react-app
- Figma
- github-pages
cd airbnb-experiences
npm install
npm start
-
- Initailize the project using
npx create-react-app airbnb-experiences
which will create a complete React App pre-configured and pre-installed with all the dependencies. - Import
Poppins
font from google fonts.
- Initailize the project using
-
- Create a
components
folder insidesrc
directory. - Create custom components inside
components
folder. - Create an
images
folder insidesrc
directory and move images/logos inside it.
- Create a
-
- Delete unnecessary files from directory and format code with
Prettier
.
- Delete unnecessary files from directory and format code with
-
- Create
Navbar
component and basic JSX elements for it. - Add appropriate
className
s to elements inNavbar
component. - Add
airbnb.svg
image toNavbar
component. - Import Navbar component inside
App
component. - Style
Navbar
component.
- Create
-
- Create
Hero
component and basic JSX elements for it. - Add appropriate
className
s to elements inHero
component. - Add
photo-grid.png
image toHero
component. - Import Hero component inside
App
component. - Style
Hero
component.
- Create
-
- Create
Card
component and basic JSX elements for it. - Add appropriate
className
s to elements inCard
component. - Add
photo-grid.png
image toCard
component. - Import
Card
component insideApp
component. - Add basic style to
Card
component.
- Create
-
- Create
Footer
component and basic JSX elements for it. - Import Footer component inside
App
component. - Style
Card
component.
- Create
-
- Hardcode the props for
Card
component and pass props toCard
.
- Hardcode the props for
-
- Create a file called
data.js
, which contains an array of objects. It reperesents the data that will be used insideCard
component. - Import images for
Card
component. - Use .map to iterate over array of objects inside
data.js
to createCard
components. - When we .map over array of objects in
App
component, Add key prop 🗝️ (key={item.id}
) when passing props toCard
components. This will get rid of this warning :
⚠️ react_devtools_backend.js:4026 Warning: Each child in a list should have a unique "key" prop. Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information. at Card (http://localhost:3000/main.5c1f9e47e1f13a06e783.hot-update.js:27:18) at App
- Create a file called
-
- Add flexbox style to
Card
component. - App is responsive upto this point. 😃
- Add flexbox style to
-
- Add a
Sold Out
badge element forCard
component and style it. - Use condititonal rendering in
Card
component to renderSOLD OUT
badge only ifopenSpots: 0
and iflocation: "Online"
renderONLINE
instead. Comapare against keys inside array of objects indata.js
.
- Add a
-
- Pass entire object when we .map over array of objects in
App
component using item as key and array of objects as its value. - Access the object that is passed as prop in
Card
component, where item is key and array of objects are its values.
- Pass entire object when we .map over array of objects in
-
- We can make use of
{...item}
Spread in Object Literals, which takes properties of our object and create a separate prop for each key in object. Value of props can be accessed usingprops.key
syntax, where key is an actual key indata.js
. This is an alternate to instead of creating our own prop called item to which we pass our entire object,Pass object as props(Option #1)
is used in this project.
- We can make use of
-
- Add More than 3 items inside
Card
component by updatingdata.js
. - Delete unnecessary files from directory and format code with
Prettier
. - Test for Responsiveness and make changes if need be.
- Add links to
Live Preview
and screenshots.
- Add More than 3 items inside
-
- Use Official Documentation(link) to push project to GitHub Pages 🎆🎆🎆
-
The Odin Project
-
Figma Design
-
Scrimba
-
React Official Documentation
-
YouTube
-
FreeCodeCamp
-
MDN
“A ship in port is safe, but that’s not what ships are built for.”
— Grace Hopper
⚓ 🖥️ 🛣️