Hello readers!

Today in this article we will see how to build an Airbnb Clone using React and Elastic. As we all familiar already about what is React?. Let’s see about little bit of Elastic Search.

Elastic search is a super fast open source search engine. It is used to store, search and analyze high volume of data fastly.

Using Elastic search we can build a fast searching query DSL. To set up elastic search correctly requires a lot of work. In Elastic search the data mapping should be set correctly. We can add more filters along with the search query resulting in search query.

---

How to use Elastic search with React?

We are going to use ReactiveSearch an open-source components library for Elastic search. It provides a highly customizable UI components that connects with Elastic search server and provide an appropriate default search query for all use-cases.

Let’s build an searchbox UI example using Elastic search by the following code:

<DataSearch
    componentId="search"
    dataField="name"
    placeholder="Search housings..."
    iconPosition="left"
/>

---

Prerequisites

To build an Airbnb like application we need set of things to gets started:

• Data set for Airbnb housing properties.
• Elastic search hosting.

I have created a data set for our application. You can checkout this:

---

Setup

To get started use the Create React App command in your local terminal. And then use yarn to import modules instead of npm.

yarn global add create-react-app
create-react-app airbeds
cd airbeds
yarn start

At this point, your directory structure look like this:

airbeds
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── yarn.lock
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Next install ReactiveSearch by following command:

yarn add @appbaseio/reactivesearch@2.16.1

Add the first ReactiveSearch component to ReactiveBase

Add all the ReactiveSearch components inside a container component that includes the Elastic search index and the ReactiveSearch component in /src/App.js:

import React, { Component } from 'react';
import { ReactiveBase } from '@appbaseio/reactivesearch';

class App extends Component {
  render() {
    return (
      <section className="container">
        <ReactiveBase
          app="housing"
          credentials="0aL1X5Vts:1ee67be1-9195-4f4b-bd4f-a91cd1b5e4b5"
          type="listing"
        >
          Hello from ReactiveSearch!
        </ReactiveBase>
      </section>
    );
  }
}
export default App;

#javascript #web-development #react #elasticsearch #programming