My React Journey : Airbnb Clone using React

-

Airbnb Clone





Airbnb is an American vacation rental online marketplace. It is one of the popular websites that is designed using React. Since I am a front end developer I started this project using React. I followed the tutorial of the Clever Programmer. I had a basic knowledge of React so, I enjoyed the tutorial. 

In that tutorial I got to learn the following concepts regarding React Js :

  • Material UI
  • React Hooks
  • React Router
  • Firebase Hosting
  • Flexbox
  • Grow/Shrink Animation
  • CSS
  • Date Picker
I will be giving basic concepts about the above mentioned points and how those are used in building Airbnb Clone.

So let's get started!

Before starting our journey, let's have look at a few snapshots of the project.



 




 
You can also check the project at https://airbnb-clone-d5975.web.app/  live.

MATERIAL UI

Material UI is one of the most popular React UI framework. It is available as npm package.

Material-UI provides icons support in three ways:

  1. Standardized Material Design icons exported as React components (SVG icons).
  1. With the SvgIcon component, a React wrapper for custom SVG icons.
  1. With the Icon component, a React wrapper for custom font icons.

In order to install and save it in your package.json dependencies run the command :

In order to use prebuilt SVG Material icons, such as those found in the icons demos you must first install the @material-ui/icons package:  


Material Icons is very easy to use and you can easily import it into the app folder.

REACT HOOKS

 React Hooks are a new addition in React 16.8. They let you use state and other react features without writing the class.







Comments

Post a Comment

Popular posts from this blog

Episode 2- React Components

-
Image
   Components represent the part of the user interface. Components are independent and reusable bits of code. They are as same as javascript functions, but work in isolation and returns HTML. Remember that Components must always start with Uppercase letters. The above figure shows the components i.e Header, Sidebar, Main Content, and Footer. These components are reusable and can be used in any part of our code. Components are of two types: 1. Stateless Functional Components  2. Stateful Class Components Before going into these components, let's  have a quick overview of stateless and stateful. The main difference between stateless and stateful is one has state and the other does not i.e stateful has state and stateless doesn't. In other words, Stateful components are keeping the track of changing data while stateless components print out what is given to them via props. Now let's talk about Stateless Functional Components  Stateless Functional Components: Statel...
Read more

Episode 1: Creating the First React App

-
Image
INTRODUCTION A javascript Front-end library for building User Interface. Everything in React is a component,i.e every part of a web app or website is a component, all are made separately and finally fitted into a parent component which is then rendered. Popular websites that are based on React include Facebook, Instagram, Netflix, Uber, Airbnb, Reddit, and many more.  Starting with React from scratch might sound difficult at first. All we need is a basic knowledge of HTML, CSS, and JS. In this tutorial, we will cover the latest concepts like functional components, React Hooks, REDUX, and many more. So, let’s get started by building our first React Project! SYSTEM SETUP Before jumping into React we first need to check whether the basic system setup is available. Firstly we need to install Node.js and NPM i.e Node.js package manager. So, make sure you have Node.js installed on our system. You can check the Node.js website at https://nodejs.org and download the installer. Basically,...
Read more

Episode 3- Stateless Functional Components

-
Image
In our previous episode, we discuss a bit about what is stateless functional components. Now, we will do deep into that topic. Without further delay let's jump into our topic. Stateless functional components are the javaScript functions that optionally receive arbitrary functions called props i.e properties and returns HTML that describes UI. HTML in this case is JSX. If you remember we talk about JSX in our previous videos. Let's called it HTML as I assume most of us are complete beginners. So, now let's go back to VS code and create our very first functional component. The component is simply a javaScript file. First, I am going to create a folder called components inside src folder. And, within the folder called components, I am going to create a file called Welcome.js. For the naming convention of components, we will use the Pascal Case. So the first step here is to import React i.e    import React from "react"   Then let's create a function named Welcome ...
Read more